/* FormantAI motion system — pairs with /motion.js.
   Rule: every "hidden before animation" state lives under html.js-motion AND
   prefers-reduced-motion:no-preference. Without JS (or with reduced motion) the page is fully static. */

:root{--m-ease:cubic-bezier(.16,1,.3,1);--m-ease-io:cubic-bezier(.87,0,.13,1);--m-dark:#140206}

/* ---------- Layout for pinned stories (JS present only; no-JS = stacked, readable) ---------- */
.story-progress{height:3px;border-radius:3px;background:var(--border,#E3E8EF);overflow:hidden;margin:0 0 14px}
.story-progress i{display:block;height:100%;background:var(--pink,#FF6183);transform-origin:0 50%;transform:scaleX(0)}
.story-step{padding:14px 0 14px 18px;border-left:2px solid var(--border,#E3E8EF)}
.story-step h3,.story-step h4{margin-bottom:4px}
.story-step p{margin:0}

@media (prefers-reduced-motion:no-preference){
  html.js-motion .story{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:48px;align-items:start}
  html.js-motion .story-steps{display:flex;flex-direction:column;gap:6px}
  html.js-motion .story-step{cursor:pointer;opacity:.38;transition:opacity .45s var(--m-ease),border-color .45s var(--m-ease),transform .45s var(--m-ease)}
  html.js-motion .story-step.is-past{opacity:.6}
  html.js-motion .story-step.is-active{opacity:1;border-left-color:var(--p-600,#2447D8);transform:translate3d(4px,0,0)}
  html.js-motion .story-visual{position:sticky;top:96px}
  html.js-motion .story--pinned .story-visual{position:relative;top:auto}
  html.js-motion .story--flow .story-step{min-height:22vh;display:flex;flex-direction:column;justify-content:center}
  /* learning-pipeline visual inside a story: 4-up grid on desktop, arrows hidden */
  html.js-motion .story-visual .lp-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;overflow:visible;padding:6px}
  html.js-motion .story-visual .lp-arrow{display:none}
  html.js-motion .story-visual .lp-hint{display:none}
  html.js-motion .story-visual .lp-stage{min-width:0;transition:border-color .45s var(--m-ease),background-color .45s var(--m-ease),box-shadow .45s var(--m-ease),opacity .45s var(--m-ease);will-change:transform}
  html.js-motion .story-visual .lp-stage:not(.is-active):not(.is-past){opacity:.55}
}
@media (prefers-reduced-motion:no-preference) and (max-width:899px){
  html.js-motion .story{grid-template-columns:1fr;gap:20px}
  html.js-motion .story-visual{order:-1;top:12px;z-index:2;background:var(--lilac,#E4E0F2);padding:8px 0}
  html.js-motion .story-visual .lp-track{display:flex;overflow-x:auto;padding:8px 6px}
  html.js-motion .story-visual .lp-stage{flex:0 0 170px;min-width:170px}
}
/* active-stage glow (applies whenever JS marks it, including reduced motion) */
.lp-stage.is-active,[data-step].is-active{background:var(--green-1,#7CFF98);box-shadow:inset 0 0 0 2px var(--ink,#140206)}
@media (prefers-reduced-motion:reduce){.lp-stage.is-active,[data-step].is-active{box-shadow:none}}

/* ---------- Curtain ---------- */
#curtain{position:fixed;inset:0;z-index:10000;background:var(--m-dark);display:flex;align-items:center;justify-content:center;will-change:transform;pointer-events:none}
html.m-curtain::after{content:"";position:fixed;inset:0;z-index:10000;pointer-events:none;background:var(--m-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' rx='8' fill='%232447D8'/%3E%3Crect x='6' y='11' width='2.5' height='6' rx='1.25' fill='%23fff' opacity='.7'/%3E%3Crect x='10.5' y='8' width='2.5' height='12' rx='1.25' fill='%23fff'/%3E%3Crect x='15' y='5' width='2.5' height='18' rx='1.25' fill='%23fff'/%3E%3Crect x='19.5' y='9' width='2.5' height='10' rx='1.25' fill='%23fff' opacity='.85'/%3E%3C/svg%3E") center/44px 44px no-repeat}
@media (prefers-reduced-motion:reduce){html.m-curtain::after,#curtain{display:none}}

/* ---------- Nav hide/show ---------- */
html.js-motion .nav{transition:border-color .2s,transform .45s var(--m-ease);will-change:transform}
html.js-motion .nav.m-nav-hidden{transform:translate3d(0,-100%,0)}
@media (prefers-reduced-motion:reduce){html.js-motion .nav{transition:none}}

/* ---------- Magnetic buttons (keep colour transitions, let GSAP own transform) ---------- */
.m-magnetic{transition-property:background-color,border-color,box-shadow,color!important;will-change:transform}
.m-magnetic:hover{transform:none}

/* ---------- Marquee ---------- */
.marquee:hover .track,.marquee.m-off .track{animation-play-state:paused}

/* ---------- Body theme shift ---------- */
body{transition:background-color .6s var(--m-ease)}
body.theme-dark{background-color:var(--m-dark)}
@media (prefers-reduced-motion:no-preference){
  html.js-motion main>section{transition:opacity .6s var(--m-ease)}
  html.js-motion body.theme-dark main>section:not([data-theme="dark"]):not([data-bg-shift]){opacity:.25}
  html.js-motion [data-bg-shift][data-theme="dark"]{transition:background-color .6s var(--m-ease)}
  html.js-motion body.theme-dark [data-bg-shift][data-theme="dark"]{background-color:transparent}
}

/* ---------- Lenis ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- Word splitting ---------- */
.m-w{display:inline-block;vertical-align:top;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.m-wi{display:inline-block}
[data-count],.m-count{font-variant-numeric:tabular-nums}
.m-pulse{fill:var(--p-600,#2447D8);filter:drop-shadow(0 0 4px rgba(36,71,216,.6));pointer-events:none}

/* ================= Initial (hidden) states — JS + motion allowed only ================= */
@media (prefers-reduced-motion:no-preference){
  /* generic fade-up: [data-reveal], .reveal, stagger children, hero items, dark containers */
  html.js-motion [data-reveal]:not([data-reveal="stagger"]):not(.m-done),
  html.js-motion .reveal:not(.m-done),
  html.js-motion [data-reveal="stagger"]>*:not(.m-done),
  html.js-motion .hero-grid>div:first-child>*:not(.m-done),
  html.js-motion .hero-grid>div:nth-child(2):not(.m-done),
  html.js-motion .page-hero .container>*:not(.m-done),
  html.js-motion [data-hero-content]>*:not(.m-done),
  html.js-motion [data-theme="dark"]>.container:not(.m-done){
    transition:opacity .7s var(--m-ease),transform .7s var(--m-ease)!important;transition-delay:var(--m-d,0ms)!important
  }
  html.js-motion [data-reveal]:not([data-reveal="stagger"]):not(.m-in),
  html.js-motion .reveal:not(.m-in),
  html.js-motion [data-reveal="stagger"]>*:not(.m-in),
  html.js-motion .hero-grid>div:first-child>*:not(.m-in),
  html.js-motion .hero-grid>div:nth-child(2):not(.m-in),
  html.js-motion .page-hero .container>*:not(.m-in),
  html.js-motion [data-hero-content]>*:not(.m-in){opacity:0;transform:translate3d(0,18px,0)}
  html.js-motion [data-theme="dark"]>.container:not(.m-in){opacity:0;transform:translate3d(0,32px,0)}
  html.js-motion .reveal.m-in{opacity:1;transform:none}
  /* the words themselves animate; don't also slide the heading block */
  html.js-motion .hero-grid>div:first-child>[data-words]:not(.m-in),
  html.js-motion .page-hero .container>[data-words]:not(.m-in){transform:none;opacity:1}

  /* 1. words */
  html.js-motion [data-words]:not(.m-split){visibility:hidden}
  html.js-motion [data-words] .m-wi{transition:transform .8s var(--m-ease),opacity .8s var(--m-ease);transition-delay:var(--m-wd,0ms)}
  html.js-motion [data-words]:not(.m-in) .m-wi{opacity:0;transform:translate3d(0,24px,0)}
  html.js-motion [data-words].m-done .m-wi{transition:none}

  /* hero overlay */
  html.js-motion [data-hero-overlay]{opacity:0}
  html.js-motion [data-hero-media]{will-change:transform;transform-origin:50% 50%}

  /* 10. grouped staggers (keep each item's own resting opacity, e.g. .l5.locked) */
  html.js-motion .audit .row:not(.m-done),
  html.js-motion .clog-item:not(.m-done),
  html.js-motion .vtl-node:not(.m-done),
  html.js-motion .l5:not(.m-done){transition:opacity .6s var(--m-ease),transform .6s var(--m-ease)!important;transition-delay:var(--m-d,0ms)!important}
  html.js-motion .vtl-line:not(.m-done){transition:transform .6s var(--m-ease);transition-delay:var(--m-d,0ms);transform-origin:0 50%}
  html.js-motion .audit .row:not(.m-in){opacity:0;transform:translate3d(-10px,0,0)}
  html.js-motion .audit .row.m-in{opacity:1;transform:none}
  html.js-motion .clog-item:not(.m-in),
  html.js-motion .l5:not(.m-in){opacity:0;transform:translate3d(0,16px,0)}
  html.js-motion .vtl-node:not(.m-in){opacity:0;transform:translate3d(0,12px,0) scale(.96)}
  html.js-motion .vtl-line:not(.m-in){transform:scaleX(0)}

  /* transcripts: existing CSS animation (main.js sets per-turn delays) waits until in view */
  html.js-motion .transcript:not(.m-in) .turn{animation-play-state:paused}

  /* 8. flow diagram */
  html.js-motion .flow svg:not(.m-drawn) .flow-edge{animation:none}
  html.js-motion .flow svg>g,html.js-motion .flow svg>text{transition:opacity .6s var(--m-ease);transition-delay:var(--m-d,0ms)}
  html.js-motion .flow svg:not(.m-in)>g,html.js-motion .flow svg:not(.m-in)>text{opacity:0}

  /* 9. charts: CSS line-draw only once scrolled in; points pop */
  html.js-motion .chart .draw{animation:none;stroke-dashoffset:1400}
  html.js-motion .chart.is-in .draw{animation:drawLine 1.6s var(--m-ease) forwards}
  html.js-motion .chart.is-in .draw~.draw{animation-delay:.15s}
  html.js-motion .chart svg>circle{transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;transition-delay:var(--m-d,0ms)}
  html.js-motion .chart:not(.is-in) svg>circle{opacity:0;transform:scale(0)}
}

/* fixes */
@media (max-width:899px){html.js-motion .story{grid-template-columns:minmax(0,1fr)}html.js-motion .story-visual{min-width:0}}
.section.dark .story-visual{background:var(--lilac)!important}