/* Ignition: the prompt descends into the core, the core ignites, five agents go to work. */
:root{--ease-out:cubic-bezier(0.23,1,0.32,1)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

.hero{height:500vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg)}
.stage .nav{position:absolute;top:0;left:0;right:0}
.gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* Fold copy (left half; no WebGL ever drawn here while it is visible) */
.copy{position:absolute;left:96px;top:228px;width:560px;z-index:3;will-change:transform,opacity}
.copy h1{font:600 68px/1.02 var(--sans);letter-spacing:-0.03em;text-wrap:balance;color:var(--paper)}
.copy .lede{margin-top:28px;max-width:470px;font:400 19px/1.55 var(--sans);color:var(--paper-2)}
.ctas{display:flex;gap:12px;margin-top:40px}

/* Prompt bar */
.prompt{position:absolute;left:0;top:0;width:560px;z-index:4;will-change:transform,opacity;transform-origin:50% 50%}
.prompt-ask{font:500 14px/1 var(--sans);color:var(--paper-3);margin:0 0 12px 4px}
.prompt-bar{display:flex;align-items:center;gap:2px;height:64px;padding:0 10px 0 22px;border-radius:18px;border:1px solid #2c3036;background:#0d0f12;font:400 17px/1.3 var(--sans);color:var(--paper)}
.prompt-text{white-space:nowrap;overflow:hidden}
.caret{width:2px;height:22px;background:var(--ember);margin-left:1px;flex:none}
.prompt.typed .caret{opacity:0}
.send{margin-left:auto;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ember);color:#130705}
.prompt-note{margin:14px 0 0 4px;font:400 13px/1.4 var(--sans);color:var(--paper-3)}

/* Agent labels */
.agent{position:absolute;z-index:4;display:flex;flex-direction:column;gap:3px;opacity:0;will-change:transform,opacity;white-space:nowrap}
.agent,.node,.note{text-shadow:0 0 4px var(--bg),0 0 8px var(--bg),0 0 12px var(--bg)} /* knocks hairlines out behind labels; not a glow */
.agent b{font:600 15px/1 var(--sans);color:var(--hue);letter-spacing:0.005em}
.agent span{font:400 13px/1.3 var(--sans);color:var(--paper-2)}
.agent .dot{display:none}
.agent.r{align-items:flex-end;text-align:right}

/* Nodes (Flow sources, Merchant products) */
.node{position:absolute;z-index:4;font:500 13px/1 var(--sans);color:var(--paper-3);opacity:0;white-space:nowrap;transition:color 200ms ease}
.node.lit{color:var(--paper)}
.node.sku{transform:translateX(-50%)}
.note{position:absolute;z-index:4;width:270px;font:400 13px/1.45 var(--sans);color:var(--paper-2);opacity:0}
.note b{display:block;font:600 13px/1 var(--sans);color:var(--pilot);margin-bottom:6px}

/* Answer card: no glow, no fill colour; hairline border on the ground */
.card{position:absolute;z-index:4;width:424px;padding:24px 26px 22px;border-radius:16px;border:1px solid var(--line);background:rgba(247,246,245,0.025);opacity:0;will-change:transform,opacity;overflow:hidden}
.card header{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card .model{font:600 14px/1 var(--sans);color:var(--paper)}
.card .ex{font:400 12px/1 var(--sans);color:var(--paper-3)}
.card .q{margin-top:18px;font:400 italic 21px/1.3 var(--serif);color:var(--paper-2)}
.ans{margin-top:18px;position:relative}
.wrong{font:400 17px/1.5 var(--sans);color:var(--paper);transition:color 250ms ease}
.strike{position:relative;background-image:linear-gradient(var(--ember),var(--ember));background-repeat:no-repeat;background-position:0 58%;background-size:var(--s,0%) 2px;color:inherit}
.card.flagged .strike{color:#ffb3a5}
.right{max-height:0;opacity:0;overflow:hidden;font:500 17px/1.5 var(--sans);color:var(--echo);transition:opacity 250ms var(--ease-out),max-height 250ms var(--ease-out),margin 250ms var(--ease-out)}
.card.fixed .right{max-height:60px;opacity:1;margin-top:10px}
.card.fixed .wrong{color:var(--paper-3)}
.scan{position:absolute;left:0;right:0;top:0;height:1px;background:var(--scout);opacity:0;pointer-events:none}
.models{max-height:0;overflow:hidden;opacity:0;border-top:1px solid transparent;transition:opacity 250ms ease,max-height 250ms var(--ease-out),margin 250ms var(--ease-out),padding 250ms var(--ease-out),border-color 250ms ease}
.card.checking .models{max-height:120px;opacity:1;margin-top:22px;padding-top:16px;border-top-color:var(--line)}
.models ul{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;padding:0}
.models li{position:relative;padding-left:14px;font:500 13px/1.4 var(--sans);color:var(--paper-3);transition:color 200ms ease}
.models li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:#2c3036;transition:background-color 200ms ease}
.models li.ok{color:var(--paper)}
.models li.ok::before{background:var(--echo)}
.rechecked{margin-top:12px;font:600 14px/1 var(--sans);color:var(--echo);opacity:0;transition:opacity 250ms var(--ease-out)}
.card.done .rechecked{opacity:1}

/* WebGL failure fallback: plain hue dots stand in for the lights */
.no-gl .agent .dot{display:block;width:10px;height:10px;border-radius:50%;background:var(--hue);margin-bottom:6px}

@media (prefers-reduced-motion:reduce){
  .right,.models,.rechecked,.wrong,.node,.models li,.models li::before{transition:none}
}