/* AI Edge v2 — cinematic layer. Loads AFTER ae-styles.css (overrides + new). */

/* extra accent preset support is via --accent only; nothing to add here */

/* ---------- boot sequence ---------- */
body.booting{ overflow:hidden; }
.boot{
  position:fixed; inset:0; z-index:9999; background:oklch(0.13 0.012 250);
  display:flex; align-items:center; justify-content:center; padding:24px;
  font-family:var(--font-mono);
}
.boot.out{ animation:bootOut .7s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes bootOut{ to{ opacity:0; transform:scale(1.04); visibility:hidden; } }
.boot-box{ width:min(560px,100%); }
.boot-top{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; margin-bottom:20px; }
.boot-top .glyph{ width:18px; height:18px; color:var(--accent); }
.boot-top .skip{ margin-left:auto; color:var(--faint); background:none; border:1px solid var(--line); border-radius:6px; padding:3px 10px; font-family:var(--font-mono); font-size:11.5px; transition:.15s; }
.boot-top .skip:hover{ color:var(--text); border-color:var(--accent-line); }
.boot-log{ font-size:13.5px; line-height:1.95; min-height:230px; }
.boot-line{ display:flex; align-items:baseline; gap:10px; opacity:0; }
.boot-line.show{ opacity:1; }
.boot-line .mk{ color:var(--accent); width:48px; flex:none; }
.boot-line .tx{ color:var(--text); }
.boot-line .vv{ color:var(--faint); margin-left:auto; padding-left:14px; text-align:right; }
.boot-line.last .tx{ color:var(--accent); }
.boot-bar{ margin-top:24px; height:3px; border-radius:3px; background:var(--bg-3); overflow:hidden; }
.boot-bar i{ display:block; height:100%; width:0; background:var(--accent); transition:width .25s linear; }
.boot-cursor{ display:inline-block; width:8px; height:14px; background:var(--accent); vertical-align:-2px; animation:blink 1s steps(1) infinite; }

/* ---------- cursor glow ---------- */
.cursor-glow{ position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%;
  pointer-events:none; z-index:1; opacity:0; transition:opacity .4s;
  background:radial-gradient(circle, color-mix(in oklab, var(--accent) 22%, transparent), transparent 62%);
  mix-blend-mode:screen; will-change:transform; }
@media (pointer:fine){ .cursor-glow.on{ opacity:.6; } }
@media (pointer:coarse){ .cursor-glow{ display:none; } }
[data-motion="off"] .cursor-glow{ display:none; }

/* ---------- particle hero (v2) ---------- */
.phero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  padding:90px 0 70px; }
.phero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.phero-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 38%, transparent 38%, var(--bg) 100%); }
.phero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(46% 52% at 32% 46%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 72%); }
.phero-inner{ position:relative; z-index:2; width:100%; }
.phero h1{ font-size:clamp(58px,11vw,140px); font-weight:700; letter-spacing:-0.045em; line-height:0.9; margin:18px 0 0; }
.phero h1 .mk{ color:var(--accent); }
.phero .hero-tag{ font-size:clamp(18px,2.3vw,24px); }
.phero-scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:7px; color:var(--faint); font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; }
.phero-scroll .ln{ width:1px; height:30px; background:linear-gradient(var(--accent),transparent); animation:scrollLn 1.8s ease-in-out infinite; }
@keyframes scrollLn{ 0%,100%{ transform:scaleY(.4); opacity:.4; transform-origin:top; } 50%{ transform:scaleY(1); opacity:1; transform-origin:top; } }
@media (max-height:700px){ .phero-scroll{ display:none; } }

