/* ============================================================
   Luxora Networks — cinematic experience
   ============================================================ */

:root {
  --bg: #05070a;
  --ink: #eef1f6;
  --ink-dim: rgba(238, 241, 246, 0.55);
  --ink-faint: rgba(238, 241, 246, 0.32);
  --red: #e51b3f;
  --beam: #ffd7dd;
  --line: rgba(238, 241, 246, 0.1);
  --font-display: "Space Grotesk", "Inter", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }
body.locked { overflow: hidden; height: 100dvh; }

::selection { background: rgba(229, 27, 63, 0.35); color: #fff; }

/* ---------- persistent layers ---------- */

#webgl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(2, 3, 5, 0.55) 100%);
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 3vw, 30px) clamp(20px, 4vw, 48px);
  opacity: 0; /* revealed after loader */
}
.nav-logo img { height: clamp(30px, 4vw, 40px); display: block; }
.nav-actions { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); position: relative; }
.nav-audio {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-dim);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.35s, transform 0.35s;
}
.nav-audio:hover { color: var(--ink); transform: scale(1.1); }
.nav-audio svg { width: 22px; height: 22px; }

.refresh-audio-prompt {
  position: absolute;
  top: calc(100% + 15px);
  right: 60px; /* roughly under the audio icon */
  background: rgba(10, 15, 25, 0.6);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateY(-8px);
}
.refresh-audio-prompt.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0);
}
.refresh-audio-prompt span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  white-space: nowrap;
}
.refresh-audio-prompt .actions {
  display: flex;
  gap: 8px;
}
.refresh-audio-prompt button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--ink);
  padding: 4px 12px;
  font-size: 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.05em;
}
.refresh-audio-prompt button:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.3);
}

.nav-contact {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: all 0.35s;
}
.nav-contact:hover {
  border-color: rgba(255,255,255,0.4);
  color: var(--ink);
}
  transition: color 0.35s, border-color 0.35s, background 0.35s;
}
.nav-contact:hover {
  color: var(--ink);
  border-color: rgba(229, 27, 63, 0.5);
  background: rgba(229, 27, 63, 0.08);
}

/* ---------- loader ---------- */

#loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Solid dark background so it hides content below */
  background-color: #030407;
  /* CSS-based stars and subtle galaxy glows */
  background-image: 
    radial-gradient(1px 1px at 25px 5px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.5px 1.5px at 50px 25px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 125px 75px, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 50px 100px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 100px 50px, rgba(255,255,255,0.8), transparent),
    radial-gradient(circle at 20% 80%, rgba(65, 20, 90, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(229, 27, 63, 0.12) 0%, transparent 50%);
  background-size: 
    150px 150px, 
    180px 180px, 
    250px 250px, 
    300px 300px, 
    200px 200px, 
    100% 100%, 
    100% 100%;
}
.loader-core { position: relative; width: min(420px, 78vw); }
.loader-logo { width: 100%; display: block; opacity: 0; transform: scale(0.94); }


/* ---------- layout / panels ---------- */

main { position: relative; z-index: 10; }

.panel {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copy {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 0 clamp(22px, 6vw, 64px);
  max-width: 1080px;
}

.kicker {
  font-family: var(--font-display);
  font-size: clamp(11px, 1.3vw, 13px);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: clamp(18px, 3vw, 30px);
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--ink);
}
h1 { font-size: clamp(34px, 7.6vw, 96px); }
h2 { font-size: clamp(32px, 5.6vw, 72px); }

.sub {
  margin-top: clamp(18px, 2.6vw, 28px);
  font-weight: 300;
  font-size: clamp(15px, 1.8vw, 19px);
  line-height: 1.75;
  color: var(--ink-dim);
  letter-spacing: 0.01em;
}

.br-m { display: none; }
@media (min-width: 640px) { .br-m { display: inline; } }

/* gsap-revealed elements start hidden */
.reveal { opacity: 0; transform: translateY(34px); }

