/* ════════════════════════════════════════════════════════════════
   BoomHeadShot Photography — "The Photographer's Hide"
   No scrolling. No menus. The website lives inside the landscape.
   ════════════════════════════════════════════════════════════════ */

:root {
  --ink: #05060a;
  --paper: #f3ede2;
  --gold: #e8b968;
  --gold-hot: #ffd98e;
  --crimson: #981e32;
  --crimson-hot: #c22742;
  --hud: #ffe9c2;
  --hud-dim: rgba(255, 233, 194, .55);
  --lock: #8dffb0;
  --font-display: "Marcellus", Georgia, serif;
  --font-hud: "Chakra Petch", ui-monospace, monospace;
  --font-body: "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .9, .24, 1);
  --scope-d: min(78vmin, 640px);   /* scope diameter */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }  /* authored display rules must never override the hidden attribute */
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;            /* no scrolling — the world is the interface */
  line-height: 1.6;
  cursor: default;
}
body[data-mode="scope"] { cursor: none; }
body[data-mode="scope"].scope-resting { cursor: default; }
img { user-select: none; -webkit-user-drag: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link { position: absolute; left: -999px; top: 0; z-index: 300; background: var(--gold); color: var(--ink); padding: .6rem 1rem; font-weight: 600; }
.skip-link:focus { left: 0; }

.btn {
  display: inline-block; cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--font-hud); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  font-size: .82rem; padding: .85rem 1.7rem; border-radius: 3px; border: 1px solid transparent;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 3px; }
.btn--primary { background: linear-gradient(135deg, var(--crimson), var(--crimson-hot)); color: #fff; box-shadow: 0 6px 24px rgba(152, 30, 50, .45); }
.btn--ghost { border-color: rgba(243, 237, 226, .35); color: var(--paper); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-hot); }

/* ════════════════ LOADING SCREEN ════════════════ */
.loader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; align-content: center; gap: 1.4rem;
  background: var(--ink);
  transition: opacity .7s var(--ease), visibility .7s, background-color .5s var(--ease);
}
/* once the "enter to continue" gate is showing, let the black box go 40% transparent */
.loader.is-ready { background: rgba(5, 6, 10, .6); }
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__scope { width: min(34vmin, 220px); color: var(--gold-hot); overflow: visible; }
.loader__scope line, .loader__scope circle { stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; }
.loader__ring { transform-origin: 50px 50px; animation: loaderspin 2.4s linear infinite; }
.loader__ring--inner { animation: loaderspin 3.6s linear infinite reverse; color: var(--crimson-hot); }
@keyframes loaderspin { to { transform: rotate(360deg); } }
.loader__text {
  font-family: var(--font-hud); font-size: .7rem; letter-spacing: .38em; text-transform: uppercase;
  color: var(--hud-dim); text-align: center;
}
.loader__text b { color: var(--gold); }
.loader__text span { color: var(--lock); }

/* gate button shown once loading finishes — the visitor must act to enter */
.loader.is-ready .loader__scope,
.loader.is-ready .loader__text { display: none; }
.loader__gate {
  cursor: pointer; max-width: min(70vw, 480px); text-align: center;
  font-family: var(--font-display); font-size: clamp(1rem, 2.4vw, 1.35rem); line-height: 1.5;
  color: var(--paper); background: rgba(232, 185, 104, .08);
  border: 1px solid var(--gold); border-radius: 6px; padding: 1.1rem 1.6rem;
  animation: gatefadein .6s var(--ease) both;
  transition: border-color .25s, background .25s, transform .15s;
}
.loader__gate:hover { border-color: var(--gold-hot); background: rgba(232, 185, 104, .16); }
.loader__gate-cta { display: block; margin-top: .9rem; color: var(--gold-hot); font-weight: 600; }
.loader__gate:active { transform: scale(.98); }
.loader__gate:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 4px; }
@keyframes gatefadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ════════════════ STAGE & WORLD ════════════════ */
.stage { position: fixed; inset: 0; overflow: hidden; }
.world { position: absolute; top: 0; left: 0; will-change: transform; }
.world__pano { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }

