/* ============================================================================
   HOME CHOREOGRAPHY (lane/home-choreo)
   The homepage below the trailer becomes one continuous composed descent:
   a light thread runs down the page spine, each section's eyebrow tick
   ignites as it enters view, the verdict spread plays a staged one-shot,
   problem-card glyphs draw themselves in, the tour teaser previews the
   wizard rhythm, the how-it-works stages connect with a drawn trace, and
   the final CTA band breathes.

   Rules honored here:
   - transform/opacity one-shots (plus the classic stroke-dashoffset draw
     and glow-as-information box-shadow transitions on interaction states)
   - everything plays once on scroll-into-view, then rests static
   - prefers-reduced-motion gets the complete composed static finals
   - no-JS gets the plain static page: every pre-state is scoped under
     html.lt-on, which assets/home-choreo.js adds at init
   ========================================================================== */

main{position:relative}

/* ---------------------------------------------------------------------------
   1. THE LIGHT THREAD: a 1px seam descending from the trailer's halo field
   down the page spine, with an occasional drifting glow. Sits behind all
   content (negative z paints above the body pattern, below everything else).
   --------------------------------------------------------------------------- */
.lt-spine{position:absolute; left:50%; bottom:0; width:1px; margin-left:-.5px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom,
    transparent,
    rgba(124,58,237,.30) 4%,
    rgba(124,58,237,.16) 26%,
    rgba(20,184,166,.12) 50%,
    rgba(124,58,237,.18) 74%,
    rgba(249,115,22,.10) 92%,
    transparent)}
.lt-spine::after{content:""; position:absolute; left:50%; top:0; width:3px; height:150px;
  background:linear-gradient(to bottom, transparent, rgba(196,181,253,.85) 50%, transparent);
  filter:blur(1px); opacity:0; transform:translate(-50%,0);
  animation:lt-drift 30s linear 3s infinite}
@keyframes lt-drift{
  0%{transform:translate(-50%,0); opacity:0}
  3%{opacity:.65}
  50%{opacity:.55}
  56%{transform:translate(-50%,var(--lt-travel,2000px)); opacity:0}
  100%{transform:translate(-50%,var(--lt-travel,2000px)); opacity:0}
}
@media(max-width:680px){.lt-spine{display:none}}

/* ---------------------------------------------------------------------------
   1b. EYEBROW TICK IGNITION: each section's kicker tick draws in and flares
   once as the section enters view, then settles to its resting opacity.
   --------------------------------------------------------------------------- */
