/* ============================================================================
   swarm-scene.css — chrome for the TuendaAI "watch it work" scene pages.
   Pairs with swarm-scene.js. Reuses ward.css tokens. transform/opacity only.
   ========================================================================== */

/* sub-page hero header */
.scenehead{padding:144px 0 26px;background:var(--ink);position:relative;overflow:hidden}
.scenehead .eyebrow{display:flex;align-items:center;gap:10px}
.scenehead .eyebrow .ix{font-family:var(--mono);color:var(--d-4)}
.scenehead h1{font-size:clamp(32px,5vw,60px);letter-spacing:-.045em;font-weight:300;line-height:1.02;margin:18px 0 0;max-width:18ch}
.scenehead h1 em{font-style:normal;color:var(--amber)}
.scenehead .sub{margin-top:18px;font-size:clamp(15.5px,1.4vw,18.5px);color:var(--d-2);max-width:58ch;line-height:1.55}

/* the cinematic stage */
.stage-wrap{padding:8px 0 30px;background:var(--ink)}
.stage{position:relative;border:1px solid var(--line-d);border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#0b0c0f,#08090b);
  box-shadow:0 50px 130px -50px rgba(0,0,0,.9),0 0 80px -40px rgba(255,176,0,.14)}
.stage__bar{display:flex;align-items:center;gap:9px;padding:11px 15px;border-bottom:1px solid var(--line-d2);background:rgba(242,238,228,.015)}
.stage__bar .di{display:flex;gap:5px}.stage__bar .di i{width:8px;height:8px;border-radius:2px;background:var(--ink-4)}
.stage__bar b{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--d-2)}
.stage__bar .tag{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--amber);display:flex;align-items:center;gap:6px;text-transform:uppercase}
.stage__bar .tag i{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 7px var(--amber);animation:pulse 2.4s var(--ease) infinite}
@media(prefers-reduced-motion:reduce){.stage__bar .tag i{animation:none}}
.stage__canvas{position:relative;width:100%;aspect-ratio:16/9;background:#08090b}
.stage__canvas canvas{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:680px){.stage__canvas{aspect-ratio:4/5}}
.stage__legend{position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--d-3);line-height:1.7;pointer-events:none}
.stage__legend b{color:var(--d-2);font-weight:500}
.stage__chip{position:absolute;right:14px;top:12px;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,176,0,.8);display:flex;align-items:center;gap:6px;pointer-events:none}
.stage__chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);box-shadow:0 0 6px var(--amber)}
.stage__foot{font-family:var(--mono);font-size:10px;color:var(--d-3);text-align:center;margin-top:14px;letter-spacing:.03em}

/* sequencing captions beneath the stage */
.scene-caps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d);border-radius:9px;overflow:hidden;margin-top:18px}
.scene-caps.five{grid-template-columns:repeat(5,1fr)}
@media(max-width:760px){.scene-caps,.scene-caps.five{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.scene-caps,.scene-caps.five{grid-template-columns:1fr}}
.cap{background:var(--ink-2);padding:16px 16px 18px;position:relative;transition:background .4s var(--ease)}
.cap[data-cap]::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--amber);transition:width .45s var(--ease)}
.cap.on{background:rgba(255,176,0,.05)}
.cap.on[data-cap]::before{width:100%}
.cap .n{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--d-3);text-transform:uppercase}
.cap.on .n{color:var(--amber)}
.cap h4{font-size:15px;letter-spacing:-.02em;margin:9px 0 5px;color:var(--d-2);transition:color .4s}
.cap.on h4{color:var(--d-1)}
.cap p{font-size:12.5px;line-height:1.5;color:var(--d-3)}

/* the 5-scene switcher */
.scenenav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 2px}
.scenenav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--d-2);border:1px solid var(--line-d);border-radius:100px;padding:8px 15px;
  display:inline-flex;align-items:center;gap:8px;transition:border-color .25s,color .25s,background .25s}
.scenenav a .d{width:6px;height:6px;border-radius:50%;background:var(--d-4)}
.scenenav a:hover{color:var(--d-1);border-color:var(--l-3)}
.scenenav a.cur{color:#0A0A0B;background:var(--amber);border-color:var(--amber);font-weight:500}
.scenenav a.cur .d{background:#0A0A0B}

/* prev / next scene rail */
.scene-rail{display:flex;justify-content:space-between;gap:14px;margin-top:34px;flex-wrap:wrap}
.scene-rail a{font-family:var(--mono);font-size:12.5px;color:var(--d-2);display:flex;flex-direction:column;gap:4px;transition:color .2s}
.scene-rail a:hover{color:var(--d-1)}
.scene-rail a .k{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--d-4)}
.scene-rail a.nx{text-align:right;align-items:flex-end;margin-left:auto}