/* Base world: subjects are visible to the naked eye (sized by distance,
   at half size) so visitors know where to aim — the scope shows them full */
.world--base .target { opacity: .95; pointer-events: none; transform: translate(-50%, -50%) scale(.5); }
/* keep the opening "LOC:" scene clean — no target icons visible until the intro finishes */
body[data-mode="intro"] .world--base .target { opacity: 0; }

/* dim + soften the naked-eye view once you're behind the camera */
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(4, 5, 10, 0); transition: background 1.2s var(--ease), backdrop-filter 1.2s;
}
body[data-mode="scope"] .stage::after { background: rgba(4, 5, 10, .72); }

.stage__grade {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(4, 5, 10, .5) 100%),
              linear-gradient(180deg, rgba(4,5,10,.25), transparent 30%);
}

/* ── targets (subjects hiding in the valley) ── */
.target {
  position: absolute; left: var(--tx); top: var(--ty); width: var(--s);
  transform: translate(-50%, -50%);
}
.target img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 14px rgba(5, 6, 10, .45)); }
.target::after { /* focus brackets: 2 line segments per corner, drawn with gradients */
  content: ""; position: absolute; inset: -22%; opacity: 0;
  background:
    linear-gradient(var(--lock), var(--lock)) top left     / 24% 2px,
    linear-gradient(var(--lock), var(--lock)) top left     / 2px 24%,
    linear-gradient(var(--lock), var(--lock)) top right    / 24% 2px,
    linear-gradient(var(--lock), var(--lock)) top right    / 2px 24%,
    linear-gradient(var(--lock), var(--lock)) bottom left  / 24% 2px,
    linear-gradient(var(--lock), var(--lock)) bottom left  / 2px 24%,
    linear-gradient(var(--lock), var(--lock)) bottom right / 24% 2px,
    linear-gradient(var(--lock), var(--lock)) bottom right / 2px 24%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 6px rgba(141, 255, 176, .5));
  transition: opacity .25s;
}
.target.is-focused::after { opacity: 1; }
.target.is-shot img { animation: shotout .45s var(--ease) both; }
@keyframes shotout {
  0% { transform: scale(1); opacity: 1; filter: brightness(3) drop-shadow(0 0 30px #fff); }
  100% { transform: scale(1.9); opacity: 0; filter: brightness(4); }
}
/* visited marker: crimson wax "CAPTURED" seal */
.target .visitmark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg);
  font-family: var(--font-hud); font-size: .55em; letter-spacing: .18em; text-transform: uppercase;
  color: #ffdfe5; background: rgba(152, 30, 50, .88); border: 1px solid var(--crimson-hot);
  padding: .3em .7em; border-radius: 3px; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none;
}
.target.is-visited img { filter: grayscale(.85) brightness(.75) drop-shadow(0 6px 14px rgba(5,6,10,.45)); }
.target.is-visited .visitmark { opacity: 1; }

/* ── ambient life ── */
.bird { position: absolute; width: 14px; height: 5px; }
.bird::before, .bird::after {
  content: ""; position: absolute; top: 0; width: 8px; height: 5px;
  border: 1.5px solid rgba(25, 20, 30, .8); border-bottom: none; border-left: none;
  border-radius: 0 100% 0 0; transform: skewX(-12deg);
  animation: flap .9s ease-in-out infinite alternate;
}
.bird::after { left: 7px; transform: scaleX(-1) skewX(-12deg); }
@keyframes flap { from { height: 5px } to { height: 3px } }
.b1 { top: 14%; left: 20%; animation: glide 48s linear infinite; }
.b2 { top: 17%; left: 23%; scale: .7; animation: glide 48s linear infinite 1.5s; }
.b3 { top: 12%; left: 26%; scale: .55; animation: glide 48s linear infinite 3s; }
@keyframes glide { 0% { transform: translate(0,0) } 50% { transform: translate(38vw, -4vh) } 100% { transform: translate(76vw, 1vh) } }

