@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, figure, blockquote { margin: 0; }
  button, a { font: inherit; }
  button { color: inherit; }
}

/* Pass 2: the atmosphere is an instrument, not a texture. */
:root { --gust-level: .46; --visibility-level: .7; }
body {
  background:
    radial-gradient(ellipse at 83% 9%, rgba(187,117,49,.18), transparent 31rem),
    linear-gradient(112deg, transparent 0 47%, rgba(201,154,82,.025) 47.2% 47.4%, transparent 47.6%),
    #14110c;
}
body::after {
  content:""; position:fixed; inset:0; z-index:17; pointer-events:none;
  background:
    radial-gradient(ellipse at 84% 38%, rgba(193,126,58,.22), transparent 32%),
    linear-gradient(96deg, rgba(42,26,14,.06), rgba(185,120,53,.13), rgba(27,18,11,.02));
  opacity:calc(var(--gust-level) * .62); transition:opacity .12s linear;
}
#weather { mix-blend-mode:normal; opacity:1; }
.storm-announcer { position:fixed; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.storm-veil {
  inset:-16%; overflow:hidden; background:#9f6c34;
  transform:translateX(-125%) skewX(-11deg); box-shadow:0 0 12vw rgba(207,154,82,.7);
}
.storm-veil::before { opacity:.8; background:repeating-linear-gradient(101deg, transparent 0 3px, rgba(255,229,177,.18) 3px 4px, transparent 4px 11px); }
.storm-veil::after { filter:blur(24px); background:linear-gradient(90deg,#3c2514 0,#b98243 21%,#d0a05b 52%,#89572d 83%,#342113 100%); opacity:.9; }
.veil-sweep { position:absolute; z-index:2; width:58%; height:170%; top:-35%; border-radius:50%; filter:blur(34px); opacity:.6; }
.veil-sweep-a { left:-8%; background:rgba(229,180,102,.48); transform:rotate(14deg); }
.veil-sweep-b { right:-14%; background:rgba(81,49,25,.5); transform:rotate(-11deg); }
.veil-lock { position:relative; z-index:4; width:min(920px,75vw); display:grid; grid-template-columns:1fr auto; align-items:end; padding:1.25rem 0; border-block:1px solid rgba(24,17,10,.45); color:rgba(22,15,9,.72); }
.veil-lock small { grid-column:1/-1; font-size:.62rem; font-weight:800; letter-spacing:.28em; }
.veil-lock span { font:400 clamp(4.8rem,13vw,12rem)/.72 var(--display); letter-spacing:-.02em; }
.veil-lock b { font:400 clamp(4rem,9vw,8rem)/.75 var(--display); }
body.is-whiteout .storm-veil { animation:swallow-pass2 4.15s cubic-bezier(.76,0,.17,1) both; }
body.is-whiteout main, body.is-whiteout .site-header { animation:camera-impact-pass2 .24s steps(2) 2; }
body.is-whiteout::after { opacity:.9; }
@keyframes swallow-pass2 {
  0%{opacity:0;transform:translateX(-125%) skewX(-11deg)}
  13%{opacity:.55;transform:translateX(-58%) skewX(-9deg)}
  25%{opacity:1;transform:translateX(-8%) skewX(-3deg)}
  36%,67%{opacity:1;transform:translateX(0) skewX(0)}
  78%{opacity:.92;transform:translateX(18%) skewX(2deg)}
  100%{opacity:0;transform:translateX(125%) skewX(11deg)}
}
@keyframes camera-impact-pass2 { 0%,100%{transform:translate(0)}25%{transform:translate(-4px,2px)}50%{transform:translate(3px,-2px)}75%{transform:translate(-1px,1px)} }

.hero { min-height:max(820px,100svh); background:#0d0b08; }
.hero::before { z-index:-1; background:linear-gradient(90deg,rgba(8,7,5,.94) 0 24%,rgba(8,7,5,.38) 50%,transparent 74%),linear-gradient(0deg,#14110c 0,rgba(12,9,6,.48) 26%,transparent 60%); }
.hero::after { content:"FRONT  /  KHARIF  /  04:12"; position:absolute; z-index:1; right:-1.2rem; top:45%; color:rgba(231,184,108,.3); font:400 .61rem/1 var(--body); letter-spacing:.32em; transform:rotate(90deg); }
.film-frame video { filter:sepia(.14) saturate(.92) contrast(calc(1.02 + var(--visibility-level) * .18)) brightness(calc(.48 + var(--visibility-level) * .42)); }
.film-scrim { background:radial-gradient(circle at 68% 57%,transparent 6%,rgba(8,6,4,.1) 36%,rgba(8,6,4,.82) 100%),linear-gradient(90deg,rgba(8,6,4,.95) 0 22%,rgba(8,6,4,.35) 52%,transparent 75%); }
.hero-reticle { position:absolute; z-index:1; left:58%; top:35%; width:min(320px,25vw); color:rgba(234,211,170,.6); font-size:.52rem; letter-spacing:.17em; }
.hero-reticle i { display:block; height:86px; border-left:1px solid rgba(125,255,143,.6); border-bottom:1px solid rgba(125,255,143,.6); transform:skewX(-24deg); filter:drop-shadow(0 0 5px rgba(125,255,143,.5)); }
.hero-reticle span { display:block; margin-top:.55rem; }
.hero-reticle b { position:absolute; right:0; bottom:-.25rem; color:rgba(125,255,143,.72); font:400 1.6rem/1 var(--display); }
.hero-copy { max-width:min(820px,63vw); }
.hero h1 { text-wrap:nowrap; text-shadow:0 5px 30px rgba(18,12,7,.7),0 0 70px rgba(177,111,47,.16); }
.hero-deck { max-width:560px; }
.telemetry { border-color:rgba(234,211,170,.4); background:linear-gradient(105deg,rgba(14,11,8,.83),rgba(42,29,17,.47)); box-shadow:18px 18px 0 rgba(8,6,4,.28); }
.gust-index { position:absolute; z-index:2; right:clamp(1.25rem,4vw,4rem); top:30%; width:210px; display:grid; grid-template-columns:1fr auto; gap:.45rem; color:#a99270; font-size:.52rem; letter-spacing:.18em; }
.gust-index i { grid-column:1/-1; height:4px; padding:1px; border:1px solid rgba(234,211,170,.24); }
.gust-index i b { display:block; width:calc(var(--gust-level) * 100%); height:100%; background:var(--green); box-shadow:0 0 9px rgba(125,255,143,.55); transition:width .12s linear; }
.gust-index em { justify-self:end; color:var(--green); font-style:normal; }

.dispatch,.formation,.navigation,.signals,.after { isolation:isolate; }
.dispatch::before,.formation::before,.navigation::before,.signals::before,.after::before { content:""; position:absolute; z-index:-1; left:50%; top:4rem; width:100vw; height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,var(--line),transparent); }
.dispatch-lead h2,.formation h2,.signals h2 { text-wrap:balance; }
.passage-tape { margin-top:1.2rem; display:grid; grid-template-columns:repeat(4,1fr); background:#0d0b08; border-inline:1px solid var(--line); }
.passage-tape span { min-height:82px; display:flex; flex-direction:column; justify-content:center; padding:1rem 1.25rem; border-block:1px solid var(--line); color:#968263; font-size:.57rem; letter-spacing:.12em; text-transform:uppercase; }
.passage-tape span+span { border-left:1px solid var(--line); }
.passage-tape b { color:var(--sand-hot); font:400 1.85rem/1 var(--display); }

.convoy-map { background:radial-gradient(ellipse at 62% 34%,rgba(201,154,82,.15),transparent 31%),repeating-linear-gradient(107deg,transparent 0 31px,rgba(231,184,108,.022) 31px 32px),linear-gradient(rgba(231,184,108,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(231,184,108,.045) 1px,transparent 1px),#100d09; background-size:auto,auto,40px 40px,40px 40px,auto; box-shadow:inset 0 0 100px rgba(0,0,0,.42); }
.convoy-map::after { content:"LAST CONFIRMED / 04:36:20"; position:absolute; right:2rem; bottom:2rem; color:rgba(201,154,82,.3); font-size:.55rem; letter-spacing:.2em; }
.route { border-left-style:solid; background:repeating-linear-gradient(0deg,rgba(125,255,143,.5) 0 5px,transparent 5px 14px); opacity:.75; animation:route-live 1.8s linear infinite; }
@keyframes route-live { to{background-position:0 -28px} }
.vehicle { backdrop-filter:blur(4px); box-shadow:8px 9px 0 rgba(0,0,0,.18); }
.vehicle::before { content:""; position:absolute; width:5px; height:5px; right:8px; top:8px; border:1px solid rgba(125,255,143,.6); }
.vehicle.is-active { box-shadow:0 0 0 1px rgba(125,255,143,.35),12px 15px 28px rgba(0,0,0,.4); }
.vehicle.is-active::before { width:7px; height:7px; border:0; }
.map-readout em { color:var(--green); font-style:normal; }
.map-readout>i { display:block; height:4px; margin-top:.65rem; background:rgba(125,255,143,.1); }
.map-readout>i b { display:block; height:100%; background:var(--green); box-shadow:0 0 8px rgba(125,255,143,.5); transition:width .45s cubic-bezier(.2,.8,.2,1); }

.notes-panel { perspective:1000px; }
.field-note { border:1px solid rgba(66,43,22,.24); background:linear-gradient(112deg,rgba(255,242,205,.18),transparent 27%),repeating-linear-gradient(97deg,transparent 0 3px,rgba(67,43,20,.06) 3px 4px),#cbae7d; box-shadow:22px 28px 0 rgba(6,5,3,.18),22px 34px 70px rgba(0,0,0,.32); }
.field-note::before { content:""; position:absolute; inset:8px; border:1px solid rgba(73,47,23,.11); pointer-events:none; }
.field-note::after { opacity:.52; mix-blend-mode:multiply; background:radial-gradient(circle at 83% 18%,rgba(91,53,23,.16),transparent 24%),repeating-linear-gradient(97deg,transparent 0 3px,rgba(67,43,20,.09) 3px 4px); }
.field-note>em { position:absolute; right:1.2rem; top:1rem; color:rgba(56,36,20,.23); font:400 3.2rem/1 var(--display); font-style:normal; transform:rotate(3deg); }
.field-note h3 { position:relative; max-width:90%; }
.note-b { background:linear-gradient(112deg,rgba(255,242,205,.14),transparent 30%),repeating-linear-gradient(97deg,transparent 0 3px,rgba(67,43,20,.07) 3px 4px),#b89460; }

.radio-console { position:relative; overflow:hidden; background:radial-gradient(circle at 72% 20%,rgba(125,255,143,.05),transparent 25%),#0a0e09; }
.radio-console::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 0 49%,rgba(125,255,143,.055) 50%,transparent 51%); background-size:100% 9px; opacity:.45; }
.frequency-scale { position:relative; z-index:1; min-height:38px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.8rem; padding:0 1.4rem; border-bottom:1px solid rgba(125,255,143,.1); color:#53634c; font-size:.52rem; letter-spacing:.12em; }
.frequency-scale i { height:1px; position:relative; background:repeating-linear-gradient(90deg,rgba(125,255,143,.32) 0 1px,transparent 1px 18px); }
.frequency-scale b { position:absolute; top:-4px; left:57%; width:2px; height:9px; background:var(--green); box-shadow:0 0 8px var(--green); }
.radio-log button { position:relative; z-index:1; }
.radio-log button.is-playing::after { content:"SQUELCH OPEN"; position:absolute; right:1rem; bottom:.35rem; color:var(--green); font-size:.48rem; letter-spacing:.14em; }
.waveform { position:relative; z-index:1; animation:wave-shift 3s linear infinite; }
@keyframes wave-shift { to{background-position:180px 0,80px 0} }

.whiteout { background:radial-gradient(ellipse at 75% 50%,rgba(167,104,43,.12),transparent 35%); }
.whiteout-trigger-large { overflow:hidden; background:linear-gradient(115deg,transparent 0 48%,rgba(125,255,143,.05) 49%,transparent 50%); }
.whiteout-trigger-large::after { content:"04:24:11"; position:absolute; right:.8rem; top:.55rem; color:rgba(125,255,143,.38); font:400 1.4rem/1 var(--display); }
.after blockquote { text-wrap:balance; }

@media (max-width:900px) {
  .hero-reticle{left:51%;top:29%;width:34vw}.gust-index{top:19%}.passage-tape{grid-template-columns:1fr 1fr}.passage-tape span:nth-child(3){border-left:0}.passage-tape span:nth-child(-n+2){border-bottom:0}.convoy-map::after{display:none}
}
@media (max-width:620px) {
  body::after{opacity:calc(var(--gust-level) * .4)}
  .veil-lock{width:82vw;grid-template-columns:1fr}.veil-lock span{font-size:20vw}.veil-lock b{position:absolute;right:0;top:1rem;font-size:3rem}.veil-lock small{font-size:.5rem}
  .hero{min-height:780px;padding-bottom:3.5rem}.hero::after{display:none}.film-frame video{position:relative;top:-30%;height:130%;object-position:73% center;filter:sepia(.06) saturate(1) contrast(calc(.98 + var(--visibility-level) * .18)) brightness(calc(.63 + var(--visibility-level) * .43))}.film-scrim{background:linear-gradient(0deg,rgba(8,6,4,.91) 0,rgba(8,6,4,.17) 46%,rgba(8,6,4,.08) 72%,rgba(8,6,4,.38) 100%),radial-gradient(circle at 72% 43%,transparent 10%,rgba(8,6,4,.34) 75%)}
  .hero-reticle{left:auto;right:1rem;top:25%;width:42vw}.hero-reticle i{height:58px}.hero-reticle span{font-size:.43rem}.gust-index{left:1rem;right:auto;top:17%;width:155px}.hero-copy{max-width:100%}.hero h1{text-wrap:nowrap;font-size:28.5vw}
  .telemetry{box-shadow:8px 8px 0 rgba(8,6,4,.28)}.passage-tape span{min-height:70px;padding:.75rem}.passage-tape b{font-size:1.55rem}
  .field-note{box-shadow:12px 16px 0 rgba(6,5,3,.18),15px 26px 45px rgba(0,0,0,.28)}.field-note>em{font-size:2.6rem}
  .frequency-scale{padding-inline:.9rem}.radio-log button.is-playing::after{right:.7rem}.whiteout{background:none}
}
@media (prefers-reduced-motion:reduce) {
  body::after{opacity:.2}.route,.waveform{animation:none}.film-frame video{filter:sepia(.14) saturate(.92) contrast(1.14) brightness(.82)}
}

@layer base {
  :root {
    --ink: #17130d;
    --ink-deep: #0d0b08;
    --sand: #c99a52;
    --sand-hot: #e7b86c;
    --sand-pale: #ead3aa;
    --dust: #8d6332;
    --haze: #6b4a2b;
    --green: #7dff8f;
    --paper: #d9bd8d;
    --line: rgba(231,184,108,.28);
    --display: 'Bebas Neue', sans-serif;
    --body: 'Archivo', sans-serif;
  }
  html { background: var(--ink-deep); color-scheme: dark; }
  body {
    min-width: 320px;
    overflow-x: clip;
    background:
      radial-gradient(circle at 12% 7%, rgba(201,154,82,.16), transparent 27rem),
      radial-gradient(circle at 86% 34%, rgba(141,99,50,.13), transparent 38rem),
      var(--ink);
    color: #e9dac1;
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
  }
  body::before {
    content: ""; position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .16;
    background-image: repeating-radial-gradient(circle at 20% 30%, rgba(255,238,202,.28) 0 1px, transparent 1px 4px);
    background-size: 7px 7px; mix-blend-mode: soft-light;
  }
  a { color: inherit; text-decoration: none; }
  button { border: 0; background: none; cursor: pointer; }
  :focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
  ::selection { color: var(--ink); background: var(--green); }
  .skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1000; padding: .7rem 1rem; background: var(--green); color: var(--ink); font-weight: 800; }
  .skip-link:focus { top: 1rem; }
  #weather { position: fixed; inset: 0; z-index: 18; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: .68; }
  .storm-veil { position: fixed; inset: -10%; z-index: 19; display: grid; place-items: center; pointer-events: none; opacity: 0; background: #a67740; transform: translateX(-110%) skewX(-8deg); }
  .storm-veil::before, .storm-veil::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(102deg, transparent 0 4px, rgba(255,230,184,.13) 4px 5px); }
  .storm-veil::after { filter: blur(10px); background: linear-gradient(90deg, #5d3b20, #c59755 48%, #6d4828); opacity: .72; }
  .storm-veil span { position: relative; z-index: 2; font: 400 clamp(2rem, 8vw, 8rem)/1 var(--display); letter-spacing: .08em; color: rgba(23,19,13,.5); }
  body.is-whiteout { overflow: hidden; }
  body.is-whiteout .storm-veil { animation: swallow 3.2s cubic-bezier(.7,0,.15,1) both; }
  body.is-whiteout main, body.is-whiteout .site-header { animation: camera-impact .2s linear 3; }
  @keyframes swallow { 0% { opacity: 0; transform: translateX(-110%) skewX(-8deg); } 18% { opacity: 1; transform: translateX(-15%) skewX(-5deg); } 35%, 68% { opacity: 1; transform: translateX(0) skewX(0); } 100% { opacity: 0; transform: translateX(110%) skewX(8deg); } }
  @keyframes camera-impact { 0%,100%{transform:translate(0)} 33%{transform:translate(-2px,1px)} 66%{transform:translate(2px,-1px)} }
  .section-shell { width: min(1240px, calc(100% - 64px)); margin-inline: auto; position: relative; }
  .section-index { color: var(--sand); font: 400 .82rem/1 var(--body); text-transform: uppercase; letter-spacing: .18em; border-top: 1px solid var(--line); padding-top: .85rem; }
  .eyebrow { color: var(--green); font-size: .73rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
  h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; }
  h2 { color: var(--sand-pale); font-size: clamp(3.25rem, 7.4vw, 7rem); line-height: .86; letter-spacing: -.025em; }
  .section-heading > p:last-child { max-width: 36rem; margin-top: 1.5rem; color: #c9b99f; }
}

@layer components {
  .site-header { position: absolute; z-index: 30; inset: 0 0 auto; height: 82px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 0 clamp(1.25rem,4vw,4rem); border-bottom: 1px solid rgba(234,211,170,.22); color: #f2e4ca; }
  .identity { display: flex; align-items: center; gap: .8rem; width: fit-content; }
  .identity-mark { display: grid; place-items: center; width: 43px; aspect-ratio: 1; border: 1px solid var(--sand-hot); font: 400 1.45rem/1 var(--display); color: var(--sand-hot); transform: rotate(-3deg); }
  .identity b, .identity small { display: block; line-height: 1.15; }
  .identity b { font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; }
  .identity small { margin-top: .32rem; color: #c8b48f; font-size: .6rem; letter-spacing: .12em; }
  .site-header > nav { display: flex; gap: 2rem; }
  .site-header > nav a { min-height: 44px; display: grid; place-items: center; color: #dac7a5; font-size: .68rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
  .site-header > nav a:hover { color: var(--green); }
  .sound-toggle { justify-self: end; min-height: 44px; display: flex; align-items: center; gap: .62rem; padding: .25rem .85rem; border: 1px solid rgba(234,211,170,.32); color: #ead9bb; font-size: .67rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .sound-dot { width: 7px; height: 7px; border-radius: 50%; background: #8f6c47; box-shadow: 0 0 0 4px rgba(143,108,71,.15); }
  .sound-toggle[aria-pressed="true"] .sound-dot { background: var(--green); box-shadow: 0 0 12px var(--green); }

  .hero { min-height: max(760px, 100svh); position: relative; display: grid; align-content: end; padding: 8rem clamp(1.25rem,4vw,4rem) 5rem; isolation: isolate; background: #100d09; overflow: hidden; }
  .hero::before { content:""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,8,6,.95) 0 30%, transparent 60%), linear-gradient(0deg, #17130d 0, transparent 36%); }
  .film-frame { position: absolute; z-index: -3; inset: 0; overflow: hidden; background: #6e4627; }
  .film-frame::before, .film-frame::after { content:""; position:absolute; z-index:3; left:0; right:0; height: clamp(24px,4.2vw,64px); background:#070605; }
  .film-frame::before { top:0; } .film-frame::after { bottom:0; }
  .film-frame video { width:100%; height:100%; object-fit:cover; object-position: center; filter: sepia(.18) saturate(.9) contrast(1.13) brightness(.74); transform: scale(1.035); animation: drift-frame 18s ease-in-out infinite alternate; }
  .film-scrim { position:absolute; inset:0; background: radial-gradient(circle at 60% 55%, transparent 10%, rgba(8,6,4,.15) 46%, rgba(8,6,4,.82) 100%), linear-gradient(90deg,rgba(8,6,4,.92),transparent 43%); }
  .film-meta { position:absolute; z-index:4; left: clamp(1.25rem,4vw,4rem); right:clamp(1.25rem,4vw,4rem); display:flex; justify-content:space-between; color:rgba(234,211,170,.7); font-size:.58rem; letter-spacing:.2em; }
  .film-meta-top { display:none; } .film-meta-bottom { bottom:clamp(8px,1.7vw,26px); }
  @keyframes drift-frame { to { transform: scale(1.08) translate3d(-.5%,.4%,0); } }
  .hero-copy { max-width: 830px; position: relative; z-index: 2; }
  .hero h1 { margin: .25rem 0 .75rem; color: var(--sand-hot); font-size: clamp(6.5rem,15vw,14.5rem); line-height: .7; letter-spacing: -.025em; text-shadow: 0 5px 30px rgba(18,12,7,.6); }
  .hero h1 span { display:block; margin-left:.1em; color:#e2c28d; font-size:.24em; letter-spacing:.43em; line-height:1.4; }
  .hero-deck { max-width: 620px; padding-left: 1rem; border-left: 3px solid var(--green); color: #f0dfc0; font-size: clamp(1rem,1.5vw,1.25rem); font-weight: 500; line-height: 1.45; }
  .hero-actions { display:flex; align-items:center; gap:1.2rem; margin-top:1.6rem; }
  .whiteout-trigger { min-height: 48px; padding: .8rem 1.15rem; background: var(--green); color: var(--ink); font-size:.7rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; box-shadow: 8px 8px 0 rgba(13,11,8,.4); transition:transform .2s, box-shadow .2s; }
  .whiteout-trigger:hover { transform:translate(-2px,-2px); box-shadow:11px 11px 0 rgba(13,11,8,.42); }
  .classification { color:#bda988; font-size:.58rem; line-height:1.45; letter-spacing:.12em; text-transform:uppercase; }
  .telemetry { position:absolute; z-index:2; right:clamp(1.25rem,4vw,4rem); bottom:5rem; width:min(270px,21vw); padding:1rem 1.1rem; border:1px solid rgba(234,211,170,.3); background:rgba(15,12,8,.48); backdrop-filter:blur(6px); }
  .telemetry-title { display:block; padding-bottom:.7rem; border-bottom:1px solid var(--line); color:var(--green); font-size:.58rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
  .telemetry div { display:grid; grid-template-columns:56px 1fr; align-items:baseline; padding-top:.65rem; }
  .telemetry b { color:var(--sand-hot); font:400 1.6rem/1 var(--display); }
  .telemetry small { color:#c5b392; font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; }
  .scroll-cue { position:absolute; right:clamp(1.25rem,4vw,4rem); bottom:1.2rem; display:flex; align-items:center; gap:.7rem; color:#9b8868; font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; }
  .scroll-cue i { width:50px; height:1px; background:var(--sand); transform-origin:left; animation:pulse-line 2s ease-in-out infinite; }
  @keyframes pulse-line { 50% { transform:scaleX(.35); opacity:.45; } }

  .dispatch { padding-block: 10rem 12rem; }
  .dispatch-lead { display:grid; grid-template-columns:1fr 3fr; align-items:end; gap:2rem; margin:3.5rem 0 5rem; }
  .dispatch-lead h2 { max-width:950px; }
  .dispatch-grid { display:grid; grid-template-columns:1.4fr .8fr 1fr; gap:clamp(2rem,5vw,6rem); align-items:start; padding-left:13%; }
  .dispatch-grid p { color:#cdbb9e; }
  .dispatch-grid .lead-copy { color:#ead9bd; font-size:1.18rem; font-weight:500; line-height:1.65; }
  .pull-stat { padding-top:1rem; border-top:1px solid var(--green); }
  .pull-stat b, .pull-stat span { display:block; }
  .pull-stat b { color:var(--sand-hot); font:400 clamp(3rem,5vw,5rem)/1 var(--display); }
  .pull-stat span { color:#baa685; font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; }
  .visibility-strip { margin-top:7rem; padding:1.5rem 2rem 1rem; border:1px solid var(--line); background:rgba(109,75,39,.13); position:relative; overflow:hidden; }
  .visibility-strip::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0 49px,rgba(231,184,108,.06) 49px 50px); }
  .visibility-label, .trace-times { display:flex; justify-content:space-between; color:#a99574; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; }
  .visibility-label b { color:var(--green); }
  .visibility-strip svg { display:block; width:100%; height:auto; margin-top:1rem; overflow:visible; }
  .visibility-strip line { stroke:rgba(234,211,170,.11); } .trace-area{fill:url(#traceFill)} .trace-line{fill:none;stroke:var(--sand-hot);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s ease}.is-visible .trace-line{stroke-dashoffset:0}

  .formation { padding-bottom: 12rem; }
  .formation .section-heading { max-width:700px; margin:3.5rem 0 -6rem; position:relative; z-index:2; }
  .convoy-map { min-height:820px; position:relative; border:1px solid var(--line); background:radial-gradient(ellipse at 60% 30%,rgba(201,154,82,.1),transparent 37%),linear-gradient(rgba(231,184,108,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(231,184,108,.035) 1px,transparent 1px); background-size:auto,40px 40px,40px 40px; clip-path:polygon(6% 0,100% 0,100% 93%,94% 100%,0 100%,0 7%); }
  .convoy-map::before { content:"KHARIF / SECTOR 8"; position:absolute; right:2rem; top:2rem; color:rgba(201,154,82,.36); font:400 3.4rem/1 var(--display); letter-spacing:.08em; }
  .route { position:absolute; width:14px; height:94%; left:52%; top:3%; border-left:2px dashed rgba(125,255,143,.45); transform:rotate(-25deg); filter:drop-shadow(0 0 5px rgba(125,255,143,.25)); }
  .bearing-line { position:absolute; left:4%; top:28%; display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--sand); font-size:.6rem; letter-spacing:.2em; }
  .bearing-line i { width:1px; height:180px; background:var(--sand); position:relative; }
  .bearing-line i::before { content:""; position:absolute; left:-4px; top:0; border:4px solid transparent; border-bottom:8px solid var(--sand); transform:translateY(-100%); }
  .vehicle { position:absolute; left:var(--x); top:var(--y); width:150px; min-height:78px; display:grid; grid-template-columns:35px 1fr; grid-template-rows:auto auto; text-align:left; padding:.65rem; border:1px solid rgba(234,211,170,.24); background:rgba(16,13,9,.84); transition:transform .2s,border-color .2s,background .2s; }
  .vehicle::after { content:""; position:absolute; left:8px; right:8px; bottom:-7px; height:5px; background:repeating-linear-gradient(90deg,#070605 0 7px,transparent 7px 10px); }
  .vehicle > span { grid-row:1/3; color:var(--green); font:400 1.35rem/1 var(--display); }
  .vehicle b { color:#ddc7a3; font:400 1.2rem/1 var(--display); text-transform:uppercase; letter-spacing:.06em; }
  .vehicle small { color:#947f61; font-size:.54rem; text-transform:uppercase; letter-spacing:.1em; }
  .vehicle:hover, .vehicle.is-active { z-index:2; transform:translateY(-4px); border-color:var(--green); background:#1c1b12; }
  .vehicle.is-active::before { content:""; position:absolute; width:7px; height:7px; right:8px; top:8px; background:var(--green); box-shadow:0 0 13px var(--green); }
  .map-readout { position:absolute; left:2rem; bottom:2rem; width:260px; padding:1rem; border-left:2px solid var(--green); background:rgba(11,9,6,.75); }
  .map-readout span { color:#9b8868; font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; }
  .map-readout strong { display:block; color:var(--sand-hot); font:400 2.5rem/1 var(--display); text-transform:uppercase; }
  .map-readout p { color:#b9a686; font-size:.67rem; }

  .navigation { padding-bottom:12rem; }
  .navigation-grid { display:grid; grid-template-columns:.92fr 1.45fr; gap:clamp(3rem,8vw,9rem); margin-top:3.5rem; align-items:start; }
  .compass-panel { min-height:660px; display:grid; place-items:center; position:sticky; top:4rem; background:radial-gradient(circle,rgba(201,154,82,.15),transparent 60%); }
  .compass { width:min(460px,100%); aspect-ratio:1; border:1px solid rgba(231,184,108,.45); border-radius:50%; position:relative; display:grid; place-items:center; box-shadow:inset 0 0 80px rgba(0,0,0,.55),0 0 0 18px rgba(201,154,82,.025); }
  .compass::before { content:""; position:absolute; inset:8%; border:1px dashed rgba(231,184,108,.26); border-radius:50%; background:repeating-conic-gradient(from 0deg,var(--sand) 0 1deg,transparent 1deg 10deg); mask:radial-gradient(circle,transparent 0 78%,#000 79%); }
  .compass-rings { position:absolute; inset:20%; border:1px solid rgba(231,184,108,.2); border-radius:50%; }
  .cardinal { position:absolute; color:var(--sand); font:400 1.35rem/1 var(--display); }.north{top:4%}.east{right:5%;top:48%}.south{bottom:4%}.west{left:5%;top:48%}
  .needle { position:absolute; inset:12%; transform:rotate(107deg); transition:transform .6s cubic-bezier(.2,.9,.3,1); }
  .needle::before { content:""; position:absolute; left:50%; top:9%; width:2px; height:41%; background:linear-gradient(var(--green),transparent); box-shadow:0 0 12px var(--green); }
  .needle i { position:absolute; left:calc(50% - 5px); top:5%; border:5px solid transparent; border-bottom:12px solid var(--green); }
  .compass > b { color:var(--sand-pale); font:400 clamp(4rem,8vw,6.5rem)/1 var(--display); }.compass>small{position:absolute;top:64%;color:var(--green);font-size:.56rem;letter-spacing:.2em}
  .caption { position:absolute; bottom:1rem; color:#806e54; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; }
  .notes-panel .section-heading { margin-bottom:5rem; }
  .field-note { max-width:520px; margin:0 0 5rem auto; padding:3.3rem 2.4rem 2.2rem; position:relative; color:#2a2015; background:#cbae7d; transform:rotate(-1.7deg); box-shadow:20px 24px 50px rgba(0,0,0,.24); clip-path:polygon(1% 3%,98% 0,100% 97%,2% 100%); }
  .field-note::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.35; background:repeating-linear-gradient(97deg,transparent 0 3px,rgba(67,43,20,.1) 3px 4px); }
  .field-note .tape { position:absolute; width:130px; height:32px; top:-10px; left:calc(50% - 65px); background:rgba(219,197,154,.66); transform:rotate(4deg); box-shadow:inset 0 0 8px rgba(69,49,27,.18); }
  .field-note small { font-size:.57rem; font-weight:800; letter-spacing:.16em; }
  .field-note h3 { margin:.5rem 0; font-size:2.5rem; line-height:.95; }
  .field-note p { font-size:.86rem; line-height:1.65; }
  .field-note b { display:block; margin-top:1rem; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; }
  .note-b { margin-right:5%; background:#b89460; transform:rotate(1.2deg); }.note-c{margin-right:12%;transform:rotate(-.5deg)}

  .signals { padding-bottom:12rem; }
  .signals-layout { display:grid; grid-template-columns:.8fr 1.5fr; gap:clamp(3rem,8vw,8rem); margin-top:3.5rem; }
  .radio-console { border:1px solid rgba(125,255,143,.23); background:#0d100b; box-shadow:0 25px 80px rgba(0,0,0,.36); }
  .console-header { min-height:70px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:1.5rem; padding:0 1.4rem; border-bottom:1px solid rgba(125,255,143,.15); color:var(--green); font-size:.61rem; letter-spacing:.17em; }
  .console-header b { font:400 2.4rem/1 var(--display); }
  .signal-bars { display:flex; align-items:flex-end; gap:3px; height:22px; }.signal-bars i{width:3px;background:var(--green);animation:signal 1.2s steps(3) infinite}.signal-bars i:nth-child(1){height:20%}.signal-bars i:nth-child(2){height:50%;animation-delay:.2s}.signal-bars i:nth-child(3){height:85%;animation-delay:.1s}.signal-bars i:nth-child(4){height:55%;animation-delay:.35s}.signal-bars i:nth-child(5){height:25%;animation-delay:.5s}@keyframes signal{50%{height:15%;opacity:.3}}
  .radio-log { list-style:none; padding:0; margin:0; }
  .radio-log li + li { border-top:1px solid rgba(125,255,143,.1); }
  .radio-log button { width:100%; min-height:88px; display:grid; grid-template-columns:90px 1fr auto; align-items:center; gap:1.5rem; padding:1rem 1.4rem; text-align:left; transition:background .2s; }
  .radio-log button:hover, .radio-log button.is-playing { background:rgba(125,255,143,.07); }
  .radio-log time { color:#7f8e71; font-size:.62rem; letter-spacing:.1em; }.radio-log span{color:#c9c2aa;font-size:.79rem;line-height:1.55}.radio-log span b{color:var(--green);font-size:.65rem;letter-spacing:.12em}.radio-log i{color:#6b7d5f;font-size:.52rem;font-style:normal;letter-spacing:.13em}
  .waveform { height:45px; border-top:1px solid rgba(125,255,143,.15); background:linear-gradient(90deg,transparent,rgba(125,255,143,.08),transparent),repeating-linear-gradient(90deg,transparent 0 7px,rgba(125,255,143,.14) 7px 8px); }

  .whiteout { min-height:690px; margin-bottom:12rem; display:grid; grid-template-columns:1.1fr .75fr; align-items:center; gap:7rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
  .whiteout::before { content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 0 45%,rgba(201,154,82,.1) 45% 46%,transparent 46%); }
  .whiteout-copy { position:relative; z-index:1; }.whiteout-copy h2{margin:.6rem 0 1.5rem}.whiteout-copy>p:last-child{max-width:550px;color:#c3b194}
  .whiteout-trigger-large { min-height:220px; position:relative; display:grid; place-content:center; text-align:center; background:transparent; border:1px solid var(--green); color:var(--green); box-shadow:16px 16px 0 rgba(125,255,143,.08); }
  .whiteout-trigger-large::before { content:""; position:absolute; inset:12px; border:1px dashed rgba(125,255,143,.25); }
  .whiteout-trigger-large span { font:400 2.3rem/1 var(--display); letter-spacing:.04em; }.whiteout-trigger-large small{margin-top:.8rem;color:#a5af93;font-size:.55rem;letter-spacing:.12em}
  .whiteout-count { position:absolute; inset:auto 0 0; display:flex; justify-content:space-between; color:rgba(201,154,82,.08); font:400 8rem/1 var(--display); pointer-events:none; }

  .after { padding-bottom:12rem; }
  .after-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem 9rem; margin-top:3.5rem; }
  .after-grid .section-heading { grid-column:1/-1; display:grid; grid-template-columns:1fr 2.5fr; align-items:end; gap:3rem; }.after-copy{color:#d8c6a8;font-size:1.14rem;line-height:1.8}
  .ledger { border-top:1px solid var(--line); }.ledger div{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2rem;padding:1rem 0;border-bottom:1px solid var(--line)}.ledger span{color:#a99676;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase}.ledger b{color:var(--sand-hot);font:400 2.3rem/1 var(--display)}
  blockquote { grid-column:1/-1; margin:4rem auto 0; max-width:1000px; color:var(--sand-pale); font:400 clamp(3.2rem,6vw,6rem)/.95 var(--display); text-align:center; text-transform:uppercase; }
  blockquote cite { display:block; margin-top:1.5rem; color:var(--green); font:700 .62rem/1.4 var(--body); letter-spacing:.16em; font-style:normal; }

  .site-footer { min-height:200px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:3rem; padding:3rem clamp(1.25rem,4vw,4rem); border-top:1px solid var(--line); background:#0c0a07; color:#917e61; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; }
  .footer-mark { color:var(--sand); font:400 3rem/1 var(--display); }.site-footer p{text-align:center}.site-footer nav{display:flex;gap:1.5rem}.site-footer a{min-height:44px;display:flex;align-items:center}.site-footer a:hover{color:var(--green)}

  .reveal { opacity:0; transform:translateY(20px); animation:load-in .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(var(--delay,0) * 130ms + 100ms); }.reveal[data-delay="0"]{--delay:0}.reveal[data-delay="1"]{--delay:1}.reveal[data-delay="2"]{--delay:2}.reveal[data-delay="3"]{--delay:3}.reveal[data-delay="4"]{--delay:4}.reveal[data-delay="5"]{--delay:5}@keyframes load-in{to{opacity:1;transform:none}}
  .reveal-in { opacity:0; transform:translateY(35px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1); }.reveal-in.is-visible{opacity:1;transform:none}
}

@layer utilities {
  @media (max-width: 900px) {
    .telemetry{width:240px}.hero-copy{max-width:70%}.hero h1{font-size:clamp(7rem,18vw,11rem)}.notes-panel .section-heading{max-width:650px}
    .dispatch-lead{grid-template-columns:1fr}.dispatch-grid{grid-template-columns:1fr 1fr;padding-left:0}.dispatch-grid>p:last-child{grid-column:1/-1}.formation .section-heading{margin-bottom:3rem}.convoy-map{min-height:760px}.vehicle{width:135px}.navigation-grid{grid-template-columns:1fr}.compass-panel{position:relative;top:auto;min-height:540px}.notes-panel{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.notes-panel .section-heading{grid-column:1/-1}.field-note,.note-b,.note-c{margin:0;max-width:none}.note-c{grid-column:1/-1;width:55%;justify-self:center}.signals-layout{grid-template-columns:1fr}.whiteout{gap:3rem}.after-grid{gap:4rem}.site-footer{grid-template-columns:1fr;text-align:center;gap:1rem}.site-footer nav{justify-content:center;flex-wrap:wrap}.footer-mark{margin:auto}
  }
  @media (max-width: 620px) {
    body{font-size:15px}.section-shell{width:min(100% - 32px,1240px)}h2{font-size:clamp(3.4rem,18vw,5.4rem)}
    .site-header{height:72px;padding-inline:1rem;grid-template-columns:1fr auto;gap:1rem}.site-header>nav{display:none}.identity b{font-size:.64rem}.identity small{display:none}.identity-mark{width:40px}.sound-toggle{grid-column:2;padding:.2rem .65rem}.sound-label{font-size:0}.sound-label::after{content:"Wind off";font-size:.61rem}.sound-toggle[aria-pressed="true"] .sound-label::after{content:"Wind live"}
    .hero{min-height:760px;padding:7rem 1rem 4rem;align-content:end}.hero::before{background:linear-gradient(0deg,#17130d 0,rgba(11,9,6,.18) 55%,rgba(11,9,6,.3))}.film-frame video{object-position:62% center;filter:sepia(.1) saturate(.95) contrast(1.05) brightness(.91)}.film-scrim{background:radial-gradient(circle at 65% 48%,transparent 20%,rgba(8,6,4,.12) 65%,rgba(8,6,4,.45) 100%),linear-gradient(0deg,rgba(8,6,4,.7),transparent 62%)}.film-frame::before,.film-frame::after{height:22px}.film-meta-bottom{bottom:7px}.hero-copy{max-width:100%}.hero h1{font-size:29vw;letter-spacing:-.04em;margin-bottom:1.1rem}.hero h1 span{font-size:.23em;letter-spacing:.32em}.hero-deck{max-width:95%;font-size:.96rem}.hero-actions{align-items:stretch}.classification{display:none}.whiteout-trigger{flex:1}.telemetry{position:relative;right:auto;bottom:auto;width:100%;margin-top:1.2rem;display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}.telemetry-title{grid-column:1/-1}.telemetry div{display:block}.telemetry b,.telemetry small{display:block}.telemetry small{font-size:.48rem}.scroll-cue{display:none}
    .dispatch{padding-block:7rem 8rem}.dispatch-lead{margin:2.4rem 0 3rem}.dispatch-grid{grid-template-columns:1fr;gap:2rem}.dispatch-grid>p:last-child{grid-column:auto}.visibility-strip{margin-top:4rem;padding:1rem}.visibility-label span{display:none}.visibility-strip svg{height:130px}.trace-times{font-size:.49rem}
    .formation{padding-bottom:8rem}.formation .section-heading{margin:2.4rem 0 2.5rem}.convoy-map{min-height:1020px;clip-path:none}.convoy-map::before{right:1rem;top:1rem;font-size:2rem}.bearing-line{display:none}.route{height:72%;left:60%;top:6%;transform:rotate(-12deg)}.vehicle{width:124px;min-height:70px;left:8%;grid-template-columns:29px 1fr}.vehicle:nth-of-type(even){left:auto;right:5%}.vehicle.v1{top:7%}.vehicle.v2{top:16%}.vehicle.v3{top:25%}.vehicle.v4{top:34%}.vehicle.v5{top:43%}.vehicle.v6{top:52%}.vehicle.v7{top:61%}.vehicle.v8{top:70%}.map-readout{left:1rem;bottom:1rem;width:calc(100% - 2rem)}
    .navigation{padding-bottom:8rem}.navigation-grid{margin-top:2.5rem;gap:2rem}.compass-panel{min-height:390px}.compass{width:320px;max-width:92%}.compass>small{top:67%}.notes-panel{grid-template-columns:1fr;gap:2rem}.notes-panel .section-heading,.note-c{grid-column:auto;width:auto}.notes-panel .section-heading{margin-bottom:1rem}.field-note{padding:3rem 1.5rem 1.8rem}.field-note h3{font-size:2.25rem}
    .signals{padding-bottom:8rem}.signals-layout{margin-top:2.5rem;gap:2.5rem}.radio-log button{grid-template-columns:62px 1fr;gap:.8rem;min-height:104px;padding:.9rem}.radio-log i{grid-column:2}.console-header{grid-template-columns:1fr auto;padding-inline:.9rem}.signal-bars{display:none}
    .whiteout{min-height:640px;margin-bottom:8rem;grid-template-columns:1fr;gap:2rem;padding-block:5rem}.whiteout-trigger-large{min-height:160px}.whiteout-count{font-size:4rem}
    .after{padding-bottom:8rem}.after-grid,.after-grid .section-heading{grid-template-columns:1fr;gap:2.5rem}.after-grid .section-heading{grid-column:auto}.after-copy{font-size:1rem}blockquote{grid-column:auto;margin-top:3rem;font-size:3.2rem}
    .site-footer{padding-block:3.5rem}.site-footer nav{gap:.7rem 1.2rem}.site-footer a{justify-content:center}
  }
  @media (prefers-reduced-motion: reduce) {
    html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal,.reveal-in{opacity:1;transform:none}#weather{display:none}.film-frame video{animation:none}.storm-veil{display:none}
  }
}

/* Pass 3: visibility becomes an instrument the viewer can operate. */
html {
  scrollbar-color: var(--sand) var(--ink-deep);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--ink-deep); }
::-webkit-scrollbar-thumb { background: linear-gradient(#7c562d, var(--sand), #7c562d); border: 3px solid var(--ink-deep); }
body { text-rendering: optimizeLegibility; }
time,
.telemetry,
.gust-index,
.pull-stat,
.passage-tape,
.map-readout,
.console-header,
.frequency-scale,
.ledger { font-variant-numeric: tabular-nums lining-nums; }
h1, h2, h3, blockquote { text-wrap: balance; }

.site-header a,
.guide-header a,
.site-footer a,
.sound-toggle,
.vehicle,
.radio-log button,
.whiteout-trigger {
  transition-timing-function: cubic-bezier(.16,1,.3,1);
}
.site-header > nav a,
.site-footer a { position: relative; }
.site-header > nav a::after,
.site-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.site-header > nav a:hover::after,
.site-header > nav a:focus-visible::after,
.site-footer a:hover::after,
.site-footer a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.sound-toggle:hover,
.sound-toggle:focus-visible { border-color: var(--green); background: rgba(125,255,143,.055); }

.scope-reveal {
  --scope-size: clamp(150px, 18vw, 280px);
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-image:
    linear-gradient(rgba(46,31,17,.04), rgba(46,31,17,.04)),
    url('/assets/gen/sandstorm/hero.jpg');
  background-size: cover;
  background-position: center;
  filter: sepia(.03) saturate(1.12) contrast(1.18) brightness(1.03);
  -webkit-mask-image: radial-gradient(circle var(--scope-size) at var(--scope-x,68%) var(--scope-y,47%), #000 0 53%, rgba(0,0,0,.92) 63%, transparent 76%);
  mask-image: radial-gradient(circle var(--scope-size) at var(--scope-x,68%) var(--scope-y,47%), #000 0 53%, rgba(0,0,0,.92) 63%, transparent 76%);
  transition: opacity .65s cubic-bezier(.16,1,.3,1), filter .65s cubic-bezier(.16,1,.3,1);
}
.scope-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(125,255,143,.045) 4px 5px);
  mix-blend-mode: screen;
}
.scope-reveal span {
  position: absolute;
  left: var(--scope-x,68%);
  top: var(--scope-y,47%);
  width: calc(var(--scope-size) * 1.1);
  aspect-ratio: 1;
  border: 1px solid rgba(125,255,143,.72);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(10,8,5,.55), inset 0 0 32px rgba(125,255,143,.05), 0 0 26px rgba(125,255,143,.08);
  transform: translate(-50%,-50%) scale(.78);
  opacity: 0;
  transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}
.scope-reveal span::before,
.scope-reveal span::after {
  content: "";
  position: absolute;
  background: rgba(125,255,143,.8);
  box-shadow: 0 0 7px rgba(125,255,143,.45);
}
.scope-reveal span::before { width: 44px; height: 1px; left: calc(50% - 22px); top: 50%; }
.scope-reveal span::after { width: 1px; height: 44px; left: 50%; top: calc(50% - 22px); }
.hero.is-scope-active .scope-reveal { opacity: .96; }
.hero.is-scope-active .scope-reveal span { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.hero.is-scope-active .film-scrim { opacity: .78; }

.scope-toggle {
  position: absolute;
  z-index: 4;
  right: clamp(1.25rem,4vw,4rem);
  top: 46%;
  min-width: 208px;
  min-height: 56px;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: .7rem;
  padding: .55rem .8rem;
  border: 1px solid rgba(234,211,170,.3);
  background: linear-gradient(105deg,rgba(10,8,5,.88),rgba(39,27,16,.62));
  box-shadow: 10px 12px 0 rgba(7,5,3,.22);
  text-align: left;
  backdrop-filter: blur(5px);
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, background .35s, box-shadow .35s;
}
.scope-toggle:hover,
.scope-toggle:focus-visible { transform: translate(-3px,-3px); border-color: var(--green); box-shadow: 13px 15px 0 rgba(7,5,3,.28); }
.scope-toggle[aria-pressed="true"] { border-color: var(--green); background: linear-gradient(105deg,rgba(20,31,17,.9),rgba(24,42,22,.65)); }
.scope-toggle > span:last-child { min-width: 0; }
.scope-toggle b,
.scope-toggle small { display: block; text-transform: uppercase; }
.scope-toggle b { color: #dac6a4; font-size: .56rem; letter-spacing: .16em; }
.scope-toggle small { margin-top: .25rem; color: var(--green); font-size: .52rem; font-weight: 700; letter-spacing: .11em; }
.scope-icon {
  position: relative;
  width: 36px;
  aspect-ratio: 1;
  border: 1px solid rgba(125,255,143,.6);
  border-radius: 50%;
  box-shadow: inset 0 0 12px rgba(125,255,143,.06);
}
.scope-icon::before,
.scope-icon::after,
.scope-icon i::before,
.scope-icon i::after { content:""; position:absolute; background:var(--green); }
.scope-icon::before { left: 6px; right: 6px; top: 50%; height: 1px; }
.scope-icon::after { top: 6px; bottom: 6px; left: 50%; width: 1px; }
.scope-icon i::before { width: 5px; height: 5px; left: calc(50% - 2px); top: calc(50% - 2px); border-radius: 50%; box-shadow: 0 0 8px var(--green); }
.scope-icon i::after { width: 42px; height: 1px; left: -4px; top: 17px; opacity: .24; transform: rotate(45deg); }
.scope-toggle[aria-pressed="true"] .scope-icon { animation: scope-lock .72s cubic-bezier(.16,1,.3,1); box-shadow: inset 0 0 15px rgba(125,255,143,.14), 0 0 14px rgba(125,255,143,.18); }
@keyframes scope-lock { 0% { transform: rotate(-14deg) scale(.78); } 55% { transform: rotate(4deg) scale(1.08); } 100% { transform: none; } }
.scope-status { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 900px) {
  .scope-toggle { top: 45%; min-width: 190px; }
}
@media (max-width: 620px) {
  .scope-reveal {
    --scope-size: 118px;
    background-size: auto 130%;
    background-position: 73% -30%;
  }
  .scope-toggle {
    left: 1rem;
    right: auto;
    top: 32.5%;
    min-width: 178px;
    min-height: 50px;
    grid-template-columns: 32px 1fr;
    padding: .45rem .65rem;
    box-shadow: 7px 8px 0 rgba(7,5,3,.22);
  }
  .scope-icon { width: 30px; }
  .scope-icon i::after { width: 34px; left: -3px; top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .scope-toggle[aria-pressed="true"] .scope-icon { animation: none; }
  .scope-reveal { transition: none; }
}