/* scroll cue */
.scroll-cue {
  position: absolute;
  bottom: clamp(26px, 5vh, 48px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cue-line {
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, transparent, rgba(238,241,246,0.55));
  overflow: hidden;
  position: relative;
}
.cue-line::after {
  content: "";
  position: absolute;
  left: 0; top: -40%;
  width: 100%; height: 40%;
  background: #fff;
  animation: cuedrop 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes cuedrop { to { top: 110%; } }
.cue-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* pinned scene copy — absolutely stacked, faded by gsap */
.pinned { overflow: hidden; }
.stage-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  text-align: center;
  padding: 0 clamp(22px, 6vw, 64px);
}
.stage-copy h2 { text-shadow: 0 2px 40px rgba(3, 4, 7, 0.9); }
.stage-copy .sub { text-shadow: 0 1px 24px rgba(3, 4, 7, 0.9); }

/* Designous 'A beam of light' & 'Power travels' text */
#ground .stage-copy[data-step="1"],
#ground .stage-copy[data-step="2"] {
  justify-content: flex-start;
  padding-top: clamp(80px, 15vh, 180px);
}
#orbit-scene .stage-copy[data-step="1"],
#orbit-scene .stage-copy[data-step="2"] {
  justify-content: flex-end;
  padding-bottom: 15vh; /* Push lower, just above the earth */
}
#ground .stage-copy[data-step="1"] h2,
#ground .stage-copy[data-step="2"] h2 {
  font-size: clamp(46px, 6vw, 92px);
  font-weight: 300;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 40%, #ff5274 120%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0px 8px 32px rgba(229, 27, 63, 0.3));
}
#orbit-scene .stage-copy[data-step="1"] h2,
#orbit-scene .stage-copy[data-step="2"] h2 {
  font-size: clamp(32px, 4vw, 64px); /* Make it smaller to avoid overlap */
  font-weight: 300;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 40%, #ff5274 120%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0px 8px 32px rgba(229, 27, 63, 0.3));
}

#city .stage-copy[data-step="1"] {
  justify-content: flex-start;
  padding-top: 10vh; /* positioned in the upper sky above the buildings */
}

/* stages (dioramas) */
.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ============================================================
   scene 1 · ground
   ============================================================ */

.ground .ground-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(7, 10, 16, 0.25) 42%,
    rgba(7, 10, 15, 0.78) 74%,
    rgba(6, 8, 12, 0.95) 100%
  );
}