.fogband {
  position: absolute; height: 9%; left: 0; right: 0; filter: blur(16px); pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 231, 200, .28), transparent);
  animation: fogdrift 26s ease-in-out infinite alternate;
}
.fog1 { top: 52%; }
.fog2 { top: 63%; animation-delay: -11s; animation-duration: 34s; opacity: .8; }
@keyframes fogdrift { from { transform: translateX(-2.5%); opacity: .75 } to { transform: translateX(2.5%); opacity: 1 } }

/* ════════════════ SCOPE ════════════════ */
.scope {
  position: fixed; z-index: 20; width: var(--scope-d); height: var(--scope-d);
  left: 0; top: 0; border-radius: 50%; overflow: hidden;
  clip-path: circle(50%); /* hard circular clip — scaled inner layers can escape border-radius clipping in Chrome */
  transform: translate(-50%, -50%); will-change: transform;
  opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 6px #0b0a09, 0 0 0 10px #1c1913, 0 0 90px rgba(0, 0, 0, .9), inset 0 0 80px rgba(0, 0, 0, .85);
  background: #000;
  transition: opacity .7s var(--ease);
}
body[data-mode="scope"] .scope { opacity: 1; }
/* scope auto-lowers when the mouse rests (2s) — normal view returns */
body[data-mode="scope"].scope-resting .scope { opacity: 0; }
body[data-mode="scope"].scope-resting .stage::after { background: rgba(4, 5, 10, .15); }
.scope__view { position: absolute; inset: 0; will-change: filter; }
.scope__view .world { transform-origin: 0 0; }
.scope__view .world--scope .target { opacity: 1; }
.scope__view .birds, .scope__view .deer { display: none; } /* keep clones light */

.scope__reticle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* illuminated reticle: warm amber etched lines with a soft electronic glow, like a
   modern illuminated riflescope/EVF overlay rather than plain dark-etched glass */
.rl { stroke: var(--gold-hot); stroke-width: .35; fill: var(--gold-hot); opacity: .92; }
.rl--fine { stroke-width: .18; }
.rl--dots circle { stroke: none; }
.rl--ticks line { stroke-width: .25; }
.rl--center { fill: var(--lock); }
.rl--glow {
  filter: drop-shadow(0 0 .35px var(--gold-hot)) drop-shadow(0 0 1.4px rgba(255, 217, 142, .85))
          drop-shadow(0 0 3px rgba(255, 217, 142, .5));
  animation: reticleglow 2.4s ease-in-out infinite;
}
.rl--center.rl--glow {
  filter: drop-shadow(0 0 .4px var(--lock)) drop-shadow(0 0 1.6px rgba(141, 255, 176, .9))
          drop-shadow(0 0 3.2px rgba(141, 255, 176, .55));
}
@keyframes reticleglow { 0%, 100% { opacity: .92; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .rl--glow { animation: none; }
}

.scope__glass {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 246, 224, .12), transparent 28%),
    radial-gradient(circle at 68% 74%, rgba(152, 30, 50, .05), transparent 30%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(0, 0, 0, .55) 86%, #000 98%);
}

.scope__readout {
  position: absolute; z-index: 2; display: grid; gap: .15rem; pointer-events: none;
  font-family: var(--font-hud); font-size: .66rem; letter-spacing: .22em; color: var(--hud);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}
.scope__readout--tl { left: 16%; top: 16%; }
.scope__readout--br { right: 16%; bottom: 16%; text-align: right; }
.scope__readout--bl { left: 16%; bottom: 16%; opacity: .7; }
#roFocus.is-locked { color: var(--lock); }

.scope__label {
  position: absolute; z-index: 2; left: 50%; bottom: 22%; transform: translateX(-50%);
  font-family: var(--font-hud); font-size: .8rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--lock); text-shadow: 0 1px 6px rgba(0,0,0,.9);
  opacity: 0; transition: opacity .25s; pointer-events: none; white-space: nowrap;
}
.scope__label.is-on { opacity: 1; }
.scope__label .visited-note { display: block; text-align: center; font-size: .58rem; letter-spacing: .2em; color: var(--gold); margin-top: .2rem; }

