/* The AI world: pinned 3D hero, detection overlay, chapters. */
.world { position: relative; height: 100vh; height: 100svh; min-height: 620px; background: #0a0d33; }
.world__stick { position: relative; height: 100%; overflow: hidden; --pov: 0; --p: 0; background: #0a0d33 center / cover no-repeat; }
.no-webgl .world__stick, .world__stick { background-image: var(--poster, none); }
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease; }
.world-ready #world { opacity: 1; }
.world__ov { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.world__vig { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 55% 45%, transparent 50%, rgba(5,6,32,.7) 100%),
    linear-gradient(90deg, rgba(8,10,42,calc(.82 - var(--pov) * .55)) 0%, rgba(8,10,42,calc(.42 - var(--pov) * .3)) 38%, transparent 66%),
    linear-gradient(0deg, rgba(8,10,42,.85) 0%, transparent 28%); }
.world__grain { position: absolute; inset: 0; pointer-events: none; opacity: calc(.05 + var(--pov) * .09); mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 3px); }
.world__pov { position: absolute; inset: 14px; border: 1px solid rgba(70,230,255,.35); border-radius: 18px; opacity: var(--pov); pointer-events: none; box-shadow: inset 0 0 120px rgba(70,230,255,.12); }
.world__pov::before, .world__pov::after { content: ""; position: absolute; width: 30px; height: 30px; border: 2px solid #46e6ff; }
.world__pov::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; border-radius: 18px 0 0 0; }
.world__pov::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; border-radius: 0 0 18px 0; }

/* detections */
.det { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; will-change: transform, width, height; }
.det::before { content: ""; position: absolute; inset: 0; background: var(--c); opacity: .08; }
.det i { position: absolute; width: 14px; height: 14px; border: 2px solid var(--c); filter: drop-shadow(0 0 6px var(--c)); }
.det i:nth-child(1) { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.det i:nth-child(2) { right: -1px; top: -1px; border-left: 0; border-bottom: 0; }
.det i:nth-child(3) { left: -1px; bottom: -1px; border-right: 0; border-top: 0; }
.det i:nth-child(4) { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.det b { position: absolute; left: -1px; top: -25px; font: 600 11px/1 "JetBrains Mono", monospace; letter-spacing: .07em; text-transform: uppercase; padding: 6px 9px; background: var(--c); color: #051234; border-radius: 4px 4px 4px 0; white-space: nowrap; }
.det--human { --c: #46e6ff; } .det--vehicle { --c: #b98bff; } .det--ignored { --c: #9aa3c7; } .det--alert { --c: #ffb92e; }
.det--ignored::before { opacity: .03; } .det--ignored b { background: rgba(154,163,199,.85); }
.det--alert b::after { content: " · alert"; }
.wlabel { position: absolute; left: 0; top: 0; font: 600 11px/1 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: rgba(10,13,51,.72); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); color: #d3e7ff; white-space: nowrap; margin: -32px 0 0 8px; opacity: 0; }
.wlabel--wire { color: #e4cbff; border-color: rgba(185,139,255,.5); }

/* HUD + toast */
.whud { position: absolute; left: clamp(18px, 3vw, 40px); bottom: clamp(150px, 20vh, 220px); display: flex; gap: 10px; align-items: center; font: 500 12px/1 "JetBrains Mono", monospace; color: #cfe0ff; }
.whud > span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(8,10,42,.6); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); }
.whud i { width: 8px; height: 8px; border-radius: 50%; background: #ff5470; box-shadow: 0 0 10px #ff5470; animation: wrec 1.4s infinite; }
@keyframes wrec { 50% { opacity: .35; } }
.wtoast { position: absolute; right: clamp(16px, 3vw, 44px); top: clamp(92px, 14vh, 130px); width: min(330px, calc(100% - 32px)); display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px;
  background: rgba(14,16,58,.78); border: 1px solid rgba(255,185,46,.5); backdrop-filter: blur(16px); box-shadow: 0 24px 60px -20px rgba(0,0,0,.7), 0 0 40px -10px rgba(255,185,46,.5);
  opacity: 0; transform: translateY(-14px) scale(.97); transition: opacity .4s, transform .5s cubic-bezier(.2,.9,.3,1.2); }
.wtoast.is-on { opacity: 1; transform: none; }
.wtoast__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #ffb92e, #ff7a45); color: #2a1200; flex: none; }
.wtoast__ic .ico { width: 20px; height: 20px; }
.wtoast small { display: block; font: 600 10px/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: #ffd48a; margin-bottom: 5px; }
.wtoast b { display: block; color: #fff; font: 600 15px/1.25 Sora, sans-serif; }
.wtoast__sub { color: #aab6e0; font-size: 12.5px; }

/* chapter copy */
.wcopy { position: absolute; left: clamp(20px, 5vw, 84px); bottom: clamp(230px, 31vh, 330px); max-width: min(720px, calc(100% - 40px)); color: #fff; opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.world__stick[data-ch="1"] .wcopy[data-c="1"], .world__stick[data-ch="2"] .wcopy[data-c="2"], .world__stick[data-ch="3"] .wcopy[data-c="3"] { opacity: 1; transform: none; pointer-events: auto; }
.world__scroll { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font: 600 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); transition: opacity .4s; }
.world__scroll i { width: 1px; height: 38px; background: linear-gradient(#fff, transparent); animation: wscroll 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes wscroll { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.world__stick:not([data-ch="1"]) .world__scroll { opacity: 0; }
.wprog { position: absolute; right: clamp(16px, 2.4vw, 34px); top: 50%; transform: translateY(-50%); display: grid; gap: 12px; }
.wprog i { width: 3px; height: 34px; border-radius: 3px; background: rgba(255,255,255,.22); transition: background .4s, height .4s; }
.world__stick[data-ch="1"] .wprog i:nth-child(1), .world__stick[data-ch="2"] .wprog i:nth-child(2), .world__stick[data-ch="3"] .wprog i:nth-child(3) { background: #46e6ff; height: 52px; box-shadow: 0 0 12px #46e6ff; }

/* ticker */
.wticker { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 0; overflow: hidden; border-top: 1px solid rgba(255,255,255,.14); background: rgba(8,10,42,.55); backdrop-filter: blur(10px); }
.wticker__row { display: flex; gap: 56px; width: max-content; animation: wmarq 46s linear infinite; font: 600 12px/1 "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: rgba(214,226,255,.78); }
.wticker__row span { display: inline-flex; align-items: center; gap: 56px; white-space: nowrap; }
.wticker__row span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #46e6ff; box-shadow: 0 0 10px #46e6ff; }
@keyframes wmarq { to { transform: translateX(-50%); } }

@media (max-width: 760px) {
  .wcopy { bottom: 190px; }
  .whud { display: none; }
  .wprog { display: none; }
  .world__scroll { bottom: 82px; }
  .wtoast { top: 78px; }
  .det b { font-size: 10px; padding: 5px 7px; top: -22px; }
}
@media (prefers-reduced-motion: reduce) { .wticker__row, .world__scroll i { animation: none; } .world { height: 100vh; } }