/* flashvdo.com: the landing page's own layout and motion pieces. The kit (tokens, components) is site.css.
   One rule for every loop here: the base style is the finished frame. Keyframes move things towards it, so when
   motion is reduced (site.css cuts every animation short) what is left on screen is the end state, not a blank. */

@property --vx { syntax: "<percentage>"; inherits: true; initial-value: 60%; }
@property --b { syntax: "<number>"; inherits: true; initial-value: 1; }

/* loops wait until they are seen (landing.js marks them .is-live); without scripts they simply run */
.js .viz:not(.is-live) *, .js .strip:not(.is-live) *, .js .langs:not(.is-live) *, .js .hero-sky:not(.is-live) *, .js .mon:not(.is-live) .shot * { animation-play-state: paused !important; }

/* ------------------------------------------------ the bar on this page */
@media (max-width: 720px) { .bar-signin { display: none; } }

/* ------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(28px, 4.4vw, 60px) clamp(56px, 8vw, 104px); }
.hero-sky { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(1100px 620px at 50% -10%, #34297E 0%, rgba(27, 20, 82, .62) 38%, rgba(10, 7, 34, 0) 70%),
  radial-gradient(640px 460px at 102% 64%, rgba(52, 41, 126, .38), rgba(10, 7, 34, 0) 70%); }
.streak { position: absolute; top: -20%; bottom: -20%; width: 14vw; min-width: 110px; background: linear-gradient(90deg, rgba(255, 210, 63, 0), rgba(255, 210, 63, .1), rgba(255, 243, 184, .04), rgba(255, 210, 63, 0)); transform: skewX(-10deg); will-change: transform; }
.streak.s1 { left: 66%; animation: streak 16s var(--ease-glide) infinite alternate; }
.streak.s2 { left: 10%; width: 7vw; opacity: .6; animation: streak 23s var(--ease-glide) infinite alternate-reverse; }
@keyframes streak { from { transform: skewX(-10deg) translateX(-16vw); } to { transform: skewX(-10deg) translateX(14vw); } }
.hero-in { position: relative; display: grid; justify-items: center; text-align: center; gap: clamp(14px, 1.6vw, 20px); }
.hero-h1 { display: grid; justify-items: center; gap: 16px; }
.hero-slug { justify-self: center; }
.hero-kicker { font: 500 var(--s-14)/1.4 var(--f-mono); font-stretch: 87.5%; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.hero-line { display: block; }
.hl { display: inline-block; animation: fv-slideskew var(--f30) var(--ease-flash) both; }
.hl-2 { animation-delay: var(--f12); }
.hero-line em { position: relative; display: inline-block; }
/* the cut through "cut": a slash on the bolt's lean, struck 30 frames in */
.hero-line em::after { content: ""; position: absolute; left: 61%; top: -6%; bottom: -6%; width: .075em; background: var(--night); transform: skewX(-22deg) scaleY(1); transform-origin: top; animation: hero-slash var(--f12) var(--ease-strike) var(--f48) both; }
@keyframes hero-slash { from { transform: skewX(-22deg) scaleY(0); } }
.hero-slug, .hero-lede, .hero-cta, .hero-note { animation: fv-rise var(--f30) var(--ease-flash) both; }
.hero-lede { animation-delay: var(--f18); max-width: 58ch; }
.hero-cta { animation-delay: var(--f30); }
.hero-note { animation-delay: var(--f30); color: var(--fg-3); }