/* ════════════════ INTRO ════════════════ */
.intro { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
body:not([data-mode="intro"]) .intro { display: none; }
.intro__bars { position: absolute; inset: 0; pointer-events: none; }
.intro__bars::before, .intro__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 11vh; background: #000;
}
.intro__bars::before { top: 0; }
.intro__bars::after { bottom: 0; }
.intro__caption {
  position: absolute; left: 50%; bottom: 13vh; transform: translateX(-50%);
  font-family: var(--font-hud); font-size: .72rem; letter-spacing: .4em; text-transform: uppercase;
  color: var(--lock); text-shadow: 0 0 8px rgba(141, 255, 176, .55), 0 1px 6px #000; white-space: nowrap;
  opacity: 0; transition: opacity .3s;
}
.intro__caption.is-on { opacity: 1; }
/* blinking block cursor while the teleprinter is writing */
.intro__caption.is-typing::after, .intro__caption.is-on:not(.is-typing)::after {
  content: "▌"; margin-left: .15em; color: var(--lock);
  animation: cursorblink .7s steps(1) infinite;
}
@keyframes cursorblink { 50% { opacity: 0; } }
.intro__ghillie {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease);
  overflow: hidden;
}
.intro__ghillie img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transform-origin: 45% 50%; }
.intro__ghillie.is-on { opacity: 1; }
.intro__ghillie.is-on img { animation: ghillieZoomPan 4s linear forwards; }
@keyframes ghillieZoomPan {
  0%   { transform: scale(1.06) translateX(0); }
  45%  { transform: scale(1.22) translateX(0); }
  100% { transform: scale(1.22) translateX(-6%); }
}
.intro__skipbtn {
  position: absolute; right: 2rem; bottom: 13.5vh; pointer-events: auto; cursor: pointer;
  background: none; border: 1px solid rgba(243, 237, 226, .3); color: rgba(243, 237, 226, .75);
  font-family: var(--font-hud); font-size: .68rem; letter-spacing: .25em; text-transform: uppercase;
  padding: .5rem 1.1rem; border-radius: 2px;
}
.intro__skipbtn:hover { border-color: var(--gold); color: var(--gold-hot); }
/* the gate's dimmed loader lets the intro show through — keep Skip hidden
   until the visitor has actually clicked through the gate */
body:has(.loader:not(.is-done)) .intro__skipbtn { display: none; }

/* settle-into-first-person transition — a soft focus pull, no rotation */
.stage.is-spinning { animation: povsettle 1.5s var(--ease) both; }
@keyframes povsettle {
  0% { filter: blur(0); }
  45% { filter: blur(14px) brightness(1.15); }
  100% { filter: blur(0); }
}

/* ════════════════ "Pick up the camera." ════════════════ */
.prompt {
  position: fixed; z-index: 40; left: 50%; bottom: 16vh; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 1.1rem; text-align: center;
}
.prompt__text {
  font-family: var(--font-hud); font-size: clamp(1rem, 2.2vw, 1.3rem);
  letter-spacing: .35em; text-transform: uppercase;
  color: var(--lock); text-shadow: 0 0 8px rgba(141, 255, 176, .55), 0 1px 6px #000;
  animation: promptfade 2.4s var(--ease) both;
}
@keyframes promptfade { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.prompt__btn {
  cursor: pointer; position: relative; background: none; border: none;
  animation: promptfade 2.4s var(--ease) both .5s;
  display: grid; place-items: center;
}
.prompt__photo {
  width: min(42vmin, 345px); height: auto; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 14px 36px rgba(0, 0, 0, .65));
}
.prompt__btn:hover { border-color: var(--gold-hot); }
.prompt__btn:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 4px; }

/* camera raise */
.cameraraise {
  position: fixed; z-index: 45; left: 50%; bottom: 0;
  width: min(74vmin, 620px); transform: translate(-50%, 105%) rotate(-4deg);
  pointer-events: none; filter: drop-shadow(0 -10px 40px rgba(0, 0, 0, .7));
}
.cameraraise.is-raising { animation: raise 1.6s var(--ease) both; }
@keyframes raise {
  0% { transform: translate(-50%, 105%) rotate(-4deg); }
  55% { transform: translate(-50%, 22%) rotate(1deg); }
  75% { transform: translate(-50%, 30%) rotate(0); }
  100% { transform: translate(-50%, 130%) rotate(0); } /* rises past the eye → scope engages */
}