.mountains {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 72%;
}
.ridge.far  { fill: #18212f; }
.ridge.near { fill: #0f1825; }

.outpost .tent { fill: #11161f; stroke: rgba(238,241,246,0.16); stroke-width: 0.8; }
.outpost .gear { fill: #10151d; stroke: rgba(238,241,246,0.14); stroke-width: 0.8; }
.outpost .mast { stroke: rgba(238,241,246,0.35); stroke-width: 1.1; }
.outpost .receiver { fill: #161c26; stroke: rgba(238,241,246,0.4); stroke-width: 0.9; }
.outpost .rx-glow {
  fill: #ffe9ec;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 215, 221, 0.9));
}
.outpost .fiber {
  fill: none;
  stroke: rgba(255, 215, 221, 0.4);
  stroke-width: 1;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.outpost .led { fill: var(--red); opacity: 0; }

.beam-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.beam-halo {
  fill: none;
  stroke: rgba(255, 215, 221, 0.16);
  stroke-width: 5;
  filter: blur(3px);
}
.beam-core {
  fill: none;
  stroke: url(#beamGrad);
  stroke-width: 1.4;
}
.beam-halo, .beam-core { visibility: hidden; }
.beam-pulse {
  fill: #fff;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(255, 230, 235, 0.95));
}

.rooftop {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(300px, 42vw, 620px);
  height: 46%;
}
.parapet {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 58%;
  background: linear-gradient(to bottom, #0b1018, #07090e);
  border-top: 1px solid rgba(238, 241, 246, 0.10);
  -webkit-mask-image: linear-gradient(to right, #000 78%, transparent);
          mask-image: linear-gradient(to right, #000 78%, transparent);
}
.transceiver {
  position: absolute;
  left: 6%;
  bottom: 44%;
  width: clamp(200px, 26vw, 390px);
  transform: scaleX(-1);   /* lens faces right, toward the beam target */
  filter: brightness(0.92) drop-shadow(0 18px 32px rgba(0, 0, 0, 0.6));
}
.power-module {
  position: absolute;
  left: 30%;
  bottom: 13%;
  width: clamp(64px, 7.5vw, 110px);
  aspect-ratio: 1;
}
.power-module img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: saturate(0.55) brightness(0.85);
}
.power-halo {
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 235, 238, 0.13), transparent 62%);
  opacity: 0;
}

/* ============================================================
   scene 3 · interior
   ============================================================ */

.interior .room {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(8, 10, 14, 0.92) 0%, rgba(10, 12, 17, 0.97) 55%, rgba(7, 9, 13, 1) 100%);
}
.office-bg {
  position: absolute;
  top: 10%; left: 0; width: 100%; height: 60%;
  display: flex; gap: 4px; padding: 0 10%;
  opacity: 0.15;
}
.glass-wall {
  flex: 1;
  background: linear-gradient(to bottom, rgba(255,255,255,0.05), transparent);
  border: 1px solid rgba(255,255,255,0.1);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

.ceiling-light.navocular-light {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 180px; 
  height: 40px;
  border-radius: 0 0 90px 90px;
  background: #080a0f;
  border-bottom: 2px solid rgba(255,255,255,0.8);
  box-shadow: inset 0 -10px 20px rgba(255,255,255,0.4), 0 5px 30px rgba(255, 244, 235, 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  z-index: 10;
}
.navocular-light .brand {
  color: #05070a;
  background: rgba(255, 255, 255, 0.9);
  padding: 1px 6px;
  border-radius: 2px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-size: 0.5rem;
}

.light-cone {
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: min(90vw, 800px);
  height: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at top center, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.05) 50%, transparent 75%);
  mask-image: radial-gradient(ellipse at top center, black 0%, rgba(0,0,0,0.8) 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at top center, black 0%, rgba(0,0,0,0.8) 40%, transparent 75%);
  z-index: 5;
  pointer-events: none;
}

/* Scattered Data Stream */
.data-stream {
  width: 100%; height: 100%;
  position: absolute; top: 0; left: 0;
}
.data-stream.scattered span {
  position: absolute;
  top: -50px;
  display: inline-block;
  color: rgba(255,255,255,0.4);
  font-family: 'Courier New', Courier, monospace;
  font-weight: normal;
  font-size: 1.4rem;
  animation: fall-scattered 6s linear infinite;
  text-shadow: 0 0 5px rgba(255,255,255,0.8);
}
.data-stream.scattered span:nth-child(even) { animation-duration: 8s; opacity: 0.2; }
.data-stream.scattered span:nth-child(3n) { animation-duration: 5s; font-size: 1.8rem; opacity: 0.6; font-weight: bold; }
.data-stream.scattered span:nth-child(5n) { animation-duration: 7s; opacity: 0.3; font-size: 1rem; }
@keyframes fall-scattered {
  0% { transform: translateY(0); }
  100% { transform: translateY(500px); }
}

/* Custom Standing Desk */
.conference-room.custom-desk {
  position: absolute;
  bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: min(700px, 90vw);
  height: 200px;
}
.table-surface {
  position: absolute;
  top: 50px; left: 0; width: 100%; height: 60px;
  background: linear-gradient(to bottom, #1f2329, #0a0c10);
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.table-front-edge {
  position: absolute;
  top: 110px; left: 0; width: 100%; height: 12px;
  background: #05070a;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.8);
}
.table-leg {
  position: absolute;
  top: 122px; width: 15px; height: 100px;
  background: #080a0f;
  border-left: 2px solid rgba(255,255,255,0.05);
}
.table-leg::before {
  content: ""; position: absolute; top: -10px; width: 40px; height: 10px; background: #080a0f; clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
.table-leg.left { left: 15%; }
.table-leg.left::before { right: 0; transform: scaleX(-1); }
.table-leg.right { right: 15%; }
.table-leg.right::before { left: 0; }

/* Mounted Device Setup */
.device-setup {
  position: absolute;
  top: 15px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center;
  z-index: 10;
}
.main-screen {
  width: 160px; height: 100px;
  background: #181d26;
  border-radius: 4px;
  border: 2px solid #2a313c;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 5px 15px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.4s;
}
.screen-content {
  width: 150px; height: 90px;
  background: linear-gradient(to bottom, #111e25, #080d12);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.4s;
}
.mockup-header {
  position: absolute; top: 5px; left: 5px; right: 5px; height: 10px;
  display: flex; justify-content: space-between;
}
.m-logo { width: 15px; height: 5px; background: rgba(255,255,255,0.5); border-radius: 2px; }
.m-nav { width: 30px; height: 3px; background: rgba(255,255,255,0.2); }
.mockup-title {
  color: rgba(255,255,255,0.8); font-family: sans-serif; font-size: 0.4rem; font-weight: bold; margin-top: 10px;
}

.mounted-sensor {
  width: 25px; height: 50px;
  background: #e2e8f0;
  border-radius: 0 4px 4px 0;
  margin-left: -2px; /* attach to screen */
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; align-items: center; padding: 5px 0; gap: 4px;
}
.sensor-port { width: 12px; height: 8px; background: #05070a; border-radius: 2px; }
.sensor-port.bottom { height: 12px; }
.sensor-logo { width: 8px; height: 8px; border-radius: 50%; background: #00f0ff; opacity: 0; transition: opacity 0.4s; }

/* GSAP Lit State */
.custom-desk.lit .screen-content { opacity: 1; }
.custom-desk.lit .main-screen { box-shadow: 0 0 20px rgba(0, 240, 255, 0.2); }
.custom-desk.lit .sensor-logo { opacity: 1; box-shadow: 0 0 5px #00f0ff; }

/* ============================================================
   scene 4 · city
   ============================================================ */

.skyline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 86%;
}
.row.far rect  { fill: #0a0e15; }
.row.near rect { fill: #070a10; }
.windows rect  { fill: rgba(255, 241, 224, 0.5); opacity: 0; }

.node {
  fill: #ffe9ec;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 220, 226, 0.95));
}
.citylink {
  fill: none;
  stroke: rgba(255, 215, 221, 0.55);
  stroke-width: 1.1;
  filter: drop-shadow(0 0 3px rgba(255, 215, 221, 0.5));
  visibility: hidden;
}
.powerlink {
  fill: none;
  stroke: rgba(255, 246, 238, 0.14);
  stroke-width: 5;
  filter: blur(2px);
  visibility: hidden;
}
.city .stage::after {
  /* low atmospheric haze at street level */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26%;
  background: linear-gradient(to top, rgba(10, 13, 19, 0.9), transparent);
}

/* ============================================================
   finale
   ============================================================ */

.finale { flex-direction: column; }

.finale-card {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(45px) saturate(160%);
  -webkit-backdrop-filter: blur(45px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 48px;
  padding: clamp(60px, 8vh, 120px) clamp(20px, 5vw, 60px);
  width: min(92vw, 1000px);
  margin: 0 auto;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 6vh, 64px);
  z-index: 20;
}

.final-line { font-size: clamp(34px, 5.5vw, 76px); text-shadow: 0 2px 20px rgba(0,0,0,0.5); }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: clamp(13px, 1.5vw, 15px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 16px 30px;
  border: 1px solid rgba(238, 241, 246, 0.22);
  border-radius: 999px;
  background: rgba(238, 241, 246, 0.03);
  transition: border-color 0.4s, background 0.4s, transform 0.4s;
}
.cta svg { width: 17px; height: 17px; transition: transform 0.4s; }
.cta:hover {
  border-color: rgba(229, 27, 63, 0.65);
  background: rgba(229, 27, 63, 0.1);
  transform: translateY(-2px);
}
.cta:hover svg { transform: translateX(4px); }

.site-footer {
  position: absolute;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.foot-sep { color: rgba(229, 27, 63, 0.6); }

/* ============================================================
   responsive
   ============================================================ */

@media (max-width: 820px) {
  .rooftop { width: 60vw; }
  .transceiver { width: clamp(150px, 34vw, 260px); }
  .power-module { left: 34%; }
  .mountains { height: 62%; }
  .laptop { left: 12%; }
  .rack { right: 8%; }
}

@media (max-width: 560px) {
  h1 { letter-spacing: -0.01em; }
  .nav-contact { padding: 8px 14px; font-size: 11.5px; }
  .rooftop { width: 78vw; height: 40%; }
  .site-footer { flex-direction: column; align-items: center; gap: 4px; }
  .foot-sep { display: none; }
  .refresh-audio-prompt { 
    right: 0; 
    left: auto;
    padding: 10px 12px; 
    gap: 10px; 
  }
  .refresh-audio-prompt span { font-size: 10px; }
  .audio-prompt { transform: scale(0.9); }
}

/* ============================================================
   reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .cue-line::after { animation: none; }
  #loader { display: none; }
  .nav { opacity: 1; }
  .reveal { opacity: 1; transform: none; }
  .stage-copy { position: relative; opacity: 1; visibility: visible; pointer-events: auto; }
  .pinned { min-height: auto; padding: 18vh 0; flex-direction: column; gap: 8vh; }
  .stage { position: relative; height: 60vh; }
  .beam-halo, .beam-core, .citylink, .powerlink { visibility: visible; }
  .node, .rx-glow, .light-cone { opacity: 0.6; }
}