.lt-on main > section .eyebrow .tick{transform:scaleX(0); transform-origin:left center}
main > section.lt-lit .eyebrow .tick{animation:lt-tick 1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes lt-tick{
  0%{transform:scaleX(0); opacity:1}
  55%{transform:scaleX(1); opacity:1}
  100%{transform:scaleX(1); opacity:.5}
}

/* ---------------------------------------------------------------------------
   2. VERDICT SPREAD IGNITION: header lands, engine rows ignite top to
   bottom, fills race with a per-row stagger, the dissenting clean rows
   pulse once in teal, and the confidence footer stamps last. Then static.
   Child map: 1 head, 2..6 engines, 7 foot. Clean rows are 5 and 6.
   --------------------------------------------------------------------------- */
.lt-on .spread .spread-head{opacity:0; transform:translateY(-6px)}
.lt-on .spread .eng{opacity:0; transform:translateX(-12px)}
.lt-on .spread .spread-foot{opacity:0; transform:scale(1.05)}
.spread.lt-fired .spread-head{animation:lt-rise .5s cubic-bezier(.2,.7,.2,1) forwards}
.spread.lt-fired .eng{animation:lt-row .55s cubic-bezier(.2,.7,.2,1) forwards}
.spread.lt-fired .eng:nth-child(2){animation-delay:.12s}
.spread.lt-fired .eng:nth-child(3){animation-delay:.28s}
.spread.lt-fired .eng:nth-child(4){animation-delay:.44s}
.spread.lt-fired .eng:nth-child(5){animation-delay:.60s}
.spread.lt-fired .eng:nth-child(6){animation-delay:.76s}
.spread.lt-fired .spread-foot{animation:lt-stamp .45s cubic-bezier(.2,.9,.3,1.25) 2.25s forwards}
@keyframes lt-rise{to{opacity:1; transform:none}}
@keyframes lt-row{to{opacity:1; transform:none}}
@keyframes lt-stamp{0%{opacity:0; transform:scale(1.07)} 100%{opacity:1; transform:scale(1)}}

/* the fills race: site.js sets the widths on intersect; these delays turn
   the simultaneous fill into a top-to-bottom relay.
   display:block fixes a latent baseline bug: .fill is a span, and width
   never applies to inline boxes, so the verdict bars were rendering empty */
.spread .fill{display:block}
.lt-on .spread .fill{transition:width .9s cubic-bezier(.2,.7,.2,1)}
.lt-on .spread .eng:nth-child(2) .fill{transition-delay:.38s}
.lt-on .spread .eng:nth-child(3) .fill{transition-delay:.54s}
.lt-on .spread .eng:nth-child(4) .fill{transition-delay:.70s}
.lt-on .spread .eng:nth-child(5) .fill{transition-delay:.86s}
.lt-on .spread .eng:nth-child(6) .fill{transition-delay:1.02s}

/* dissent pulse: the clean rows disagree with the malicious consensus;
   that disagreement is the product point, so it gets one teal breath */
.spread .eng{position:relative}
.spread .eng::after{content:""; position:absolute; inset:0 -10px; border-radius:9px; pointer-events:none;
  background:radial-gradient(70% 120% at 50% 50%, rgba(20,184,166,.18), transparent 75%); opacity:0}
.spread.lt-fired .eng:nth-child(5)::after{animation:lt-dissent 1s ease-in-out 1.7s}
.spread.lt-fired .eng:nth-child(6)::after{animation:lt-dissent 1s ease-in-out 1.88s}
@keyframes lt-dissent{0%,100%{opacity:0} 40%{opacity:1}}

/* ---------------------------------------------------------------------------
   3. PROBLEM CARDS: glyphs draw themselves in (stroke-dashoffset), fills
   wash in behind the line work, sparkles land last. One-shot per card with
   a stagger. home-choreo.js measures path lengths and flips the offsets.
   --------------------------------------------------------------------------- */
.lt-on .grid-4 .ico .lt-draw{fill-opacity:0; transition:stroke-dashoffset 1s cubic-bezier(.3,.6,.2,1), fill-opacity .6s ease .45s}
.lt-on .grid-4 .card.lt-ig .ico .lt-draw{fill-opacity:1}
.lt-on .grid-4 .ico .lt-spark{opacity:0; transform:scale(.4); transform-origin:center;
  transition:opacity .45s ease .85s, transform .45s cubic-bezier(.3,1.4,.5,1) .85s}
.lt-on .grid-4 .card.lt-ig .ico .lt-spark{opacity:var(--lt-o,1); transform:scale(1)}
/* the icon chip itself warms as its glyph completes */
.lt-on .grid-4 .ico{transition:box-shadow .6s ease .7s, border-color .6s ease .7s}
.lt-on .grid-4 .card.lt-ig .ico.o{box-shadow:0 0 18px rgba(249,115,22,.16); border-color:rgba(249,115,22,.45)}

/* ---------------------------------------------------------------------------
   4. TOUR TEASER: the four step dots light in sequence on entry, a one-shot
   preview of the wizard rhythm; the live step then keeps its standing pulse.
   --------------------------------------------------------------------------- */
.lt-on .tour-tease .tt-step.done .tt-dot{background:var(--bg-accent); border-color:var(--border-strong); box-shadow:none;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease}
.lt-on .tour-tease .tt-step.live .tt-dot{background:var(--bg-accent); border-color:var(--border-strong); box-shadow:none;
  animation-play-state:paused; transition:background .3s ease, box-shadow .3s ease, border-color .3s ease}
.lt-on .tour-tease .tt-step.lt-dot-on.done .tt-dot{background:var(--teal); border-color:transparent; box-shadow:0 0 8px var(--teal-glow)}
.lt-on .tour-tease .tt-step.lt-dot-on.live .tt-dot{background:var(--orange); border-color:transparent; box-shadow:0 0 10px var(--orange-glow);
  animation-play-state:running}
.lt-on .tour-tease .tt-step.lt-dot-on .tt-dot{animation-name:tt-pulse, lt-dotpop; animation-duration:1.6s,.45s;
  animation-timing-function:ease-in-out,cubic-bezier(.3,1.5,.5,1); animation-iteration-count:infinite,1}
.lt-on .tour-tease .tt-step.lt-dot-on.done .tt-dot{animation:lt-dotpop .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes lt-dotpop{0%{transform:scale(.6)} 60%{transform:scale(1.45)} 100%{transform:scale(1)}}

/* ---------------------------------------------------------------------------
   5. INTEGRATIONS MARQUEE: the one sanctioned loop stays; the pills gain
   depth. Logos rest slightly hushed and brighten on hover, the pill gains a
   border glow, and the bookend fades get a longer, softer falloff.
   --------------------------------------------------------------------------- */
.lt-on .marquee{mask-image:linear-gradient(90deg, transparent, rgba(0,0,0,.4) 7%, #000 18%, #000 82%, rgba(0,0,0,.4) 93%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, rgba(0,0,0,.4) 7%, #000 18%, #000 82%, rgba(0,0,0,.4) 93%, transparent)}
.logo-pill{transition:border-color .25s ease, box-shadow .25s ease, background .25s ease}
.logo-pill img{filter:saturate(.78) brightness(.9); opacity:.85; transition:filter .25s ease, opacity .25s ease}
.logo-pill span{transition:color .25s ease}
.logo-pill:hover{border-color:var(--border-primary); background:rgba(124,58,237,.06);
  box-shadow:0 0 20px rgba(124,58,237,.18), inset 0 0 14px rgba(124,58,237,.07)}
.logo-pill:hover img{filter:none; opacity:1}
.logo-pill:hover span{color:var(--fg)}

/* ---------------------------------------------------------------------------
   6. HOW-IT-WORKS STAGES: a light trace draws across the three stages on
   entry (purple > teal > orange, the three lights in narrative order), and
   each stage number ignites as the trace reaches it. One-shot.
   --------------------------------------------------------------------------- */
.lt-on .flow.reveal{position:relative}
.lt-on .flow.reveal::after{content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, var(--purple-400) 4%, var(--teal-400) 50%, var(--orange-400) 96%);
  filter:drop-shadow(0 0 6px rgba(124,58,237,.5)); opacity:.75;
  transform:scaleX(0); transform-origin:left center}
.flow.reveal.lt-fired::after{animation:lt-trace 1.5s cubic-bezier(.3,.5,.2,1) .15s forwards}
@keyframes lt-trace{to{transform:scaleX(1)}}
.lt-on .flow.reveal .stage .num{transition:color .45s ease}
.flow.reveal.lt-fired .stage:nth-child(1) .num{color:var(--purple-300); transition-delay:.25s}
.flow.reveal.lt-fired .stage:nth-child(2) .num{color:var(--teal-300); transition-delay:.85s}
.flow.reveal.lt-fired .stage:nth-child(3) .num{color:var(--orange-300); transition-delay:1.45s}
@media(max-width:880px){
  /* stacked layout: the trace runs down the left edge instead */
  .lt-on .flow.reveal::after{top:0; bottom:0; left:0; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg, var(--purple-400) 4%, var(--teal-400) 50%, var(--orange-400) 96%);
    transform:scaleY(0); transform-origin:top center}
  .flow.reveal.lt-fired::after{animation-name:lt-trace-v}
  @keyframes lt-trace-v{to{transform:scaleY(1)}}
}

/* ---------------------------------------------------------------------------
   7. FINAL CTA BAND: the halo breathes like a watched terminal surface, and
   the cast button charges on hover (glow and border only, no movement).
   --------------------------------------------------------------------------- */
.lt-on .band .halo-p{animation:lt-band-drift 26s ease-in-out infinite alternate}
@keyframes lt-band-drift{from{transform:translate3d(0,0,0)} to{transform:translate3d(9%,7%,0)}}
.band .btn-cast{border-color:transparent; transition:box-shadow .35s ease, border-color .35s ease, background .2s ease}
.band .btn-cast:hover{transform:none; border-color:rgba(196,181,253,.65); background:var(--purple-500);
  box-shadow:0 0 52px var(--purple-glow), 0 0 14px rgba(196,181,253,.55), inset 0 0 16px rgba(255,255,255,.14)}
.band .btn-cast:active{transform:none}

/* ---------------------------------------------------------------------------
   REDUCED MOTION: the complete composed static finals. Nothing plays;
   everything rests in its fired state.
   --------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .lt-spine::after{animation:none!important; opacity:0}
  .lt-on main > section .eyebrow .tick{transform:none; animation:none!important; opacity:.5}
  .lt-on .spread .spread-head,.lt-on .spread .eng,.lt-on .spread .spread-foot{opacity:1!important; transform:none!important; animation:none!important}
  .lt-on .spread .fill{transition:none!important}
  .spread .eng::after{animation:none!important; opacity:0!important}
  .lt-on .grid-4 .ico .lt-draw{fill-opacity:1!important; transition:none!important}
  .lt-on .grid-4 .ico .lt-spark{opacity:var(--lt-o,1)!important; transform:none!important; transition:none!important}
  .lt-on .grid-4 .ico{transition:none!important}
  .lt-on .tour-tease .tt-step.done .tt-dot{background:var(--teal); border-color:transparent; box-shadow:0 0 8px var(--teal-glow)}
  .lt-on .tour-tease .tt-step.live .tt-dot{background:var(--orange); border-color:transparent; box-shadow:0 0 10px var(--orange-glow)}
  .lt-on .tour-tease .tt-step .tt-dot{animation:none!important; transition:none!important}
  .lt-on .flow.reveal::after{transform:none; animation:none!important}
  .lt-on .flow.reveal .stage .num{transition:none!important}
  .lt-on .band .halo-p{animation:none!important}
  .logo-pill,.logo-pill img,.logo-pill span,.band .btn-cast{transition:none!important}
}