/* ============================================================================
   TOUR CINEMA (lane/tour-cinema). The visual/motion layer over the Spec 04
   interactive tour, in the trailer's composition language (assets/hero/):
   mono title cards, light-traced evidence, glow as information, one-shot
   choreography that plays once and rests static.

   Contract: tour.js owns ALL behavior (stepper, dots, keys, hash, gate);
   this file + tour-cinema.js only add presentation. Everything animated is
   transform/opacity (plus SVG stroke-dash traces, the house technique from
   the hero trailer). body.tc-on gates every armed/animated state: without it
   (no JS, prefers-reduced-motion) every surface renders its composed static
   final. No copy lives here; title cards read the page's own eyebrows.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. STEP TITLE CARD: the mono "shot label" sweep between steps
   --------------------------------------------------------------------------- */
.tc-titlecard{position:fixed; left:0; right:0; top:32vh; z-index:90; text-align:center; pointer-events:none; opacity:0}
.tc-titlecard::before{content:""; position:absolute; inset:-34px 0; z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(5,5,8,.88) 26%,rgba(5,5,8,.88) 74%,transparent)}
.tc-titlecard .tc-k1{display:block; font-family:var(--font-mono); font-size:13px; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:var(--fg)}
.tc-titlecard .tc-rule{display:block; width:170px; height:1px; margin:11px auto; transform:scaleX(0);
  background:linear-gradient(90deg,transparent,var(--purple-300),transparent); box-shadow:0 0 14px var(--purple-glow)}