/* hero entrance (gated on booted) */
.phero .enter{ opacity:0; transform:translateY(26px); }
.phero.live .enter{ opacity:1; transform:none; transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.phero.live .enter.d1{ transition-delay:.08s; } .phero.live .enter.d2{ transition-delay:.18s; }
.phero.live .enter.d3{ transition-delay:.30s; } .phero.live .enter.d4{ transition-delay:.42s; }
[data-motion="off"] .phero .enter{ opacity:1 !important; transform:none !important; }

/* char reveal */
.cr{ display:inline-block; }
.cr .ch{ display:inline-block; opacity:0; transform:translateY(0.5em) rotateX(-40deg); transform-origin:bottom; }
.cr.in .ch{ opacity:1; transform:none; transition:opacity .5s, transform .55s cubic-bezier(.2,.8,.2,1); }
[data-motion="off"] .cr .ch{ opacity:1 !important; transform:none !important; }

/* ---------- tilt cards / magnetic ---------- */
.tilt{ transform-style:preserve-3d; transition:transform .18s ease-out; will-change:transform; }
.tilt .tilt-z{ transform:translateZ(28px); }
[data-motion="off"] .tilt{ transform:none !important; }

/* ---------- scroll-driven flow narrative ---------- */
.flow{ position:relative; }
.flow-sticky{ position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.flow-sticky > .wrap{ margin-top:auto; margin-bottom:auto; }
.flow-head{ margin-bottom:30px; }
.flow-rail{ position:relative; }
.flow-track{ position:relative; display:flex; align-items:stretch; gap:0; min-width:760px; }
.flow-track::before{ content:""; position:absolute; left:6%; right:6%; top:7px; height:2px; background:var(--line); }
.flow-prog{ position:absolute; left:6%; top:7px; height:2px; width:0; background:var(--accent);
  box-shadow:0 0 14px 1px var(--accent-line); z-index:1; }
.flow-token{ position:absolute; top:7px; width:14px; height:14px; border-radius:50%; background:var(--accent); z-index:3;
  transform:translate(-50%,-50%); box-shadow:0 0 0 5px var(--accent-dim), 0 0 22px 3px var(--accent-line); }
.flow-node{ position:relative; flex:1; min-width:120px; display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2; cursor:pointer; }
.flow-node:hover .flow-card{ opacity:1; border-color:var(--accent-line); }
.flow-node:hover .flow-dot{ border-color:var(--accent-line); }
.flow-dot{ width:13px; height:13px; border-radius:50%; background:var(--bg-3); border:2px solid var(--line); transition:.35s; }
.flow-node.lit .flow-dot{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 5px var(--accent-dim); }
.flow-card{ width:100%; max-width:150px; text-align:center; border:1px solid var(--line-soft); background:var(--bg-1); border-radius:11px; padding:12px 10px; transition:.35s; opacity:.5; }
.flow-node.lit .flow-card{ opacity:1; border-color:var(--accent-line); box-shadow:0 0 30px -10px var(--accent-dim); }
.flow-card .t{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
.flow-card .v{ font-size:13.5px; font-weight:600; margin-top:3px; }
.flow-card .s{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-top:2px; }
.flow-split-tag{ position:absolute; top:-14px; font-family:var(--font-mono); font-size:10px; color:var(--faint); }
.flow-cap{ margin-top:34px; min-height:78px; max-width:680px; }
.flow-cap .h{ font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--text); }
.flow-cap .t{ color:var(--muted); font-size:15px; margin-top:6px; line-height:1.6; }
.flow-rail-wrap{ overflow-x:auto; padding-bottom:6px; }
@media (max-width:760px){
  .flow-card .v{ font-size:12px; } .flow-cap .t{ font-size:14px; }
}

/* progress bar at very top of page */
.pbar{ position:fixed; top:0; left:0; height:2px; background:var(--accent); z-index:60; width:0; box-shadow:0 0 10px var(--accent-line); }

/* magnetic button needs inline-block wrapper */
.mag{ display:inline-flex; will-change:transform; }

/* ---------- video showcase ---------- */
.video-frame{ transition:transform .25s cubic-bezier(.2,.7,.2,1); transform-style:preserve-3d; }
.video-stage{ position:relative; line-height:0; }
.video-play{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  border:none; cursor:pointer; color:var(--text);
  background:radial-gradient(circle at 50% 46%, color-mix(in oklab,var(--bg) 20%, transparent), color-mix(in oklab,var(--bg) 62%, transparent));
  transition:opacity .3s; }
.video-play:hover .vp-btn{ transform:scale(1.06); }
.vp-btn{ position:relative; width:76px; height:76px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink); transition:transform .2s; box-shadow:0 14px 44px -10px var(--accent-line); }
.vp-btn svg{ width:30px; height:30px; margin-left:4px; }
.vp-btn::after{ content:""; position:absolute; inset:-1px; border-radius:50%; border:1.5px solid var(--accent); animation:vpRing 3.2s ease-out infinite; }
@keyframes vpRing{ 0%{ transform:scale(1); opacity:.4; } 70%{ opacity:0; } 100%{ transform:scale(1.4); opacity:0; } }
.vp-label{ font-family:var(--font-mono); font-size:13px; color:var(--muted); letter-spacing:.06em; }
[data-motion="off"] .vp-btn::after{ animation:none; opacity:0; }
[data-motion="off"] .video-frame{ transition:none; }

/* ---------- nav language switch ---------- */
.nav-end{ display:flex; align-items:center; gap:10px; }
.lang-seg{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:9px; overflow:hidden; height:38px; font-family:var(--font-mono); font-size:12.5px; }
.lang-seg button{ background:none; border:none; color:var(--faint); padding:0 11px; height:100%; cursor:pointer; transition:color .15s, background .15s; }
.lang-seg button:hover{ color:var(--text); }
.lang-seg button.on{ background:var(--accent-dim); color:var(--accent); }

/* smooth crossfade to mask reflow on language switch */
@keyframes langFade{ from{ opacity:.4; } to{ opacity:1; } }
.lang-swap{ animation:langFade .3s ease; }
[data-motion="off"] .lang-swap{ animation:none; }

/* ---------- Retrieval Trace (redesigned pipeline) ---------- */
.trace{ border:1px solid var(--line); border-radius:16px; background:var(--bg-1); overflow:hidden; }
.trace-head{ display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; padding:15px 20px; border-bottom:1px solid var(--line-soft); }
.trace-q{ font-family:var(--font-mono); font-size:13.5px; color:var(--text); display:flex; align-items:center; gap:9px; }
.trace-q b{ color:var(--accent); font-weight:600; }
.trace-q .arr{ color:var(--faint); }
.trace-total{ margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--faint); white-space:nowrap; }
.trace-body{ padding:14px 20px 16px; }
.trace-row{ display:grid; grid-template-columns:158px 1fr 150px; align-items:center; gap:16px; padding:7px 0;
  opacity:0; transform:translateY(7px); }
