/* Motion layer: kinetic type, the pixel storm, the marquee, the scroll story, spotlights. Everything here is
   progressive: without JS the words are visible, and prefers-reduced-motion switches the movement off. */

/* ---------- entrance ---------- */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.nav-in{animation:navin .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes navin{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
.hero .kicker,.hero .lead,.hero .cta-row,.hero .hero-note{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.hero .kicker{animation-delay:.05s}.hero .lead{animation-delay:.55s}.hero .cta-row{animation-delay:.7s}.hero .hero-note{animation-delay:.85s}
.hero .demo-wrap{animation:rise 1.1s .35s cubic-bezier(.2,.8,.2,1) both}

/* ---------- kinetic headings: words rise out of a mask ---------- */
.js [data-split]{overflow:visible}
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.js [data-split] .wi{display:inline-block;transform:translateY(112%) rotate(4deg);transform-origin:0 100%;transition:transform .9s cubic-bezier(.16,.84,.24,1);transition-delay:calc(var(--i)*55ms)}
.js [data-split].in .wi{transform:none}
.js [data-split] em .wi,.js [data-split] .wi em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--brand)}

/* ---------- the pixel storm (hero background) ---------- */
#pixels{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.95;mask-image:linear-gradient(180deg,#000 55%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
:root[data-theme="light"] #pixels{opacity:.75}

/* ---------- marquee ---------- */
.marquee{position:relative;overflow:hidden;border-block:1px solid var(--line);background:var(--bg-2);padding:1.15rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;gap:2.6rem;animation:marq 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee span{font:800 clamp(1.8rem,4vw,3.2rem)/1 'Inter Tight',sans-serif;letter-spacing:-.04em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px var(--line-2);display:inline-flex;align-items:center;gap:2.6rem;transition:color .3s,-webkit-text-stroke-color .3s}
.marquee span:hover{color:var(--text);-webkit-text-stroke-color:transparent}
.marquee span::after{content:"✦";font-size:.5em;color:var(--brand);-webkit-text-stroke:0}

/* ---------- scroll story: Ask. Watch. Done. ---------- */
.story{position:relative;height:340vh}
.story-pin{position:sticky;top:0;height:100vh;min-height:620px;overflow:hidden}
.panel-s{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(1rem,4vw,4rem);padding:clamp(5.5rem,10vh,7.5rem) max(1.25rem,calc((100vw - 1240px)/2)) 4rem;clip-path:inset(100% 0 0 0);transition:clip-path .85s cubic-bezier(.76,0,.24,1)}
.panel-s.on{clip-path:inset(0 0 0 0);z-index:2}
.panel-s.past{clip-path:inset(0 0 0 0);z-index:1}
.panel-s .big{font:900 clamp(4.5rem,11vw,10.5rem)/.84 'Inter Tight',sans-serif;letter-spacing:-.065em;margin:0 0 1.2rem}
.panel-s .no{font:600 .78rem 'JetBrains Mono',monospace;letter-spacing:.22em;margin-bottom:1.2rem;display:block}
.panel-s p{font-size:clamp(1.1rem,1.8vw,1.5rem);max-width:30rem;margin:0}
.panel-s .ui{position:relative;justify-self:center;width:min(100%,520px);padding-bottom:3.5rem}
.panel-s .nova{position:absolute;right:-3%;bottom:-6%;width:clamp(110px,13vw,180px);height:auto;z-index:3}
.p-ask{background:#f7f6fa;color:#121214}.p-ask .no{color:#6f4bb8}.p-ask p{color:#4b3573}
.p-watch{background:linear-gradient(150deg,#8a63d6,#5a35a8);color:#fff}.p-watch .no{color:#efe6ff}.p-watch p{color:#efe6ff}
.p-done{background:#0e0817;color:#fff}.p-done .no{color:#cdbdf5}.p-done p{color:#cdbdf5}
.p-done .big{background:linear-gradient(120deg,#f1e8ff,#a985ee 55%,#8a63d6);-webkit-background-clip:text;background-clip:text;color:transparent}
.panel-s .big span{display:inline-block;transform:translateY(40%);opacity:0;transition:transform .8s cubic-bezier(.16,.84,.24,1) .25s,opacity .5s .25s}
.panel-s.on .big span{transform:none;opacity:1}
.ui-field{border-radius:22px;background:#fff;border:2px solid #d9d2ee;padding:1.1rem 1.3rem;font:500 1.15rem 'Inter',sans-serif;color:#121214;box-shadow:0 30px 70px rgba(75,42,138,.18);min-height:3.6rem}
.ui-field .typed{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0;border-right:2px solid #8a63d6}
.p-ask.on .typed{animation:typing 2.6s steps(41,end) .5s forwards,caret .8s steps(2) infinite}
@keyframes typing{to{width:41ch}}
@keyframes caret{50%{border-color:transparent}}
.ui-steps{display:grid;gap:.7rem}
.ui-steps div{display:flex;align-items:center;gap:.9rem;border-radius:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:.95rem 1.2rem;font:600 1.05rem 'Inter',sans-serif;opacity:0;transform:translateX(30px)}
.p-watch.on .ui-steps div{animation:slidein .6s cubic-bezier(.16,.84,.24,1) forwards}
.p-watch.on .ui-steps div:nth-child(1){animation-delay:.3s}.p-watch.on .ui-steps div:nth-child(2){animation-delay:.75s}.p-watch.on .ui-steps div:nth-child(3){animation-delay:1.2s}.p-watch.on .ui-steps div:nth-child(4){animation-delay:1.65s}
@keyframes slidein{to{opacity:1;transform:none}}
.ui-steps i{width:22px;height:22px;border-radius:50%;border:2.5px solid #fff;display:grid;place-items:center;flex:0 0 22px;position:relative}
.ui-steps i::after{content:"";width:9px;height:5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.p-watch.on .ui-steps div:nth-child(n) i::after{animation:tick .3s forwards}
.p-watch.on .ui-steps div:nth-child(1) i::after{animation-delay:.9s}.p-watch.on .ui-steps div:nth-child(2) i::after{animation-delay:1.35s}.p-watch.on .ui-steps div:nth-child(3) i::after{animation-delay:1.8s}.p-watch.on .ui-steps div:nth-child(4) i::after{animation-delay:2.25s}
@keyframes tick{to{opacity:1}}
.ui-done{display:grid;gap:1rem}
.ui-done .mb{box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ui-done .badge{display:inline-flex;align-items:center;gap:.8rem;font:700 1.15rem 'Inter',sans-serif;color:#a7f3d0}
.ui-done .badge svg{width:46px;height:46px}
.ui-done .badge path{stroke-dasharray:60;stroke-dashoffset:60}
.p-done.on .ui-done .badge path{animation:draw2 .8s .5s ease forwards}
@keyframes draw2{to{stroke-dashoffset:0}}
.story-prog{position:absolute;left:max(1.25rem,calc((100vw - 1240px)/2));bottom:1.8rem;z-index:5;display:flex;gap:.5rem}
.story-prog i{width:46px;height:4px;border-radius:2px;background:rgba(128,128,128,.4);overflow:hidden;position:relative}
.story-prog i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:0 50%;transition:transform .6s}
.story-prog i.on::after{transform:scaleX(1)}
@media (max-width:820px){
  .story{height:auto}.story-pin{position:static;height:auto;min-height:0;overflow:visible}
  .panel-s{position:relative;clip-path:none;grid-template-columns:1fr;padding:3.5rem 1.25rem;min-height:70vh}
  .panel-s .big{font-size:clamp(4.5rem,22vw,8rem)}.panel-s .nova{display:none}.story-prog{display:none}
  .panel-s>div{min-width:0}.p-ask .typed{animation:none!important;width:auto;white-space:normal;border:0}.p-watch .ui-steps div{opacity:1;transform:none}.p-watch .ui-steps i::after{opacity:1}
}

/* ---------- spotlight on cards, 3D lift ---------- */
.tile,.card,.plan,.bs,.step{--mx:50%;--my:50%}
.tile::before,.card::before,.plan::before,.bs::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(183,156,238,.16),transparent 42%);opacity:0;transition:opacity .3s;pointer-events:none}
.tile:hover::before,.card:hover::before,.plan:hover::before,.bs:hover::before{opacity:1}
.card,.plan,.bs{position:relative;overflow:hidden}

/* ---------- counters, divider bolt ---------- */
.bolt{display:block;margin:0 auto;width:min(420px,70%);height:60px;overflow:visible}
.bolt path{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 8px rgba(183,156,238,.8))}
.in .bolt path,.bolt.in path{stroke-dashoffset:0}

/* ---------- floating mascot in the hero demo, mouse parallax ---------- */
.demo-nova{animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}

@media (prefers-reduced-motion:reduce){
  .marquee-track,.demo-nova{animation:none}
  .js [data-split] .wi{transform:none;transition:none}
  .panel-s .big span{transform:none;opacity:1;transition:none}
  .nav-in,.hero .kicker,.hero .lead,.hero .cta-row,.hero .hero-note,.hero .demo-wrap{animation:none}
}

/* ---------- inner pages: header with a mascot peeking in, stats, vertical timeline ---------- */
.pagehead-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}
.peek{width:230px;align-self:end;animation:peek 6s ease-in-out infinite;filter:drop-shadow(0 24px 44px rgba(60,30,120,.55))}
@keyframes peek{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@media (max-width:900px){.peek{display:none}.pagehead-in{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.stat{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--bg-3);padding:1.5rem 1.6rem}
.stat b{display:block;font:900 clamp(2.3rem,4.6vw,3.8rem)/1 'Inter Tight',sans-serif;letter-spacing:-.05em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:.55rem;color:var(--muted);font-size:.92rem}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
.tlv{position:relative;padding-left:2.6rem;display:grid;gap:1.2rem}
.tlv-line{position:absolute;left:.7rem;top:.8rem;bottom:.8rem;width:3px;border-radius:2px;background:var(--line-2);overflow:hidden}
.tlv-line i{position:absolute;inset:0;background:linear-gradient(#b79cee,#e46ad0 70%,#ffc14a);transform-origin:0 0;transform:scaleY(var(--p,0))}
.tlv-i{position:relative;border:1px solid var(--line);background:var(--bg-3);border-radius:24px;padding:1.4rem 1.7rem;transition:border-color .4s}
.tlv-i h3{margin:.4rem 0 .4rem}.tlv-i p{margin:0;color:var(--text-2)}
.tlv-dot{position:absolute;left:calc(-2.6rem + .7rem - 6.5px);top:1.9rem;width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid var(--line-2);transition:all .45s}
.tlv-i.on{border-color:var(--line-2)}
.tlv-i.on .tlv-dot{border-color:var(--brand);background:var(--brand);box-shadow:0 0 16px var(--brand),0 0 0 6px rgba(138,99,214,.18)}

/* ---------- receptive-field diagram ---------- */
.rfield{width:100%;height:auto;display:block}
.rfield .ln{stroke:var(--brand);stroke-width:1.6;fill:none;stroke-linecap:round;opacity:0;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1),opacity .4s;transition-delay:var(--d)}
.in .rfield .ln,.rfield.in .ln{opacity:.7;stroke-dashoffset:0}
.rfield .dt{fill:var(--bg-4)}.rfield .dt.hit{fill:var(--brand);opacity:0;transition:opacity .4s;transition-delay:var(--d)}
.in .rfield .dt.hit,.rfield.in .dt.hit{opacity:1}
.rfield .out{fill:#ffc14a;filter:drop-shadow(0 0 8px #ffc14a)}
.rfield text{font:600 12px 'JetBrains Mono',monospace;fill:var(--muted);letter-spacing:.08em}

/* ---------- films: chapters ---------- */
.chapters{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.chapters button{font:600 .78rem 'JetBrains Mono',monospace;border:1px solid var(--line-2);background:var(--bg-3);color:var(--text-2);border-radius:999px;padding:.5rem .95rem;cursor:pointer;transition:all .2s}
.chapters button:hover,.chapters button.on{background:var(--brand-3);border-color:var(--brand-3);color:#fff}
.chapters button b{color:var(--brand);margin-right:.5rem;font-weight:700}
.chapters button:hover b,.chapters button.on b{color:#fff}
.cinema{position:relative;border-radius:30px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 40px 120px rgba(60,30,120,.5),0 0 0 1px rgba(255,255,255,.04)}
.cinema video{width:100%;aspect-ratio:16/9;background:#000;display:block}

/* ---------- brand: copy a colour ---------- */
.sw{cursor:pointer;transition:transform .25s}.sw:hover{transform:translateY(-4px)}
.sw.copied div b::after{content:"  copied";font:600 .7rem 'JetBrains Mono',monospace;color:var(--green)}
.zero-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:900px){.zero-row{grid-template-columns:repeat(2,1fr)}}
.zero{border:1px solid var(--line);border-radius:26px;background:var(--bg-3);padding:1.6rem;position:relative;overflow:hidden}
.zero b{display:block;font:900 clamp(4rem,9vw,7rem)/.85 'Inter Tight',sans-serif;letter-spacing:-.06em;background:linear-gradient(120deg,#e9ddff,#a985ee 55%,#8a63d6);-webkit-background-clip:text;background-clip:text;color:transparent}
.zero span{display:block;margin-top:.8rem;color:var(--text-2);font-weight:600}
.zero small{display:block;margin-top:.2rem;color:var(--muted)}

/* ---------- download cards ---------- */
.os-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:900px){.os-row{grid-template-columns:1fr}}
.os{border:1px solid var(--line);border-radius:26px;background:var(--bg-3);padding:1.6rem;display:flex;flex-direction:column;gap:.6rem;position:relative;overflow:hidden;transition:transform .3s,border-color .3s}
.os:hover{transform:translateY(-4px);border-color:var(--brand)}
.os svg{width:44px;height:44px;color:var(--brand)}
.os h3{margin:.4rem 0 0}.os p{margin:0;color:var(--text-2);font-size:.95rem}
.os .btn{margin-top:auto;justify-self:start}

/* ---------- contact: Nova watches you type ---------- */
.form-peek{display:flex;align-items:center;gap:1rem;margin-bottom:.4rem}
.form-peek svg{width:84px;height:84px;flex:0 0 84px}