/* v12 · «Почему именно Канада?» — nine reasons on one looping motion stage (the pictures from the v4 film).
   Only the visible slide animates; everything moves with transform / opacity / stroke-dashoffset — smooth on phones. */
.w12 { --ink: #0F1923; --cream: #FBF6EE; --red: #E31837; --amber: #F5C451; --pine: #2F5D50; --sand: #F1E4D3; --paper: #FFFDF8; --go: #16A34A; }
.w12-stage { display: grid; border-radius: 24px; overflow: hidden; isolation: isolate; box-shadow: 0 30px 60px -40px rgba(17, 24, 39, .45); }
.w12-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 40px; padding: 56px 56px 48px;
    min-height: 520px; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.w12-slide.is-on { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; z-index: 1; }
.w12--ink { background: var(--ink); color: var(--cream); }
.w12--red { background: var(--red); color: #fff; }
.w12--amber { background: var(--amber); color: var(--ink); }
.w12--pine { background: var(--pine); color: var(--cream); }
.w12--sand { background: var(--sand); color: var(--ink); }
.w12--paper { background: var(--paper); color: var(--ink); }

/* the words rise in after the colour changes */
.w12-copy > * { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.w12-slide.is-on .w12-copy > * { opacity: 1; transform: none; }
.w12-slide.is-on .w12-copy > :nth-child(2) { transition-delay: .08s; } .w12-slide.is-on .w12-copy > :nth-child(3) { transition-delay: .16s; }
.w12-slide.is-on .w12-copy > :nth-child(4) { transition-delay: .24s; } .w12-slide.is-on .w12-copy > :nth-child(n+5) { transition-delay: .32s; }
.w12-num { font-size: 14px; font-weight: 700; letter-spacing: .08em; opacity: .7; }
.w12-slide.is-on .w12-num { opacity: .7; }
.w12-num i { font-style: normal; opacity: .6; }
.w12-v { display: block; margin-top: 10px; font-size: clamp(56px, 7vw, 104px); font-weight: 900; line-height: .9; letter-spacing: -.04em; }
.w12--paper .w12-v, .w12--sand .w12-v { color: var(--red); }
.w12-title { margin-top: 14px; font-size: clamp(24px, 2.3vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.w12-text { margin-top: 12px; max-width: 460px; font-size: 16px; line-height: 1.6; opacity: .85; }
.w12-slide.is-on .w12-text { opacity: .85; }
.w12-src { display: block; width: fit-content; max-width: 100%; margin-top: 14px; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; opacity: .8; }
.w12-slide.is-on .w12-src { opacity: .8; }
.w12-src + .w12-src { margin-top: 8px; }
.w12-fine { display: block; margin-top: 12px; max-width: 460px; font-size: 11.5px; line-height: 1.45; opacity: .55; }
.w12-slide.is-on .w12-fine { opacity: .55; }
.w12-viz { display: grid; place-items: center; min-width: 0; }
.w12-viz > svg { width: 100%; max-width: 480px; height: auto; overflow: visible; }

/* ---------- tabs: 01–09 with a progress line that fills while a slide plays ---------- */
.w12-tabs { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.w12-tab { position: relative; display: grid; gap: 8px; padding: 8px 0 0; border: 0; background: none; text-align: left; cursor: pointer; color: #9CA3AF; font: 700 13px/1 inherit; }
.w12-tab span { padding-left: 2px; transition: color .3s; }
.w12-tab i { display: block; height: 4px; border-radius: 2px; background: #E5E7EB; overflow: hidden; }
.w12-tab i::after { content: ''; display: block; height: 100%; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
.w12-tab.is-done i::after { transform: none; }
.w12-tab.is-on span { color: var(--red); }
.w12-tab.is-on i::after { animation: w12Fill var(--dur, 6.5s) linear forwards; }
.w12.is-paused .w12-tab.is-on i::after { animation-play-state: paused; }
@keyframes w12Fill { to { transform: none; } }
.w12-tab:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 4px; }

/* ---------- the pictures: drawings from v4, set looping only while their slide is on ---------- */
/* 1 · G7: the seven economies breathe on their orbit, Canada beats in the middle */
.bv-orbit { stroke: currentColor; stroke-width: 2; opacity: .4; }
.bv-planet circle { fill: rgba(251, 246, 238, .22); }
.bv-planet.is-ca circle { fill: var(--red); }
.bv-planet.is-ca use { color: #fff; }
.bv-code { fill: var(--cream); font: 700 15px inherit; text-anchor: middle; }
.bv-name { fill: rgba(251, 246, 238, .78); font: 600 12px inherit; text-anchor: middle; }
.bv-label { fill: var(--red); font: 800 16px inherit; letter-spacing: .2em; }
.is-on .bv-planet > * { animation: w12Bob 3.2s ease-in-out infinite; }
.is-on .bv-planet:nth-child(odd) > * { animation-delay: -1.6s; }
.is-on .bv-planet.is-ca circle { animation: w12Beat 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes w12Bob { 50% { translate: 0 -6px; } }
@keyframes w12Beat { 0%, 100% { scale: 1; } 15% { scale: 1.1; } 30% { scale: 1; } 45% { scale: 1.06; } }

/* 2 · immigration: people arrive — a wave of light runs over the crowd, our leaf at the end */
.w12-dot { fill: rgba(15, 25, 35, .14); }
.is-on .w12-dot { animation: w12Wave 3.4s ease-in-out infinite; animation-delay: calc(var(--k) * .09s); }
@keyframes w12Wave { 0%, 100% { fill: rgba(15, 25, 35, .14); } 30%, 55% { fill: var(--ink); } }
.w12-arrive circle { fill: var(--red); }
.w12-arrive use { color: #fff; }
.is-on .w12-arrive { animation: w12Beat 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* 3 · $35 an hour: the clock runs, the dollar bounces */
.bv-face { fill: rgba(255, 255, 255, .12); stroke: #fff; stroke-width: 6; }
.bv-tick { stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.bv-hand { stroke: #fff; stroke-width: 9; stroke-linecap: round; transform-box: view-box; transform-origin: 150px 150px; }
.bv-hand--m { stroke-width: 6; stroke: var(--amber); }
.bv-pin { fill: #fff; }
.bv-coin { fill: var(--amber); font: 900 54px inherit; transform-box: fill-box; transform-origin: center; }
.is-on .bv-hand--m { animation: w12Spin 4s linear infinite; }
.is-on .bv-hand--h { animation: w12Spin 48s linear infinite; }
.is-on .bv-coin { animation: w12Hop 1s ease-in-out infinite; }
@keyframes w12Spin { to { rotate: 360deg; } }
@keyframes w12Hop { 0%, 100% { translate: 0 0; } 45% { translate: 0 -12px; } }

/* 4 · path to citizenship: our leaf hops VISA → PR → the flag */
.cv-step { fill: rgba(255, 255, 255, .14); stroke: rgba(255, 255, 255, .5); stroke-width: 3; stroke-linejoin: round; }
.cv-steptxt { fill: rgba(255, 255, 255, .85); font: 800 20px inherit; letter-spacing: .12em; }
.cv-pole { stroke: var(--cream); stroke-width: 5; stroke-linecap: round; }
.cv-flag { fill: var(--red); }
.w12-hop { color: var(--red); translate: 105px 290px; }
.is-on .w12-hop { animation: w12Climb 4.2s cubic-bezier(.45, 0, .3, 1) infinite; }
@keyframes w12Climb {
    0%, 12% { translate: 105px 290px; } 22% { translate: 170px 200px; } 30%, 42% { translate: 235px 230px; }
    52% { translate: 300px 140px; } 60%, 72% { translate: 365px 170px; } 82% { translate: 410px 30px; scale: 1.15; } 92%, 100% { translate: 410px 30px; scale: 1; opacity: 0; } }
.w12-flag { transform-box: fill-box; transform-origin: 0 50%; }
.is-on .w12-flag { animation: w12Flag 1.6s ease-in-out infinite; }
@keyframes w12Flag { 50% { scale: 1 .88; } }

/* 5 · quality of life: the bars grow, Canada leads and its leaf bounces */
.bv-bar { fill: rgba(15, 25, 35, .14); transform-box: fill-box; transform-origin: bottom; scale: 1 .1; transition: scale .9s cubic-bezier(.2, .8, .2, 1); }
.bv-bar.is-ca { fill: var(--red); }
.is-on .bv-bar { scale: 1; }
.is-on .bv-bar:nth-child(2) { transition-delay: .08s; } .is-on .bv-bar:nth-child(3) { transition-delay: .16s; }
.is-on .bv-bar:nth-child(4) { transition-delay: .24s; } .is-on .bv-bar:nth-child(5) { transition-delay: .32s; }
.bv-leaf { color: var(--red); transform-box: fill-box; transform-origin: center; }
.is-on .bv-leaf { animation: w12Hop 1.4s ease-in-out .9s infinite; }

/* 6 · free medicine: the ring fills to 100%, the heart beats */
.bv-track { fill: none; stroke: rgba(251, 246, 238, .15); stroke-width: 22; }
.bv-fill { fill: none; stroke: var(--amber); stroke-width: 22; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s cubic-bezier(.3, 0, .2, 1); }
.is-on .bv-fill { stroke-dashoffset: 0; }
.bv-heart { fill: var(--red); transform-box: fill-box; transform-origin: center; }
.is-on .bv-heart { animation: w12Beat 1.2s ease-in-out infinite; }

/* 7 · workers' rights: the shield, four guarantees floating around it */
.rg-link { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: .02 .025; opacity: .35; }
.is-on .rg-link { animation: w12Flow 1.2s linear infinite; }
@keyframes w12Flow { to { stroke-dashoffset: -.045; } }
.rg-disc { fill: #fff; stroke: var(--ink); stroke-width: 4; }
.is-on .rg-badge { animation: w12Bob 3.6s ease-in-out infinite; animation-delay: calc(var(--k) * -.9s); }
.rg-sun { fill: #FFD34E; stroke: var(--ink); stroke-width: 3; }
.rg-ray { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.rg-wave { fill: none; stroke: #3B82C4; stroke-width: 4; stroke-linecap: round; }
.rg-card { fill: #fff; stroke: var(--red); stroke-width: 3.5; }
.rg-cross { fill: var(--red); }
.rg-hat { fill: #FFD34E; stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
.rg-ridge { stroke: var(--ink); stroke-width: 3; }
.rg-brim { fill: #F2A93B; stroke: var(--ink); stroke-width: 3; }
.rg-doc { fill: #fff; stroke: var(--ink); stroke-width: 3.5; }
.rg-docl { stroke: rgba(22, 15, 10, .4); stroke-width: 3; stroke-linecap: round; }
.rg-mini { fill: var(--red); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.rg-sh { fill: var(--red); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.rg-shin { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 3; stroke-linejoin: round; }
.rg-leaf { color: #fff; }
.rg-shine { fill: #fff; opacity: 0; }
.is-on .rg-shine { animation: w12Glint 3s ease-in-out infinite; }
@keyframes w12Glint { 0%, 60%, 100% { opacity: 0; } 75% { opacity: .5; } }
.rg-label { fill: var(--ink); font: 700 14px inherit; text-anchor: middle; }
.is-on .rg-shield { animation: w12Beat 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* 8 · safety: the shield draws itself and the tick is set */
.bv-shield { fill: rgba(22, 163, 74, .12); stroke: var(--go); stroke-width: 10; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s ease-out; }
.bv-check { fill: none; stroke: var(--red); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s ease-out 1s; }
.is-on .bv-shield, .is-on .bv-check { stroke-dashoffset: 0; }
.w12-viz--8 svg { transform-origin: center; }
.is-on.w12-slide .w12-viz--8 svg { animation: w12Breathe 3s ease-in-out 1.8s infinite; }
@keyframes w12Breathe { 50% { scale: 1.03; } }

/* 9 · multicultural: one in four tiles is someone who came from far away — they keep lighting up */
.cv-tile { fill: rgba(255, 255, 255, .22); }
.cv-tile.is-on { transform-box: fill-box; transform-origin: center; }
.is-on .cv-tile.is-on { animation: w12Tile 2.6s ease-in-out infinite; }
.is-on .cv-tile.is-on:nth-of-type(3n) { animation-delay: -.9s; } .is-on .cv-tile.is-on:nth-of-type(3n+1) { animation-delay: -1.7s; }
@keyframes w12Tile { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .78; opacity: .7; } }

/* ---------- phones: the picture above, the words below, the same height for every slide ---------- */
@media (max-width: 900px) {
    .w12-stage { border-radius: 20px; }
    .w12-slide { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; padding: 24px 20px 28px; min-height: 0; }
    .w12-viz { order: -1; height: 210px; }
    .w12-viz > svg { max-height: 210px; width: auto; max-width: 100%; }
    .w12-v { font-size: 52px; }
    .w12-title { font-size: 22px; }
    .w12-text { font-size: 15px; }
    .w12-tabs { gap: 5px; }
    .w12-tab { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .w12 *, .w12 *::after { animation: none !important; transition: none !important; }
}

/* ---------- phones: no sideways paging at all — the nine reasons stand one under another,
   each comes alive when it scrolls into view (so every visitor sees every reason) ---------- */
@media (max-width: 900px) {
    .w12-stage { display: grid; gap: 16px; border-radius: 0; overflow: visible; box-shadow: none; isolation: auto; }
    .w12-slide { grid-area: auto; opacity: 1; visibility: visible; transition: none; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px -32px rgba(17, 24, 39, .45); }
    .w12-tabs { display: none; }
    .w12-copy > * { transition-duration: .45s; }
}