/* ════════════════ SHOT FX ════════════════ */
.flash { position: fixed; inset: 0; z-index: 55; background: #fff; opacity: 0; pointer-events: none; }
.flash.is-firing { animation: flashfire .5s ease-out; }
@keyframes flashfire { 0% { opacity: 0 } 6% { opacity: .95 } 100% { opacity: 0 } }

.whiteout { position: fixed; inset: 0; z-index: 58; background: #fdfaf3; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.whiteout.is-on { opacity: 1; }

/* aperture blink: a soft ring pulses outward from the shot point and fades —
   a camera capturing a photo, not a bullet impact */
.burst {
  position: fixed; z-index: 56; width: 0; height: 0; pointer-events: none;
}
.burst::before {
  content: ""; position: absolute; left: 0; top: 0; width: 46px; height: 46px;
  transform: translate(-50%, -50%) scale(.4); border-radius: 50%;
  border: 2px solid var(--gold-hot); opacity: 0;
}
.burst.is-bursting::before { animation: apertureblink .55s var(--ease) both; }
@keyframes apertureblink {
  0%   { opacity: .9; transform: translate(-50%, -50%) scale(.3); }
  60%  { opacity: .55; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}

/* zoom-through-lens: scope blows up while world dives in */
body.is-diving .scope { transition: transform .9s var(--ease), opacity .9s; transform: translate(-50%, -50%) scale(3.2) !important; opacity: 0; }
body.is-diving .stage { transition: transform .9s var(--ease), filter .9s; transform: scale(2.6); filter: blur(10px) brightness(1.6); }

/* shoot button (touch devices / focused state) */
.shootbtn {
  position: fixed; z-index: 42; right: clamp(1.2rem, 4vw, 3rem); bottom: clamp(1.4rem, 6vh, 3.2rem);
  width: 78px; height: 78px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--gold); background: rgba(5, 6, 10, .55); backdrop-filter: blur(8px);
  display: grid; place-items: center; opacity: .45; transition: opacity .3s, border-color .3s, box-shadow .3s;
}
.shootbtn span { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--crimson-hot), var(--crimson)); transition: transform .12s; }
.shootbtn:active span { transform: scale(.86); }
.shootbtn.is-ready { opacity: 1; border-color: var(--lock); box-shadow: 0 0 34px rgba(141, 255, 176, .4); }
.shootbtn.is-aiming { opacity: 0; pointer-events: none; transition: opacity .15s; }
.shootbtn:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 4px; }

/* HUD line */
.hudline {
  position: fixed; z-index: 42; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem clamp(1rem, 3vw, 2rem);
  font-family: var(--font-hud); font-size: .66rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--hud-dim); text-shadow: 0 1px 4px #000;
  background: linear-gradient(180deg, rgba(5, 6, 10, .55), transparent);
}
.hudline b { color: var(--gold); }
.hudline__menu {
  cursor: pointer; background: none; border: 1px solid rgba(232, 185, 104, .4); color: var(--gold-hot);
  font: inherit; letter-spacing: .24em; text-transform: uppercase; padding: .4rem .9rem; border-radius: 2px;
}
.hudline__menu:hover { border-color: var(--gold-hot); }