.trace-row.in{ opacity:1; transform:none; transition:opacity .4s, transform .4s; }
.trace-label{ display:flex; align-items:baseline; gap:9px; min-width:0; }
.trace-label .k{ font-family:var(--font-mono); font-size:13px; color:var(--text); white-space:nowrap; }
.trace-label .n{ font-size:11.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trace-track{ position:relative; height:20px; border-radius:6px; background:var(--bg-2); border:1px solid var(--line-soft); }
.trace-bar{ position:absolute; top:-1px; bottom:-1px; left:0; width:0; border-radius:6px;
  background:var(--accent-dim); border:1px solid var(--accent-line); transition:width .55s cubic-bezier(.3,.8,.3,1); }
.trace-row.in .trace-bar{ width:var(--w); }
.trace-bar.warn{ background:var(--warn-dim); border-color:var(--warn-line); }
.trace-res{ font-family:var(--font-mono); font-size:12px; color:var(--muted); text-align:right; display:flex; flex-direction:column; gap:1px; line-height:1.35; }
.trace-res.warn{ color:var(--warn); }
.trace-res .d{ color:var(--faint); font-size:10.5px; }
.trace-verdict{ display:flex; align-items:center; gap:10px; padding:14px 20px; border-top:1px solid var(--line-soft); font-size:13.5px;
  opacity:0; transition:opacity .5s; }
.trace-verdict.in{ opacity:1; }
.trace-verdict.ok{ color:var(--accent); }
.trace-verdict.warn{ color:var(--warn); }
[data-motion="off"] .trace-row{ opacity:1; transform:none; }
[data-motion="off"] .trace-bar{ transition:none; }
[data-motion="off"] .trace-verdict{ opacity:1; }
@media (max-width:620px){
  .trace-row{ grid-template-columns:90px 1fr 86px; gap:10px; }
  .trace-label .n{ display:none; }
  .trace-res{ font-size:11px; }
  .trace-label .k{ font-size:11.5px; }
}