/* the stage: the editor at work. Graphite inside, as in the app: Storm frames the brand, Graphite the footage */
.hero-stage { width: 100%; max-width: 1120px; margin-top: clamp(16px, 3.4vw, 40px); text-align: left; background: #16161C; color: #CACAD4; font-size: 12px; border-radius: var(--r-l); box-shadow: 0 0 0 1px rgba(255, 210, 63, .3), 0 30px 120px -30px rgba(255, 210, 63, .28), var(--shadow); animation: fv-rise var(--f48) var(--ease-flash) var(--f30) both; }
.ed-bar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; background: #1C1C23; border-bottom: 1px solid #2E2E38; white-space: nowrap; overflow: hidden; }
.ed-bar i { width: 11px; height: 11px; border-radius: 50%; flex: none; background: #FF5F57; }
.ed-bar i:nth-child(2) { background: #FEBC2E; } .ed-bar i:nth-child(3) { background: #28C840; }
.ed-bar b { margin-left: 10px; font-weight: 600; color: #E6E6EC; }
.ed-proj { color: #7E7E8E; overflow: hidden; text-overflow: ellipsis; }
.ed-tc { margin-left: auto; color: #A6A6B4; font-size: 11px; }
.ed-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.ed-left { min-width: 0; border-right: 1px solid #2E2E38; }
.mon-wrap { display: grid; place-items: center; padding: clamp(10px, 2vw, 18px); background: #0E0E12; }
.mon { position: relative; width: min(100%, 580px); aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #120D38; container-type: inline-size; }
.shot { position: absolute; inset: 0; visibility: hidden; }
.shot > i { position: absolute; display: block; }
.mon[data-shot="a"] .shot-a, .mon[data-shot="b"] .shot-b, .mon[data-shot="c"] .shot-c { visibility: visible; }
.shot-a { background: linear-gradient(180deg, #3A2E8F 0%, #FF8A5C 58%, #FFC76B 71%, #2A1F55 71.5%, #120D38 100%); }
.shot-a .sun { left: 62%; top: 42%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: #FFE6A3; box-shadow: 0 0 40px #FFD23F; animation: sun-up 9s linear infinite alternate; }
@keyframes sun-up { from { transform: translateY(40%); } to { transform: translateY(-30%); } }
.shot-a .r1 { left: 0; right: 0; bottom: 28%; height: 38%; background: #1B1452; clip-path: polygon(0 100%, 0 55%, 12% 25%, 22% 50%, 38% 0, 54% 45%, 66% 20%, 80% 55%, 92% 30%, 100% 50%, 100% 100%); }
.shot-a .r2 { left: 0; right: 0; bottom: 0; height: 34%; background: #0D0A26; clip-path: polygon(0 100%, 0 40%, 20% 10%, 45% 50%, 70% 15%, 100% 45%, 100% 100%); }
.shot-b { background: linear-gradient(180deg, #2E6BD9 0%, #6E9BFF 45%, #BFE9FF 100%); }
.shot-b .p1 { left: 8%; right: 28%; bottom: 0; height: 80%; background: linear-gradient(160deg, #F4F4F8 0 34%, #B6B0E0 34% 60%, #4A3F9A 60%); clip-path: polygon(0 100%, 42% 0, 58% 22%, 70% 12%, 100% 100%); }
.shot-b .p2 { left: 52%; right: -6%; bottom: 0; height: 56%; background: linear-gradient(200deg, #EEEDF8 0 30%, #8F86CC 30% 62%, #34297E 62%); clip-path: polygon(0 100%, 48% 0, 64% 26%, 100% 100%); }
.shot-b .cloud { left: 60%; top: 14%; width: 24%; height: 9%; border-radius: 99px; background: rgba(255, 255, 255, .88); box-shadow: -3.6em 1.2em 0 -.3em rgba(255, 255, 255, .6); animation: drift 10s linear infinite alternate; }
@keyframes drift { from { transform: translateX(-24%); } to { transform: translateX(18%); } }
.shot-c { background: linear-gradient(180deg, #1B1452 0%, #6A5FB5 46%, #FF7AB6 76%, #FFB347 100%); }
.shot-c .r3 { left: 0; right: 0; bottom: 0; height: 46%; background: #0A0722; clip-path: polygon(0 100%, 0 30%, 16% 55%, 34% 8%, 50% 48%, 68% 22%, 84% 60%, 100% 34%, 100% 100%); }
.shot-c .flags { left: 6%; right: 34%; top: 22%; height: 2px; background: rgba(244, 244, 248, .7); transform: rotate(8deg); transform-origin: left; }
.shot-c .flags b { position: absolute; top: 2px; width: 10%; aspect-ratio: 1 / 1.15; background: var(--fc, #6E9BFF); transform-origin: top; animation: flag 1.3s ease-in-out infinite alternate; }
.shot-c .flags b:nth-child(1) { left: 3%; } .shot-c .flags b:nth-child(2) { left: 17%; --fc: #F4F4F8; animation-delay: -.3s; } .shot-c .flags b:nth-child(3) { left: 31%; --fc: #FF4F3D; animation-delay: -.6s; }
.shot-c .flags b:nth-child(4) { left: 45%; --fc: #3DDC97; animation-delay: -.2s; } .shot-c .flags b:nth-child(5) { left: 59%; --fc: #FFD23F; animation-delay: -.8s; } .shot-c .flags b:nth-child(6) { left: 73%; animation-delay: -.5s; } .shot-c .flags b:nth-child(7) { left: 87%; --fc: #F4F4F8; animation-delay: -.1s; }
@keyframes flag { from { transform: skewX(-14deg) scaleY(1); } to { transform: skewX(8deg) scaleY(.92); } }
.shot-c .tent { right: 13%; bottom: 10%; width: 17%; aspect-ratio: 1.6; background: #FFD23F; clip-path: polygon(50% 0, 100% 100%, 62% 100%, 50% 45%, 38% 100%, 0 100%); }

.mon-title { position: absolute; left: 0; right: 0; top: 20%; text-align: center; color: #fff; font-size: clamp(18px, 4.4vw, 46px); font-size: 9.4cqw; text-shadow: 0 2px 30px rgba(10, 7, 34, .6); white-space: nowrap; }
.mon-title span { display: inline-block; }
.mon[data-title="0"] .mon-title, .mon[data-title="0"] .mon-l3 { visibility: hidden; }
.mon[data-title="1"] .mon-title span { animation: title-in var(--f30) var(--ease-snap) both; animation-delay: calc(var(--n, 0) * 50ms); }
.mon-title span:nth-child(2) { --n: 1; } .mon-title span:nth-child(3) { --n: 2; } .mon-title span:nth-child(4) { --n: 3; } .mon-title span:nth-child(5) { --n: 4; } .mon-title span:nth-child(6) { --n: 5; } .mon-title span:nth-child(7) { --n: 6; } .mon-title span:nth-child(8) { --n: 7; } .mon-title span:nth-child(9) { --n: 8; }
@keyframes title-in { from { opacity: 0; transform: translateY(70%) skewX(-10deg); } }
.mon-l3 { position: absolute; left: 6%; bottom: 25%; display: flex; align-items: stretch; font: 600 clamp(9px, 1.5vw, 15px)/1.2 var(--f-text); font-size: 2.6cqw; transform: skewX(-10deg); white-space: nowrap; }
.mon-l3 b { padding: .45em .8em; background: var(--flash); color: var(--storm); font-weight: 700; }
.mon-l3 span { padding: .45em .8em; background: rgba(10, 7, 34, .82); color: #fff; }
.mon[data-title="1"] .mon-l3 { animation: l3-in var(--f30) var(--ease-strike) both; animation-delay: var(--f30); }
@keyframes l3-in { from { clip-path: polygon(0 0, 0 0, 0 45%, 0 45%, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 130% 0, 110% 45%, 125% 45%, 105% 100%, 0 100%); } }
.mon-cap { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); padding: .3em .8em; border-radius: 4px; background: rgba(10, 7, 34, .78); color: #fff; font: 700 clamp(10px, 1.7vw, 17px)/1.35 var(--f-deva); font-size: 3cqw; white-space: nowrap; }
.mon-cap:not(:lang(ne)):not(:lang(hi)) { font-family: var(--f-text); font-weight: 600; }
.mon[data-cap="0"] .mon-cap { visibility: hidden; }
.mon-cap.pop { animation: cap-pop var(--f12) var(--ease-flash); }
@keyframes cap-pop { from { opacity: 0; transform: translateX(-50%) translateY(6px); } }
.mon-rec { position: absolute; left: 8px; top: 8px; padding: 2px 6px; border-radius: 3px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 10px; }
.mon-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.mon-flash.is-on { animation: fv-flashframe var(--f12) steps(1) both; }

.tlc { background: #16161C repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 24px, transparent 24px 30px); border-top: 1px solid #2E2E38; }
.tlc canvas { width: 100%; height: auto; aspect-ratio: 720 / 176; }

.chat { position: relative; min-height: 236px; background: #1C1C23; display: flex; flex-direction: column; min-width: 0; }
.chat-h { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-bottom: 1px solid #2E2E38; color: #E6E6EC; flex: none; }
.chat-h .ico { width: 18px; height: 18px; }
.chat-h .chip { margin-left: auto; background: transparent; font-size: 11px; }
.chat .chat-log { position: absolute; left: 0; right: 0; top: 44px; bottom: 70px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px; margin: 0; overflow: hidden; list-style: none; }
.chat-log li { flex: none; line-height: 1.45; }
.chat-log li.is-off { display: none; }
.chat-log li.is-new { animation: bub-in var(--f18) var(--ease-flash); }
@keyframes bub-in { from { opacity: 0; transform: translateY(8px); } }
.chat-log .me { align-self: flex-end; max-width: 90%; padding: 8px 11px; border-radius: 12px 12px 3px 12px; background: #34297E; color: #fff; font-size: 12.5px; }
.chat-log .ai { align-self: flex-start; padding: 8px 11px; border-radius: 12px 12px 12px 3px; background: #2E2E38; color: #E6E6EC; font-size: 12.5px; }
.chat-log .ai b { color: var(--flash); margin-right: 4px; }
.chat-log .tool { display: flex; align-items: baseline; gap: 6px; padding-left: 2px; color: #A6A6B4; font-size: 11.5px; }
.chat-log .tool::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); align-self: center; animation: fv-pulse 1s var(--ease-glide) infinite; }
.chat-log .tool.done::before { animation: none; width: 12px; height: 7px; border-radius: 0; background: none; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: translateY(-2px) rotate(-45deg); }
.chat-log .tool b { color: #E6E6EC; font-weight: 600; }
.chat-log .tool.done .doing, .chat-log .tool:not(.done) .did { display: none; }
.chat-log .tool .doing::after { content: "…"; }
.chat-in { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 52px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; background: #16161C; border: 1px solid #3C3C48; color: #7E7E8E; line-height: 1.45; overflow: hidden; }
.chat-in.is-typing { border-color: var(--flash); color: #E6E6EC; }
.chat-in > span { min-width: 0; }
.chat-in kbd { background: transparent; border-color: #3C3C48; color: #7E7E8E; font-size: 10px; flex: none; }
@media (max-width: 860px) { .ed-main { grid-template-columns: 1fr; } .ed-left { border-right: 0; } .chat { border-top: 1px solid #2E2E38; min-height: 262px; } }
@media (max-width: 560px) { .tlc canvas { aspect-ratio: 720 / 290; } .ed-proj, .mon-rec { display: none; } }

/* the loop's four turns, as clips: each fills as its turn plays, and a press jumps to it */
.turns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 1120px; margin-top: -6px; animation: fv-rise var(--f48) var(--ease-flash) var(--f30) both; }
.turns button { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 6px; background: var(--panel-2); color: var(--fg-2); font: 500 var(--s-14)/1.2 var(--f-text); text-align: left; overflow: hidden; transition: background var(--f12), color var(--f12); }
.turns button::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.turns button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c); transform: scaleX(var(--k, 0)); transform-origin: left; }
.turns button b { font-size: 11px; font-weight: 500; color: var(--fg-3); }
.turns button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.turns button:hover, .turns button[aria-pressed="true"] { background: var(--panel-3); color: var(--fg); }
.turns button[aria-pressed="true"] b { color: var(--c); }
@media (max-width: 640px) { .turns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------ the strip */
.strip { overflow: hidden; padding: 16px 0; border-block: 1px solid var(--line); background: var(--night-2); }
.strip-run { display: flex; width: max-content; animation: strip 60s linear infinite; will-change: transform; }
.strip-run span { display: inline-flex; align-items: center; gap: 26px; padding-right: 26px; font: italic 900 var(--s-16)/1 var(--f-display); font-stretch: 125%; letter-spacing: -.01em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; }
.strip-run span::after { content: ""; width: 9px; height: 16px; background: var(--flash); clip-path: polygon(62% 0, 0 56%, 44% 56%, 30% 100%, 100% 40%, 56% 40%); }
@keyframes strip { to { transform: translateX(-50%); } }

/* ------------------------------------------------ what it does: six small loops */
.craft { margin-bottom: 22px; }
.cap { display: grid; gap: 8px; align-content: start; }
.cap .h3 { margin-top: 4px; }
.viz { position: relative; aspect-ratio: 16 / 10; margin-bottom: 10px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--night-2); overflow: hidden; container-type: inline-size; }
.viz i { display: block; font-style: normal; }
.also { margin-top: 6px; gap: 8px; }
.also .chip { padding: 5px 12px; background: transparent; }

/* 1 cuts to the words */
.viz-cut { display: grid; align-content: center; gap: 16px; padding: 0 7%; }
.vc-line { font: 500 clamp(13px, 4.6cqw, 17px)/1.55 var(--f-text); color: var(--fg); }
.vc-line .um { position: relative; display: inline-block; vertical-align: bottom; max-width: 4em; overflow: hidden; white-space: nowrap; color: #FF8A7D; animation: vc-um 7s var(--ease-glide) infinite; }
.vc-line .um::after { content: ""; position: absolute; left: 0; right: 0; top: 54%; height: 2px; background: var(--cut); transform-origin: left; animation: vc-strike 7s var(--ease-strike) infinite; }
@keyframes vc-um { 0%, 18% { color: var(--fg); max-width: 4em; opacity: 1; } 24%, 38% { color: #FF8A7D; max-width: 4em; opacity: 1; } 47%, 100% { color: #FF8A7D; max-width: 0; opacity: 0; } }
@keyframes vc-strike { 0%, 18% { transform: scaleX(0); } 26%, 100% { transform: scaleX(1); } }
.vc-clip { display: flex; gap: 2px; height: 26px; }
.vc-clip i { flex: 3 1 0; min-width: 0; border-radius: 3px; background: var(--t-video) repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 16px); }
.vc-clip .gap { flex: 1 1 0; background: repeating-linear-gradient(-55deg, rgba(255, 79, 61, .95) 0 4px, rgba(255, 79, 61, .4) 4px 8px); animation: vc-gap 7s var(--ease-glide) infinite; }
@keyframes vc-gap { 0%, 18% { flex-grow: 1; opacity: .18; } 24%, 38% { flex-grow: 1; opacity: 1; } 47%, 100% { flex-grow: 0; opacity: 0; } }
.vc-bolt { position: absolute; left: 50%; top: 0; height: 100%; transform: translateX(-50%); fill: none; stroke: var(--flash-light); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 70; stroke-dashoffset: 70; opacity: 0; filter: drop-shadow(0 0 4px rgba(255, 210, 63, .9)); animation: vc-bolt 7s linear infinite; }
@keyframes vc-bolt { 0%, 35.9% { opacity: 0; stroke-dashoffset: 70; } 36% { opacity: 1; stroke-dashoffset: 70; } 38.5% { opacity: 1; stroke-dashoffset: 0; } 41% { opacity: 1; stroke-dashoffset: 0; } 43%, 100% { opacity: 0; stroke-dashoffset: 0; } }
.vc-tc { position: absolute; right: 10px; bottom: 8px; display: flex; gap: 8px; font-size: 11px; }
.vc-tc b { font-weight: 400; color: var(--fg-3); text-decoration: line-through; animation: vc-old 7s steps(1) infinite; }
.vc-tc i { color: var(--flash); animation: vc-new 7s steps(1) infinite; }
@keyframes vc-old { 0% { color: var(--fg); text-decoration: none; } 47%, 100% { color: var(--fg-3); text-decoration: line-through; } }
@keyframes vc-new { 0% { opacity: 0; } 47%, 100% { opacity: 1; } }

/* 2 captions in three scripts */
.vp-frame { position: absolute; inset: 0; background: linear-gradient(180deg, #34297E 0%, #FF8A5C 72%, #FFC76B 100%); }
.vp-sun { position: absolute; left: 18%; top: 26%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: #FFE6A3; box-shadow: 0 0 30px #FFD23F; }
.vp-hill { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; background: #120D38; clip-path: polygon(0 100%, 0 50%, 18% 20%, 36% 55%, 58% 5%, 78% 48%, 100% 22%, 100% 100%); }
.vp-lang { position: absolute; left: 10px; top: 10px; display: grid; }
.vp-lang b { grid-area: 1 / 1; justify-self: start; padding: 2px 10px; border-radius: 99px; background: rgba(10, 7, 34, .72); font: 600 12px/1.5 var(--f-text); opacity: 0; animation: vp-cycle 9s steps(1) infinite; }
.vp-lang b:lang(ne), .vp-lang b:lang(hi) { font-family: var(--f-deva); }
.vp-cap { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); padding: 5px 12px; border-radius: 6px; background: rgba(10, 7, 34, .8); font: 700 clamp(12px, 4.6cqw, 17px)/1.4 var(--f-deva); white-space: nowrap; opacity: 0; animation: vp-cycle 9s steps(1) infinite; }
.vp-cap.c3 { font-family: var(--f-text); font-weight: 600; }
.vp-cap.c1, .vp-lang b:nth-child(1) { opacity: 1; }
.vp-cap.c2, .vp-lang b:nth-child(2) { --d: 3s; animation-delay: 3s; }
.vp-cap.c3, .vp-lang b:nth-child(3) { --d: 6s; animation-delay: 6s; }
@keyframes vp-cycle { 0% { opacity: 1; } 33.33%, 100% { opacity: 0; } }
.vp-cap span { animation: vp-word 9s steps(1) infinite; animation-delay: calc(var(--d, 0s) + var(--w) * .68s); }
@keyframes vp-word { 0% { color: var(--flash); } 7.5%, 100% { color: inherit; } }

/* 3 motion graphics in the house's motion language */
.viz-mg { background: radial-gradient(120% 100% at 80% 0%, #34297E, #120D38 70%); }
.mg-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 12.5% 20%; opacity: .6; }
.mg-title { position: absolute; left: 7%; top: 14%; font-size: clamp(22px, 13cqw, 52px); color: #fff; white-space: nowrap; z-index: 1; }
.mg-title span { display: inline-block; animation: mg-letter 6s var(--ease-snap) infinite; animation-delay: calc(var(--n, 0) * 60ms); }
.mg-title span:nth-child(2) { --n: 1; } .mg-title span:nth-child(3) { --n: 2; } .mg-title span:nth-child(5) { --n: 4; color: var(--flash); } .mg-title span:nth-child(6) { --n: 5; color: var(--flash); }
@keyframes mg-letter { 0% { opacity: 0; transform: translateY(80%) skewX(-10deg); } 9%, 100% { opacity: 1; transform: none; } }
.mg-l3 { position: absolute; left: 7%; bottom: 14%; z-index: 1; display: grid; justify-items: start; transform: skewX(-10deg); }
.mg-l3 b { padding: 4px 12px; background: var(--flash); color: var(--storm); font: 700 clamp(11px, 4.2cqw, 15px)/1.3 var(--f-text); white-space: nowrap; animation: mg-wipe 6s var(--ease-strike) infinite; }
.mg-l3 span { padding: 3px 12px; background: rgba(10, 7, 34, .85); color: #fff; font-size: clamp(10px, 3.4cqw, 12px); white-space: nowrap; animation: mg-slide 6s var(--ease-flash) infinite; }
.mg-slab { position: absolute; left: -10px; top: 0; bottom: 0; width: 4px; background: var(--cut); animation: mg-drop 6s var(--ease-snap) infinite; transform-origin: top; }
@keyframes mg-wipe { 0%, 22% { clip-path: polygon(0 0, 0 0, 0 45%, 0 45%, 0 100%, 0 100%); } 31%, 100% { clip-path: polygon(0 0, 130% 0, 110% 45%, 125% 45%, 105% 100%, 0 100%); } }
@keyframes mg-slide { 0%, 30% { opacity: 0; transform: translateX(-24px); } 38%, 100% { opacity: 1; transform: none; } }
@keyframes mg-drop { 0%, 18% { transform: scaleY(0); } 24%, 100% { transform: scaleY(1); } }
.mg-stat { position: absolute; right: 7%; bottom: 14%; z-index: 1; display: grid; justify-items: end; gap: 2px; animation: mg-snap 6s var(--ease-snap) infinite; }
.mg-stat b { font-size: clamp(15px, 7cqw, 26px); font-weight: 500; color: var(--flash); line-height: 1; }
.mg-stat span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
@keyframes mg-snap { 0%, 44% { opacity: 0; transform: scale(.5) rotate(-6deg); } 52%, 100% { opacity: 1; transform: none; } }

/* 4 a rigged character that walks */
.viz-rig { background: linear-gradient(180deg, #151046, #0A0722); }
.rig { position: absolute; inset: 0; width: 100%; height: 100%; }
.rig .skin { fill: none; stroke: #B6B0E0; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.rig .head { fill: #B6B0E0; stroke: none; }
.rig .back .skin { stroke: #6A5FB5; }
.rig .bone { fill: none; stroke: var(--flash); stroke-width: 1.3; stroke-linecap: round; }
.rig .joint { fill: var(--night); stroke: var(--flash); stroke-width: 1.3; }
.rig .joint.hot { fill: var(--flash); }
.rig .up, .rig .low, .rig-body { transform-box: view-box; }
.rig .leg .up { transform-origin: 120px 88px; } .rig .leg .low { transform-origin: 120px 110px; }
.rig .arm .up { transform-origin: 120px 56px; } .rig .arm .low { transform-origin: 120px 80px; }
/* the still pose: mid-stride */
.rig .leg.front .up { transform: rotate(-26deg); } .rig .leg.front .low { transform: rotate(4deg); }
.rig .leg.back .up { transform: rotate(24deg); } .rig .leg.back .low { transform: rotate(22deg); }
.rig .arm.front .up { transform: rotate(24deg); } .rig .arm.front .low { transform: rotate(-16deg); }
.rig .arm.back .up { transform: rotate(-24deg); } .rig .arm.back .low { transform: rotate(-30deg); }
.rig .leg .up { animation: leg-up 1.1s ease-in-out infinite; } .rig .leg .low { animation: leg-low 1.1s ease-in-out infinite; }
.rig .arm .up { animation: arm-up 1.1s ease-in-out infinite; } .rig .arm .low { animation: arm-low 1.1s ease-in-out infinite; }
.rig .back .up, .rig .back .low { animation-delay: -.55s; }
.rig-body { animation: rig-bob .55s ease-in-out infinite; }
@keyframes leg-up { 0%, 100% { transform: rotate(-26deg); } 25% { transform: rotate(-2deg); } 50% { transform: rotate(24deg); } 75% { transform: rotate(2deg); } }
@keyframes leg-low { 0%, 100% { transform: rotate(4deg); } 25% { transform: rotate(8deg); } 50% { transform: rotate(22deg); } 75% { transform: rotate(64deg); } }
@keyframes arm-up { 0%, 100% { transform: rotate(24deg); } 50% { transform: rotate(-24deg); } }
@keyframes arm-low { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(-30deg); } }
@keyframes rig-bob { 0%, 100% { transform: translateY(1.6px); } 50% { transform: translateY(-1.6px); } }
.rig-ground path { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.rig-ground .dash { stroke: var(--fg-3); stroke-dasharray: 14 22; animation: rig-ground 1.1s linear infinite; }
@keyframes rig-ground { to { stroke-dashoffset: 72; } }
.rig-keys path { fill: none; stroke: var(--fg-3); stroke-width: 1; }
.rig-keys .k { fill: var(--flash); stroke: none; }
.rig-keys .ph { stroke: var(--fg); stroke-width: 1.5; animation: rig-ph 1.1s linear infinite; }
@keyframes rig-ph { to { transform: translateX(66px); } }
.rig-tag { position: absolute; right: 10px; top: 10px; font-size: 10px; color: var(--fg-3); }

/* 5 effects: a before and after wipe on the lean, with a tracked point */
.viz-vfx { --vx: 60%; --sx: 0cqw; animation: vx-wipe 6s var(--ease-glide) infinite alternate; }
@keyframes vx-wipe { from { --vx: 34%; } to { --vx: 88%; } }
.vx { position: absolute; inset: 0; }
.vx-before { background: #3C3C48; }
.vx-bg { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 16%, #5A5A68 16% 18%, transparent 18% 44%, #5A5A68 44% 46%, transparent 46% 76%, #5A5A68 76% 78%, transparent 78%), linear-gradient(180deg, #A6A6B4 0 8%, #7E7E8E 8% 44%, #5A5A68 44% 46%, #3C3C48 46%); }
.vx-after { background: radial-gradient(110% 90% at 76% 0%, #4A3F9A, #120D38 72%); clip-path: polygon(var(--vx) 0, 100% 0, 100% 100%, calc(var(--vx) - 11%) 100%); }
.vx-rays { position: absolute; inset: 0; background: repeating-conic-gradient(from 196deg at 80% -12%, rgba(255, 210, 63, .2) 0 4deg, transparent 4deg 11deg); }
.vx-who { position: absolute; left: 50%; bottom: 0; width: 34%; aspect-ratio: 1 / 1.25; margin-left: -17%; background: radial-gradient(circle at 50% 26%, #FFC9A3 0 21%, transparent 21.6%), radial-gradient(ellipse at 50% 104%, #FF6A4D 0 60%, transparent 60.6%); animation: vx-sway 4.2s ease-in-out infinite alternate; }
@keyframes vx-sway { from { translate: -4cqw 0; } to { translate: 4cqw 0; } }
.vx-dust { position: absolute; bottom: 8%; width: 5px; height: 5px; border-radius: 50%; background: var(--flash-light); box-shadow: 0 0 10px 2px rgba(255, 210, 63, .8); animation: vx-dust 3.6s linear infinite; }
.vx-dust.d1 { left: 70%; } .vx-dust.d2 { left: 82%; animation-delay: -1.2s; } .vx-dust.d3 { left: 91%; animation-delay: -2.3s; }
@keyframes vx-dust { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-120px) translateX(-14px); opacity: 0; } }
.vx-line { position: absolute; top: -5%; bottom: -5%; left: calc(var(--vx) - 5.5%); width: 2px; background: var(--fg); transform: skewX(-10deg); box-shadow: 0 0 10px rgba(255, 243, 184, .9); }
.vx-track { position: absolute; left: 50%; top: 49%; width: 15%; aspect-ratio: 1; margin: -7.5% 0 0 -7.5%; border: 1.5px solid var(--flash); animation: vx-sway 4.2s ease-in-out infinite alternate; }
.vx-track i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--flash); }
.vx-track b { position: absolute; left: 112%; top: -30%; padding: 1px 6px; background: var(--flash); color: var(--storm); font-size: 9px; font-weight: 500; white-space: nowrap; }
.vx-tag { position: absolute; bottom: 8px; padding: 2px 8px; border-radius: 99px; background: rgba(10, 7, 34, .7); font-size: 10px; color: #fff; }
.vx-t1 { left: 8px; } .vx-t2 { right: 8px; }

/* 6 sound: one take, the bed ducked under it, on the beat */
.viz-snd { display: grid; align-content: center; gap: 12px; padding: 0 6%; }
.sn-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: center; }
.sn-row > b { font-size: 10px; font-weight: 500; color: var(--fg-3); }
.sn-wave { display: flex; align-items: center; gap: 2px; height: 46px; padding: 0 6px; border-radius: 4px; border: 1px solid rgba(61, 220, 151, .4); background: rgba(61, 220, 151, .1); animation: sn-take 6s linear infinite; }
@keyframes sn-take { 0% { clip-path: inset(0 100% 0 0); } 55%, 100% { clip-path: inset(0 0 0 0); } }
.sn-wave i { flex: 1; height: calc(var(--h, 46) * 1%); border-radius: 1px; background: var(--t-audio); animation: sn-breathe 1.3s ease-in-out infinite alternate; }
.sn-wave i:nth-child(3n+1), .lv-wave i:nth-child(3n+1) { --h: 72; } .sn-wave i:nth-child(4n+2), .lv-wave i:nth-child(4n+2) { --h: 30; animation-delay: -.4s; } .sn-wave i:nth-child(5n), .lv-wave i:nth-child(5n) { --h: 92; animation-delay: -.8s; } .sn-wave i:nth-child(7n+3), .lv-wave i:nth-child(7n+3) { --h: 16; animation-delay: -1.1s; }
@keyframes sn-breathe { from { transform: scaleY(.6); } to { transform: scaleY(1); } }
.sn-bed { position: relative; height: 30px; border-radius: 4px; background: rgba(140, 123, 255, .22); border: 1px solid rgba(140, 123, 255, .5); overflow: hidden; }
.sn-bed svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sn-bed path { fill: none; stroke: var(--flash); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sn-bed .beats { position: absolute; inset: auto 0 0 0; height: 6px; display: flex; justify-content: space-around; }
.sn-bed .beats i { width: 2px; background: var(--a-motion); animation: sn-beat .8s steps(1) infinite; }
.sn-bed .beats i:nth-child(4n+1) { background: #fff; animation-name: sn-down; }
@keyframes sn-beat { 0% { transform: scaleY(2.2); } 25%, 100% { transform: none; } }
@keyframes sn-down { 0% { transform: scaleY(3.4); } 25%, 100% { transform: none; } }
.sn-take { position: absolute; right: 6%; top: 9%; padding: 2px 8px; border-radius: 99px; background: var(--flash); color: var(--storm); font-size: 10px; font-weight: 500; animation: sn-tag 6s var(--ease-snap) infinite; }
@keyframes sn-tag { 0%, 55% { opacity: 0; transform: scale(.4); } 61%, 100% { opacity: 1; transform: none; } }
.sn-ph { position: absolute; top: 12%; bottom: 12%; left: 93%; width: 2px; background: var(--fg); transform: skewX(-10deg); box-shadow: 0 0 8px rgba(255, 243, 184, .9); animation: sn-ph 6s linear infinite; }
@keyframes sn-ph { 0% { left: calc(6% + 30px); } 55%, 100% { left: 93%; } }

/* ------------------------------------------------ how it works */
.how { padding-bottom: clamp(72px, 10vw, 136px); }
.how .sec-h { margin-bottom: clamp(20px, 3vw, 36px); }
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 64px); }
/* laid out flat (no scripts, phones, reduced motion): each beat beside or above its finished scene */
.beats, .how-stage { display: contents; }
.beat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-content: start; }
.beat-n { grid-row: span 2; align-self: start; padding: 3px 8px; border-radius: 6px; background: var(--flash); color: var(--storm); font-size: var(--s-12); font-weight: 500; transform: skewX(-10deg); }
.beat p { grid-column: 2; color: var(--fg-2); max-width: 46ch; }
.beat:nth-child(1) { order: 1; } .sc-1 { order: 2; } .beat:nth-child(2) { order: 3; } .sc-2 { order: 4; } .beat:nth-child(3) { order: 5; } .sc-3 { order: 6; }
.scene { position: relative; display: grid; align-content: center; gap: 14px; min-height: 250px; margin-bottom: 20px; padding: clamp(16px, 3vw, 28px); border-radius: var(--r-l); border: 1px solid var(--line); background: var(--night-2); }
.how-rail, .how:not(.is-scrub) .relay-pass { display: none; }
@media (min-width: 900px) {
  .how-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
  .beat:nth-child(1) { grid-area: 1 / 1; } .beat:nth-child(2) { grid-area: 2 / 1; } .beat:nth-child(3) { grid-area: 3 / 1; }
  .sc-1 { grid-area: 1 / 2; } .sc-2 { grid-area: 2 / 2; } .sc-3 { grid-area: 3 / 2; }
}
/* scrubbed by the scroll (landing.js adds .is-scrub on a wide screen with motion allowed) */
.how.is-scrub { padding-bottom: 0; }
.how.is-scrub .how-scroll { height: 330vh; }
.how.is-scrub .how-sticky { position: sticky; top: var(--bar-h); height: calc(100vh - var(--bar-h)); display: grid; align-items: center; }
.how.is-scrub .beats { display: grid; gap: clamp(20px, 4vh, 40px); grid-area: auto; }
.how.is-scrub .beat { grid-area: auto; opacity: .5; transition: opacity var(--f12); }
.how.is-scrub .beat.is-on { opacity: 1; }
.how.is-scrub .how-stage { display: block; position: relative; height: min(64vh, 520px); background: var(--night-2); }
.how.is-scrub .scene { position: absolute; inset: 0 0 46px 0; margin: 0; border: 0; border-radius: 0; background: none; visibility: hidden; grid-area: auto; }
.how.is-scrub .how-stage[data-beat="0"] .sc-1, .how.is-scrub .how-stage[data-beat="1"] .sc-2, .how.is-scrub .how-stage[data-beat="2"] .sc-3 { visibility: visible; }
.how.is-scrub .sc-chip, .how.is-scrub .sc-send, .how.is-scrub .relay-tl i, .how.is-scrub .undo li, .how.is-scrub .sc-export { opacity: 0; transform: translateX(26px) skewX(-10deg); transition: opacity var(--f8), transform var(--f18) var(--ease-flash); }
.how.is-scrub .sc-send, .how.is-scrub .sc-export { transform: scale(.4); transition-timing-function: linear, var(--ease-snap); }
.how.is-scrub .relay-tl i { transform: scaleX(0); }
.how.is-scrub .on.sc-chip, .how.is-scrub .on.sc-send, .how.is-scrub .relay-tl i.on, .how.is-scrub .undo li.on, .how.is-scrub .on.sc-export { opacity: 1; transform: none; }
.how.is-scrub .how-rail { display: flex; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; gap: 3px; padding: 12px 16px; background: var(--night); border-top: 1px solid var(--line); }
.how-rail i { flex: 1; border-radius: 4px; background: var(--panel-2); border-left: 3px solid var(--c); }
.how-rail b { position: absolute; top: 5px; bottom: 5px; left: calc(16px + var(--hp, 0) * (100% - 32px)); width: 2px; background: var(--fg); transform: skewX(-10deg); box-shadow: 0 0 10px rgba(255, 243, 184, .85); }
.how-rail b::before { content: ""; position: absolute; left: -6px; top: -2px; width: 14px; height: 9px; background: var(--fg); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }

.sc-compose { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; max-width: 540px; margin-inline: auto; }
.sc-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel-2); font: 500 11px/1 var(--f-mono); font-stretch: 87.5%; color: var(--fg); }
.sc-chip .ico { width: 18px; height: 18px; }
.sc-prompt { flex: 1 0 100%; min-height: 6.1em; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line-flash); background: var(--panel); font-size: clamp(var(--s-16), 1.5vw, var(--s-20)); line-height: 1.45; color: var(--fg); }
.sc-send { margin-left: auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--flash); color: var(--storm); }
.sc-send .ico { stroke: none; fill: var(--storm); width: 20px; height: 20px; }

.relay { position: relative; display: flex; justify-content: space-between; align-items: flex-start; width: 100%; max-width: 560px; margin-inline: auto; }
.relay-line { position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: var(--line-2); }
.relay-pass { position: absolute; z-index: 2; top: 22px; left: calc(22px + var(--b, 1) * (100% - 44px)); width: 12px; height: 12px; margin: -5px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 210, 63, .3), 0 0 22px 6px rgba(255, 210, 63, .75); }
.node { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; width: 44px; }
.node b { font: 500 11px/1.2 var(--f-text); color: var(--fg-3); white-space: nowrap; }
.node .ico { width: 44px; height: 44px; padding: 10px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--fg-3); --fv-accent: var(--fg-3); transition: background var(--f8), color var(--f8), transform var(--f18) var(--ease-snap), box-shadow var(--f18); }
.node.on .ico { background: var(--c); border-color: var(--c); color: var(--night); --fv-accent: var(--night); box-shadow: 0 0 26px -4px var(--c); transform: translateY(-3px); }
.node.on b { color: var(--fg); }
.relay-tl { position: relative; width: 100%; max-width: 560px; height: 86px; margin: 6px auto 0; border-radius: 6px; background: repeating-linear-gradient(180deg, rgba(220, 217, 240, .06) 0 24px, transparent 24px 30px); }
.relay-tl i { position: absolute; left: var(--l); width: var(--w); top: calc(var(--r, 1) * 30px + 2px); height: 20px; border-radius: 4px; background: var(--c); transform-origin: left; }

.sheet { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 560px; margin-inline: auto; }
.sheet i { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; outline: 2px solid transparent; outline-offset: 1px; background: linear-gradient(180deg, #3A2E8F, #FF8A5C 68%, #120D38 68%); transition: outline-color var(--f8); }
.sheet i:nth-child(2n) { background: linear-gradient(180deg, #2E6BD9, #BFE9FF 66%, #34297E 66%); } .sheet i:nth-child(3n) { background: linear-gradient(180deg, #1B1452, #FF7AB6 70%, #0A0722 70%); }
.sheet i::after { content: ""; position: absolute; right: 5px; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%230A0722' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9.4 2.6 2.6L13 6.4'/%3E%3C/svg%3E") center / contain; transform: scale(0); transition: transform var(--f18) var(--ease-snap), background-color var(--f8); }
.sheet i.on::after { transform: scale(1); }
.sheet i.bad.on:not(.fixed) { outline-color: var(--cut); }
.sheet i.bad.on:not(.fixed)::after { background: var(--cut); }
.undo { display: grid; gap: 6px; width: 100%; max-width: 560px; margin: 0 auto; padding: 0; list-style: none; }
.undo li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; border-left: 3px solid var(--c); background: var(--panel); font-size: var(--s-14); color: var(--fg-2); }
.undo li b { color: var(--fg); font-weight: 600; }
.undo li span { margin-left: auto; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line-2); font-size: 10px; color: var(--fg-2); }
.sc-export { justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 99px; background: var(--flash); color: var(--storm); font: 600 var(--s-14)/1 var(--f-text); --fv-accent: var(--storm); margin-right: max(0px, calc((100% - 560px) / 2)); }
.sc-export .ico { width: 18px; height: 18px; }

/* ------------------------------------------------ the team, as colour bars */
.bars { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); min-height: 300px; margin: 0; border-radius: var(--r-l); overflow: hidden; }
.bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0; padding: 18px 10px 16px; background: var(--c); color: var(--night); transition: filter var(--f18), box-shadow var(--f18); }
.bar .ico { width: 30px; height: 30px; margin-bottom: 4px; --fv-accent: var(--night); transition: transform var(--f18) var(--ease-snap); }
.bar b { font: 600 var(--s-14)/1.2 var(--f-text); }
.bar span { font-size: 11.5px; line-height: 1.3; }
.bar::before { content: ""; position: absolute; left: 50%; top: 14px; width: 12px; height: 20px; margin-left: -6px; background: var(--night); clip-path: polygon(62% 0, 0 56%, 44% 56%, 30% 100%, 100% 40%, 56% 40%); opacity: 0; transform: translateY(-14px) scale(.4); transition: opacity var(--f8), transform var(--f18) var(--ease-snap); }
.bar.is-on, .bar:hover { filter: brightness(1.1) saturate(1.12); box-shadow: inset 0 -5px 0 var(--night); }
.bar.is-on::before, .bar:hover::before { opacity: 1; transform: none; }
.bar.is-on .ico, .bar:hover .ico { transform: translateY(-6px) scale(1.14); }
@media (max-width: 1040px) { .bars { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bar { min-height: 150px; } .bar:last-child { grid-column: span 2; } }
@media (max-width: 520px) { .bars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bar { min-height: 132px; } .bar:last-child { grid-column: 1 / -1; } }
.nums { margin-top: clamp(14px, 2vw, 22px); }
/* the brand's icon motions: each icon moves one part, once, when its bar or node takes the pass */
.ico * { transform-box: fill-box; transform-origin: center; }
.is-on .m-clap, .bar:hover .m-clap, .node.on .m-clap { transform-origin: 0% 100%; animation: i-clap var(--f30) var(--ease-snap) 2; }
.is-on .m-check, .bar:hover .m-check, .node.on .m-check { animation: i-check var(--f30) var(--ease-flash); }
.is-on .m-draw, .bar:hover .m-draw, .node.on .m-draw { animation: i-draw var(--f48) var(--ease-flash); }
.is-on .m-orbit, .bar:hover .m-orbit, .node.on .m-orbit { animation: i-orbit var(--f48) var(--ease-glide); }
.is-on .m-drop, .bar:hover .m-drop { animation: i-drop var(--f30) var(--ease-snap); }
.is-on .m-pulse, .bar:hover .m-pulse { animation: i-pulse var(--f30) var(--ease-glide) 2; }
.is-on .m-flash, .bar:hover .m-flash { animation: i-flashy var(--f30) steps(1); }
.is-on .m-look, .bar:hover .m-look { animation: i-look var(--f48) var(--ease-glide); }
.is-on .m-b1, .is-on .m-b4, .bar:hover .m-b1, .bar:hover .m-b4, .node.on .m-b1, .node.on .m-b4 { animation: i-eq var(--f30) 3; }
.is-on .m-b2, .is-on .m-b5, .bar:hover .m-b2, .bar:hover .m-b5, .node.on .m-b2, .node.on .m-b5 { animation: i-eq var(--f30) 3 .08s; }
.is-on .m-b3, .is-on .m-b6, .bar:hover .m-b3, .bar:hover .m-b6, .node.on .m-b3, .node.on .m-b6 { animation: i-eq var(--f30) 3 .16s; }
.btn:hover .m-down { animation: i-down var(--f30) var(--ease-snap) 2; }
@keyframes i-clap { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-14deg); } 70% { transform: rotate(2deg); } }
@keyframes i-check { from { stroke-dasharray: 14; stroke-dashoffset: 14; } to { stroke-dasharray: 14; stroke-dashoffset: 0; } }
@keyframes i-draw { from { stroke-dasharray: 30; stroke-dashoffset: 30; } to { stroke-dasharray: 30; stroke-dashoffset: 0; } }
@keyframes i-orbit { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-4px, 2px); } 66% { transform: translate(-1px, 5px); } }
@keyframes i-drop { 0% { transform: translateY(-4px); opacity: 0; } 60% { transform: translateY(.6px); opacity: 1; } }
@keyframes i-pulse { 50% { transform: scale(.7); } }
@keyframes i-flashy { 0%, 100% { opacity: 1; } 30% { opacity: .2; } 45% { opacity: 1; } 60% { opacity: .4; } }
@keyframes i-look { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes i-eq { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
@keyframes i-down { 50% { transform: translateY(2px); } }

/* ------------------------------------------------ languages: one voice, three scripts */
.langs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.lang { display: grid; gap: 16px; align-content: start; justify-items: start; }
.lang-big { font-size: clamp(var(--s-25), 3vw, var(--s-39)); }
.lang-big.deva { line-height: 1.3; }
.lang-cap { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--night); font-size: var(--s-16); font-weight: 600; line-height: 1.5; }
.lang-cap span { animation: lang-word 5s steps(1) infinite; animation-delay: calc(var(--w) * .8s); }
@keyframes lang-word { 0% { color: var(--flash); } 16%, 100% { color: inherit; } }
.lang-voice { grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--night-2); }
.lang-voice b { flex: none; font-size: 11px; font-weight: 500; color: var(--fg-3); }
.lv-wave { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 3px; height: 36px; min-width: 0; }
.lv-wave i { flex: 1; max-width: 6px; height: calc(var(--h, 46) * 1%); border-radius: 1px; background: var(--t-audio); animation: sn-breathe 1.3s ease-in-out infinite alternate; }
.lv-wave i:nth-child(8n) { --h: 6; }
.lv-ph { position: absolute; top: 6px; bottom: 6px; left: calc(100% - 18px); width: 2px; background: var(--fg); transform: skewX(-10deg); box-shadow: 0 0 8px rgba(255, 243, 184, .9); animation: lv-ph 5s linear infinite; }
@keyframes lv-ph { 0% { left: 96px; } 80%, 100% { left: calc(100% - 18px); } }
@media (max-width: 900px) { .langs { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------ plans, the last call, the footer */
.plans-more { margin-top: 22px; text-align: center; }
.last { overflow: hidden; text-align: center; background: radial-gradient(900px 520px at 50% 112%, #34297E, rgba(10, 7, 34, 0) 70%); }
.last-in { display: grid; justify-items: center; gap: 22px; }
.last-h span, .last-h em { display: inline-block; }
.js .last-h.reveal { opacity: 1; transform: none; }
.js .last-h.reveal:not(.is-in) > * { opacity: 0; }
.last-h.is-in > * { animation: fv-snapin var(--f30) var(--ease-snap) both; }
.last-h.is-in > :nth-child(2) { animation-delay: var(--f18); } .last-h.is-in > :nth-child(3) { animation-delay: calc(var(--f18) * 2); }
/* the mark, built: a play button, the bolt through it, two shards, the lean. Base: the finished mark */
.build { width: clamp(110px, 16vw, 180px); overflow: visible; filter: drop-shadow(0 0 50px rgba(255, 210, 63, .35)); }
.b-tri, .b-back, .b-tip { fill: var(--flash); }
.b-tri { opacity: 0; }
.b-shards { transform-box: view-box; transform-origin: 50px 50px; transform: skewX(-10deg); }
.b-bolt { fill: none; stroke: var(--flash-light); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0; }
.build.is-live .b-tri { animation: b-tri 5.5s steps(1) infinite; }
.build.is-live .b-shards { animation: b-shards 5.5s var(--ease-flash) infinite; }
.build.is-live .b-back { animation: b-back 5.5s var(--ease-snap) infinite; }
.build.is-live .b-tip { animation: b-tip 5.5s var(--ease-snap) infinite; }
.build.is-live .b-bolt { animation: b-bolt 5.5s var(--ease-strike) infinite; }
@keyframes b-tri { 0% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes b-shards { 0%, 27.9% { opacity: 0; transform: none; } 28%, 46% { opacity: 1; transform: none; } 58%, 100% { opacity: 1; transform: skewX(-10deg); } }
@keyframes b-back { 0%, 28% { transform: none; } 36% { transform: translate(-3px, -1px); } 46%, 100% { transform: none; } }
@keyframes b-tip { 0%, 28% { transform: none; } 36% { transform: translate(3px, 1px); } 46%, 100% { transform: none; } }
@keyframes b-bolt { 0%, 12% { opacity: 1; stroke-dashoffset: 1; } 26% { opacity: 1; stroke-dashoffset: 0; } 30% { opacity: 1; stroke-dashoffset: 0; } 33%, 100% { opacity: 0; stroke-dashoffset: 0; } }
.foot-ne { font-size: var(--s-14); font-weight: 500; font-stretch: 100%; color: var(--fg-3); }
.foot-c { font-size: var(--s-12); }

@media (prefers-reduced-motion: reduce) {
  .js .last-h.reveal:not(.is-in) > * { opacity: 1; }
  .streak { display: none; }
}