/* ════════════════ PANELS ════════════════ */
.panel {
  position: fixed; inset: 0; z-index: 70; display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  background: radial-gradient(ellipse 120% 100% at 20% 0%, #12101c 0%, var(--ink) 60%);
  animation: panelin .8s var(--ease) both;
}
@keyframes panelin { from { opacity: 0; transform: scale(1.12); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.panel.is-closing { animation: panelout .5s var(--ease) both; }
@keyframes panelout { to { opacity: 0; transform: scale(1.1); filter: blur(8px); } }

.panel__media {
  position: relative; overflow: hidden; height: 100%; min-height: 0; min-width: 0;
  isolation: isolate; /* guarantees a containing/clip context for the absolutely-positioned track */
}

/* slider track: one full-bleed slide per photo, translated into view.
   Vertical (stacked top/bottom) by default; .is-horizontal (mobile) switches to left/right. */
.panel__track {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1); will-change: transform; cursor: grab;
  touch-action: pan-x;
}
.panel__media.is-horizontal .panel__track { flex-direction: row; touch-action: pan-y; }
.panel__track.is-dragging { transition: none; cursor: grabbing; }
.panel__slide { flex: 0 0 100%; width: 100%; height: 100%; min-height: 0; min-width: 0; }
.panel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }

.panel__navbtn {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(5, 6, 10, .55); border: 1px solid rgba(232, 185, 104, .4); color: var(--gold-hot);
  cursor: pointer; backdrop-filter: blur(6px); font-size: .8rem; line-height: 1;
}
.panel__navbtn--up { top: .9rem; }
.panel__navbtn--down { bottom: .9rem; }
.panel__navbtn:hover { border-color: var(--gold-hot); }
.panel__navbtn:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 2px; }
.panel__navbtn:disabled { opacity: .25; cursor: default; pointer-events: none; }

/* horizontal mode: arrows move to left/right edges, vertically centered */
.panel__media.is-horizontal .panel__navbtn--up,
.panel__media.is-horizontal .panel__navbtn--down {
  top: 50%; bottom: auto; left: .7rem; transform: translateY(-50%);
}
.panel__media.is-horizontal .panel__navbtn--down { left: auto; right: .7rem; }

.panel__dots {
  position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); z-index: 3;
  display: flex; flex-direction: column; gap: .5rem;
}
.panel__media.is-horizontal .panel__dots {
  right: auto; top: auto; bottom: .7rem; left: 50%; transform: translateX(-50%); flex-direction: row;
}
.panel__dot {
  width: 7px; height: 7px; border-radius: 50%; padding: 0; border: 1px solid rgba(243, 237, 226, .5);
  background: rgba(243, 237, 226, .25); cursor: pointer; flex: none;
}
.panel__dot.is-active { background: var(--gold-hot); border-color: var(--gold-hot); }
.panel__dot:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 2px; }

.panel__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent 60%, rgba(5, 6, 10, .55));
  box-shadow: inset 0 0 120px rgba(5, 6, 10, .55);
}

.panel__body { padding: clamp(1.6rem, 4vw, 3.4rem); overflow-y: auto; align-self: center; max-height: 100vh; }
.panel__kicker { font-family: var(--font-hud); font-size: .64rem; letter-spacing: .34em; text-transform: uppercase; color: var(--lock); margin-bottom: .9rem; }
.panel h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.08; margin-bottom: .4rem; }
.panel__tag { font-family: var(--font-hud); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; }
.panel__body > p { font-weight: 300; color: rgba(243, 237, 226, .92); margin-bottom: 1rem; max-width: 54ch; }
.panel__fine { font-size: .85rem; color: rgba(243, 237, 226, .7); }
.panel blockquote {
  border-left: 3px solid var(--crimson-hot); padding: .7rem 1rem; margin: 1.2rem 0;
  background: rgba(232, 185, 104, .05); font-weight: 300; font-size: .92rem; border-radius: 0 4px 4px 0;
}
.panel cite { font-style: normal; font-family: var(--font-hud); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.panel__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }

.pricegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1.1rem 0; max-width: 560px; }
.price {
  border: 1px solid rgba(232, 185, 104, .22); border-radius: 6px; padding: .8rem .9rem;
  display: grid; gap: .1rem;
}
.price--hot { border-color: var(--crimson-hot); background: rgba(152, 30, 50, .12); }
.price b { font-family: var(--font-hud); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.price i { font-style: normal; font-family: var(--font-display); font-size: 1.5rem; }
.price em { font-style: normal; font-size: .68rem; color: rgba(243, 237, 226, .65); line-height: 1.4; }

.panel__close {
  position: absolute; top: 1.1rem; right: 1.2rem; cursor: pointer;
  background: rgba(5, 6, 10, .6); border: 1px solid rgba(232, 185, 104, .4); color: var(--gold-hot);
  font-family: var(--font-hud); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .6rem 1.1rem; border-radius: 3px; backdrop-filter: blur(6px);
}
.panel__close:hover { border-color: var(--gold-hot); }
.panel__close:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 3px; }