.tc-titlecard .tc-k2{display:block; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--purple-300)}
.tc-titlecard.tc-show{animation:tc-card .64s cubic-bezier(.2,.7,.2,1) both}
.tc-titlecard.tc-show .tc-rule{animation:tc-rulein .42s .03s cubic-bezier(.2,.7,.2,1) both}
.tc-titlecard.tc-show .tc-k1{animation:tc-kin .4s ease both}
.tc-titlecard.tc-show .tc-k2{animation:tc-kin .4s .08s ease both}
@keyframes tc-card{0%{opacity:0}14%{opacity:1}72%{opacity:1}100%{opacity:0}}
@keyframes tc-rulein{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tc-kin{from{opacity:0; transform:translateY(9px)}to{opacity:1; transform:none}}

/* ---------------------------------------------------------------------------
   2. STEP IGNITION: app-frame ignites in, narration column settles after
   --------------------------------------------------------------------------- */
body.tc-on.js-tour .tp.on{animation:none}
.tc-on .app-frame{position:relative}
.tc-on .tp.tc-stepin .app-frame{animation:tc-frame .58s cubic-bezier(.22,.8,.26,1) .1s both}
@keyframes tc-frame{from{opacity:0; transform:translateY(20px) scale(.985)}to{opacity:1; transform:none}}
.tc-on .tp.tc-stepin .app-frame::after{content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  border-radius:inherit; opacity:0;
  background:radial-gradient(130% 65% at 50% 0%, rgba(124,58,237,.17), transparent 62%);
  animation:tc-flash .9s ease .16s both}
@keyframes tc-flash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.tc-on .tp.tc-stepin .tp-note{animation:tc-settle .55s cubic-bezier(.2,.7,.2,1) .24s both}
@keyframes tc-settle{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* ---------------------------------------------------------------------------
   3. STEP 3: the evidence constellation (omens language, data = this case)
   --------------------------------------------------------------------------- */
.tc-constellation{position:relative; height:232px; margin:-4px 0 16px; overflow:hidden;
  border-bottom:1px solid var(--border)}
.tc-constellation .tc-cap{position:absolute; right:6px; top:6px; z-index:2; font-family:var(--font-mono);
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint)}
.tc-wires{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.tc-ebase{fill:none; stroke:rgba(176,168,210,.16); stroke-width:1.2}
.tc-elive{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; opacity:0;
  filter:drop-shadow(0 0 5px currentColor); transition:opacity .35s ease}
.tc-elive.on{opacity:.85}
.tc-comet-core{fill:#fff; opacity:0}
.tc-comet-halo{opacity:0}

.tc-node{position:absolute; z-index:3; transform:translate(-50%,-50%); display:flex; align-items:center;
  gap:8px; padding:7px 11px 7px 8px; border-radius:11px; border:1px solid var(--border); white-space:nowrap;
  background:linear-gradient(180deg,rgba(20,20,30,.86),rgba(12,12,20,.93));
  opacity:0; transition:opacity .45s ease, border-color .45s ease, box-shadow .45s ease, filter .25s ease}
.tc-node .ic{width:26px; height:26px; flex:none; border-radius:8px; display:flex; align-items:center;
  justify-content:center; border:1px solid var(--border-strong); background:rgba(124,58,237,.08);
  color:var(--fg-muted); transition:color .45s ease, border-color .45s ease, background .45s ease}
.tc-node .ic svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.tc-node b{display:block; font-size:11.5px; font-weight:600; color:var(--fg); line-height:1.2}
.tc-node i{display:block; font-style:normal; font-family:var(--font-mono); font-size:9px;
  color:var(--fg-faint); margin-top:2px; letter-spacing:.03em}
.tc-node.lit{opacity:1}
.tc-node.pop{animation:tc-pop .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes tc-pop{0%{transform:translate(-50%,-50%) scale(.84)}55%{transform:translate(-50%,-50%) scale(1.06)}100%{transform:translate(-50%,-50%) scale(1)}}

/* tones: orange = the alert, purple = entities, red = confirmed-bad, teal = the finding */
.tc-node.k-alert.lit{border-color:rgba(249,115,22,.5); box-shadow:0 0 24px rgba(249,115,22,.16)}
.tc-node.k-alert.lit .ic{color:var(--orange-300); border-color:rgba(249,115,22,.5); background:rgba(249,115,22,.12)}
.tc-node.k-entity.lit{border-color:rgba(124,58,237,.4)}
.tc-node.k-entity.lit .ic{color:var(--purple-300); border-color:rgba(124,58,237,.5); background:rgba(124,58,237,.14)}
.tc-node.k-bad.lit{border-color:rgba(239,68,68,.5); box-shadow:0 0 22px rgba(239,68,68,.14)}
.tc-node.k-bad.lit .ic{color:var(--destructive-300); border-color:rgba(239,68,68,.5); background:rgba(239,68,68,.12)}
.tc-node.k-find{padding:9px 14px 9px 10px; border-radius:13px}
.tc-node.k-find b{font-size:12.5px}
.tc-node.k-find.lit{border-color:rgba(20,184,166,.55);
  box-shadow:0 0 34px rgba(20,184,166,.24), 0 10px 30px rgba(0,0,0,.4)}
.tc-node.k-find.lit .ic{color:var(--teal-300); border-color:rgba(20,184,166,.55); background:rgba(20,184,166,.13)}
.tc-node.k-find.lit i{color:var(--teal-300)}
.tc-node.lit:hover{filter:brightness(1.18)}

.tc-elabel{position:absolute; z-index:2; transform:translate(-50%,-50%); font-family:var(--font-mono);
  font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint); white-space:nowrap;
  background:rgba(8,8,14,.82); border:1px solid var(--border); border-radius:5px; padding:2px 7px;
  opacity:0; transition:opacity .4s ease}
.tc-elabel.show{opacity:1}

/* node hover lights the matching citation pill / tool run in the thread */
.tc-cite-hot{border-color:rgba(94,234,212,.7)!important; color:var(--teal-300)!important;
  box-shadow:0 0 14px rgba(20,184,166,.3)}

/* static finals (reduced motion / narrow): everything lands instantly */
.tc-constellation.tc-static *{transition:none!important; animation:none!important}

/* ---------------------------------------------------------------------------
   4. STEP 5: the approval ceremony (ring, seal stamp, teal cascade)
   --------------------------------------------------------------------------- */
.tc-on .gate{position:relative}
.tc-ring{position:absolute; z-index:6; pointer-events:none}
.tc-ring rect{fill:none; stroke:var(--teal-300); stroke-width:2; filter:drop-shadow(0 0 6px rgba(20,184,166,.6))}
.tc-ring.tc-out{opacity:0; transition:opacity .28s ease}

.tc-on .gate.approved.tc-ceremony .seal{animation:tc-settle .4s ease both}
.tc-on .gate.approved.tc-ceremony .seal .sk{animation:tc-stamp .5s cubic-bezier(.2,1.5,.3,1) .08s both}
@keyframes tc-stamp{0%{opacity:0; transform:scale(1.8) rotate(-12deg)}62%{opacity:1; transform:scale(.93) rotate(0)}100%{opacity:1; transform:scale(1)}}

/* the cascade: sequential teal confirmations after the seal */
.tc-cascade{display:none; flex-direction:column; gap:8px; margin-top:14px; padding-top:13px;
  border-top:1px solid rgba(20,184,166,.2)}
.gate.approved.tc-ceremony .tc-cascade{display:flex}
.tc-cstep{display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11.5px;
  color:var(--teal-300); letter-spacing:.03em}
.tc-cstep i{width:7px; height:7px; border-radius:50%; flex:none; background:var(--teal);
  box-shadow:0 0 9px var(--teal-glow)}
.tc-cstep .tln{flex:1 1 auto; height:1px; transform-origin:left;
  background:linear-gradient(90deg, rgba(20,184,166,.35), transparent)}
.tc-on .gate.approved.tc-ceremony .tc-cstep{opacity:0; animation:tc-cstep .45s cubic-bezier(.2,.7,.2,1) both}
.tc-on .gate.approved.tc-ceremony .tc-cstep .tln{transform:scaleX(0); animation:tc-rulein .5s ease both}
.tc-on .gate.approved.tc-ceremony .tc-cstep:nth-child(1),
.tc-on .gate.approved.tc-ceremony .tc-cstep:nth-child(1) .tln{animation-delay:.5s}
.tc-on .gate.approved.tc-ceremony .tc-cstep:nth-child(2),
.tc-on .gate.approved.tc-ceremony .tc-cstep:nth-child(2) .tln{animation-delay:.82s}
.tc-on .gate.approved.tc-ceremony .tc-cstep:nth-child(3),
.tc-on .gate.approved.tc-ceremony .tc-cstep:nth-child(3) .tln{animation-delay:1.14s}
@keyframes tc-cstep{from{opacity:0; transform:translateX(-8px)}to{opacity:1; transform:none}}

/* ---------------------------------------------------------------------------
   5. STEP 6: the trail plays itself (pips ignite, rows fade, line draws)
   --------------------------------------------------------------------------- */
.tc-on .receipt.tc-armed .rrow .ts,
.tc-on .receipt.tc-armed .rrow .ev{opacity:0}
.tc-on .receipt.tc-armed .rrow .pip i{opacity:0; transform:scale(.4)}
.tc-on .receipt.tc-armed .rrow .pip::after{transform:scaleY(0); transform-origin:top}
.tc-on .receipt.tc-armed + .rstats{opacity:0}

.tc-on .receipt.tc-play .rrow:nth-child(1){--d:.1s}
.tc-on .receipt.tc-play .rrow:nth-child(2){--d:.38s}
.tc-on .receipt.tc-play .rrow:nth-child(3){--d:.66s}
.tc-on .receipt.tc-play .rrow:nth-child(4){--d:.94s}
.tc-on .receipt.tc-play .rrow:nth-child(5){--d:1.22s}
.tc-on .receipt.tc-play .rrow:nth-child(6){--d:1.5s}
.tc-on .receipt.tc-play .rrow:nth-child(7){--d:1.78s}
.tc-on .receipt.tc-play .rrow .pip i{animation:tc-pip .42s cubic-bezier(.3,1.5,.5,1) var(--d) both}
.tc-on .receipt.tc-play .rrow .pip::after{animation:tc-linedraw .3s ease calc(var(--d) + .14s) both}
.tc-on .receipt.tc-play .rrow .ts{animation:tc-evin .4s ease var(--d) both}
.tc-on .receipt.tc-play .rrow .ev{animation:tc-evin .45s cubic-bezier(.2,.7,.2,1) calc(var(--d) + .06s) both}
.tc-on .receipt.tc-play + .rstats{animation:tc-settle .6s cubic-bezier(.2,.7,.2,1) 2.15s both}
@keyframes tc-pip{from{opacity:0; transform:scale(.4)}60%{opacity:1; transform:scale(1.45)}to{opacity:1; transform:scale(1)}}
@keyframes tc-linedraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes tc-evin{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* ---------------------------------------------------------------------------
   6. HERO IGNITION (one-shot on load) + FINALE ambient halo drift
   --------------------------------------------------------------------------- */
.tc-on .phero.tc-hero-ignite .field{animation:tc-fieldin 1.5s cubic-bezier(.2,.7,.2,1) both}
@keyframes tc-fieldin{from{opacity:0; transform:scale(.86)}to{opacity:1; transform:none}}
.tc-on .phero.tc-hero-ignite .eyebrow{animation:tc-kin .5s .12s ease both}
.tc-on .phero.tc-hero-ignite h1{animation:tc-rise .7s .22s cubic-bezier(.2,.7,.2,1) both}
.tc-on .phero.tc-hero-ignite .sub{animation:tc-rise .7s .36s cubic-bezier(.2,.7,.2,1) both}
.tc-on .phero.tc-hero-ignite .cta-row{animation:tc-rise .7s .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes tc-rise{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}

/* the finale band is a terminal, watched surface: a slow ambient drift only */
.tc-on #step-7 .band .halo-p{animation:tc-drift 16s ease-in-out infinite alternate}
@keyframes tc-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6%,4%,0) scale(1.12)}}

/* ---------------------------------------------------------------------------
   7. mobile + reduced motion
   --------------------------------------------------------------------------- */
@media(max-width:680px){
  .tc-constellation{height:212px}
  .tc-node{padding:5px 8px 5px 6px; gap:6px; border-radius:9px}
  .tc-node b{font-size:10px}
  .tc-node i{display:none}
  .tc-node .ic{width:20px; height:20px; border-radius:6px}
  .tc-node .ic svg{width:12px; height:12px}
  .tc-elabel{display:none}
  .tc-titlecard .tc-k1{font-size:11px}
  .tc-titlecard .tc-k2{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  /* belt and braces: tc-on is never set under reduced motion, but if any
     armed/animated state leaks, land everything on its static final */
  .tc-titlecard{display:none!important}
  .tc-node,.tc-elive,.tc-elabel,.tc-cstep,.tc-cstep .tln,
  .rrow .ts,.rrow .ev,.rrow .pip i,.rrow .pip::after,.rstats,
  .app-frame,.tp-note,.phero .field,.phero h1,.phero .sub,.phero .eyebrow,.phero .cta-row{
    animation:none!important; transition:none!important; opacity:1; transform:none}
  .tc-node{transform:translate(-50%,-50%)}
  #step-7 .band .halo-p{animation:none!important}
}