/* ════════════════ MENU / A11Y FALLBACK ════════════════ */
.a11ymenu { position: fixed; inset: 0; z-index: 80; background: rgba(5, 6, 10, .92); backdrop-filter: blur(14px); display: grid; place-items: center; overflow-y: auto; }
.a11ymenu__inner { text-align: center; padding: 2rem; max-width: 780px; }
.a11ymenu__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.3rem); margin-bottom: .3rem; }
.a11ymenu__sub { color: rgba(243, 237, 226, .7); font-size: .9rem; margin-bottom: 1.6rem; }
.a11ymenu__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .7rem; margin-bottom: 1.6rem; }
.a11ymenu__grid button {
  cursor: pointer; background: rgba(232, 185, 104, .06); border: 1px solid rgba(232, 185, 104, .3);
  color: var(--paper); font-family: var(--font-hud); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .95rem .6rem; border-radius: 4px; transition: border-color .25s, background .25s;
}
.a11ymenu__grid button:hover, .a11ymenu__grid button:focus-visible { border-color: var(--gold-hot); background: rgba(232, 185, 104, .14); }
.a11ymenu__grid button.is-visited { border-color: var(--crimson-hot); color: var(--gold); }
.a11ymenu__grid button.is-visited::after { content: " ✓"; color: var(--lock); }
.a11ymenu__foot { font-size: .85rem; margin-bottom: 1.6rem; }
.a11ymenu__foot a { color: var(--gold-hot); text-decoration: none; }
.a11ymenu__foot a:hover { text-decoration: underline; }
.a11ymenu__close {
  cursor: pointer; background: none; border: 1px solid rgba(243, 237, 226, .35); color: var(--paper);
  font-family: var(--font-hud); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .8rem 1.6rem; border-radius: 3px;
}
.a11ymenu__close:hover { border-color: var(--gold); color: var(--gold-hot); }

/* ════════════════ HELP ════════════════ */
.helpbtn {
  position: fixed; z-index: 45; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1.2rem, 5vh, 2.6rem);
  width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; background: rgba(5, 6, 10, .6); backdrop-filter: blur(6px);
  border: 1px solid rgba(232, 185, 104, .4); color: var(--gold-hot);
  font-family: var(--font-hud); font-size: 1rem; font-weight: 600;
  transition: border-color .3s, color .3s;
}
.helpbtn:hover { border-color: var(--gold-hot); }
.helpbtn:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 3px; }

.helpmodal {
  position: fixed; inset: 0; z-index: 90; background: rgba(5, 6, 10, .82); backdrop-filter: blur(10px);
  display: grid; place-items: center; padding: 1.4rem; overflow-y: auto;
  animation: helpfadein .3s var(--ease) both;
}
@keyframes helpfadein { from { opacity: 0; } to { opacity: 1; } }
.helpmodal__panel {
  position: relative; max-width: 560px; width: 100%; padding: clamp(1.6rem, 4vw, 2.6rem);
  background: radial-gradient(ellipse 120% 100% at 20% 0%, #12101c 0%, var(--ink) 60%);
  border: 1px solid rgba(232, 185, 104, .25); border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.helpmodal__close {
  position: absolute; top: .9rem; right: .9rem; cursor: pointer;
  background: none; border: 1px solid rgba(243, 237, 226, .3); color: rgba(243, 237, 226, .8);
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-size: .85rem;
}
.helpmodal__close:hover { border-color: var(--gold-hot); color: var(--gold-hot); }
.helpmodal__kicker {
  font-family: var(--font-hud); font-size: .64rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--lock); margin-bottom: .6rem;
}
.helpmodal h2 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-bottom: 1.2rem;
}
.helpmodal__steps { display: grid; gap: .9rem; margin-bottom: 1.3rem; padding-left: 1.3rem; }
.helpmodal__steps li { font-weight: 300; color: rgba(243, 237, 226, .92); line-height: 1.55; }
.helpmodal__steps b { color: var(--gold); font-weight: 500; }
.helpmodal__steps kbd {
  font-family: var(--font-hud); font-size: .8em; background: rgba(232, 185, 104, .12);
  border: 1px solid rgba(232, 185, 104, .35); border-radius: 3px; padding: .05rem .4rem;
}
.helpmodal__fine { font-size: .82rem; color: rgba(243, 237, 226, .65); }

/* ════════════════ MUSIC BOX ════════════════ */
.musicbox {
  position: fixed; z-index: 43; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vh, 1.6rem);
  display: flex; align-items: center; gap: .6rem;
  background: rgba(5, 6, 10, .62); backdrop-filter: blur(8px);
  border: 1px solid rgba(232, 185, 104, .3); border-radius: 4px;
  padding: .45rem .6rem;
}
.musicbox__btn {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; flex: none; position: relative;
  border: 1.5px solid var(--gold); background: rgba(232, 185, 104, .1); color: var(--gold-hot);
  transition: background .25s, border-color .25s;
}
.musicbox__btn:hover { background: rgba(232, 185, 104, .22); border-color: var(--gold-hot); }
.musicbox__btn:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 3px; }
/* icons are drawn with CSS shapes, not text glyphs — Unicode ▶/❚❚ have inconsistent
   optical centers across fonts, which is what made the old icon look "off by a
   pixel or two"; a triangle/bars built from borders is pixel-exact every time */
.musicbox__btn::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--gold-hot);
  transform: translate(calc(-50% + 1.5px), -50%); /* +1.5px corrects the triangle's optical center */
}
.musicbox__btn[aria-pressed="true"]::before {
  width: 6px; height: 12px; border-style: solid; border-width: 0 2px;
  border-color: transparent; border-left-color: var(--gold-hot); border-right-color: var(--gold-hot);
  transform: translate(-50%, -50%);
}
.musicbox__wave { display: block; }

/* contact chip (sits above the music box) */
.contactchip {
  position: fixed; z-index: 42; left: clamp(1rem, 3vw, 2rem); bottom: clamp(4.6rem, 10vh, 5.4rem);
  font-family: var(--font-hud); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hud); text-decoration: none; background: rgba(5, 6, 10, .6); backdrop-filter: blur(6px);
  border: 1px solid rgba(232, 185, 104, .3); border-radius: 3px; padding: .55rem .9rem;
  transition: border-color .3s;
}
.contactchip b { color: var(--gold-hot); }
.contactchip:hover { border-color: var(--gold-hot); }

/* on desktop, flip the stack so the music/waveform box sits above the contact chip */
@media (min-width: 901px) {
  .musicbox { bottom: clamp(4.6rem, 10vh, 5.6rem); }
  .contactchip { bottom: clamp(1rem, 3vh, 1.6rem); }
}

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width: 900px) {
  :root { --scope-d: min(92vmin, 560px); }
  .panel { grid-template-columns: 1fr; grid-template-rows: 34vh 1fr; }
  .panel__body {
    max-height: none; align-self: stretch; min-height: 0; height: 100%;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .pricegrid { grid-template-columns: 1fr 1fr 1fr; gap: .4rem; }
  .hudline #hudHint { display: none; }
  .shootbtn { right: auto; left: 50%; transform: translateX(-50%); }
  /* the "LOC:" teleprinter line is wider than a phone screen — scroll it right→left and off, once */
  .intro__caption {
    left: 0; right: 0; transform: none; width: 100vw; white-space: nowrap; will-change: transform;
  }
  .intro__caption.is-on { animation: locScrollMobile 11s linear both; }
  @keyframes locScrollMobile {
    from { transform: translateX(100vw); }
    to   { transform: translateX(-110%); }
  }
}
@media (pointer: coarse) {
  .hudhint__desktop { display: none; }
}
@media (max-width: 560px) {
  .pricegrid { grid-template-columns: 1fr; }
  .contactchip { display: none; }
}

/* ════════════════ REDUCED MOTION ════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; }
  .stage.is-spinning { animation: none; }
  body.is-diving .stage, body.is-diving .scope { transition: none; }
}