/* ── Arched-visor nav, feat/arch-visor-nav, 2026-07-01 ───────────────────
   Restyles the six .nav-dot buttons from the right-edge vertical rail into a
   shallow top-center "helmet visor" arch: glowing text, no boxes, a plain
   topic label on top with the branded name whispered beneath and a tiny roman
   index marker above. scene.js is deliberately NOT touched, the six .nav-dot
   nodes and their data-section order are preserved, so its position-based
   active-section sync (fo[i] ↔ section i) keeps working with zero JS change.

   Loaded unconditionally after styles.css, but the rail is immersive-only:
   `html.mode-static .nav-rail{display:none!important}` (in styles.css) keeps
   this hidden on mobile/static, so loading it there is harmless.

   NOTE: styles.css still carries a dead `@media(max-width:640px)
   .nav-rail{right:3px!important…}` rule, inert because the rail is
   display:none under mode-static (≤760px). Left as-is on purpose; do not
   "fix" it in a way that un-hides the rail on mobile. */

/* Rail → a wide, thin "visor brow" HUD band spread across the top. Full-width,
   buttons distributed edge-to-edge (space-between) with gutters that clear the
   corner brand/session labels. position:fixed keeps it locked over the 3D scene
   as the camera looks around, the digital layer of the two-layer HUD. */
.nav-rail {
  left: 0;
  right: 0;
  top: 18px;
  transform: none;
  /* Above the visible section overlay (.section-overlay.visible is z-index 96):
     that overlay's full-viewport .so-inner has pointer-events:auto and would
     otherwise sit on top of the arch and swallow every nav-label click. Kept
     below the custom cursor (z-index 100). */
  z-index: 98;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  /* gutters must always exceed the fixed HUD corner widths (brand ~136px left)
     so the outer buttons never collide with them, even at the 900px minimum. */
  padding: 0 clamp(150px, 15vw, 240px);
  max-width: none;
  background: none;
  border: none;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.9));
}

/* Each button → centered vertical stack; the diamond :before is dropped.
   --lift / --tilt (set per position below) feed one shared transform so the
   arch geometry lives in data, not scattered offsets. Transitions slowed to
   0.55s so labels don't flicker as the cursor traverses the row. */
.nav-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  grid-template-columns: none;
  column-gap: 0;
  row-gap: 0;
  min-width: 0;
  padding: 2px 4px;
  text-align: center;
  transform: translateY(var(--lift, 0)) rotate(var(--tilt, 0deg));
  transition: color 0.55s ease, opacity 0.55s ease, filter 0.55s ease,
    text-shadow 0.55s ease, transform 0.55s ease;
}
.nav-dot::before { display: none; }

/* Tiny roman index marker (was display:none), plain label primary, branded
   name as a whispered subtitle. */
.nav-dot .roman {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.24em;
  opacity: 0.45;
  line-height: 1;
}
.nav-dot .label {
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.05;
}
.nav-dot .desc {
  font-size: 7.5px;
  letter-spacing: 0.1em;
  line-height: 1.15;
  opacity: 0.55;
}

/* Shallow arch: center pair highest, outer buttons drop and tilt outward. */
.nav-dot:nth-child(1) { --lift: 30px; --tilt: -3deg; }
.nav-dot:nth-child(2) { --lift: 13px; --tilt: -1.5deg; }
.nav-dot:nth-child(3) { --lift: 1px;  --tilt: -0.4deg; }
.nav-dot:nth-child(4) { --lift: 1px;  --tilt: 0.4deg; }
.nav-dot:nth-child(5) { --lift: 13px; --tilt: 1.5deg; }
.nav-dot:nth-child(6) { --lift: 30px; --tilt: 3deg; }

/* Focus one, dim the rest. Hovering the rail dims every button; the hovered
   one overrides back to full brightness + a gold glow. Source order (this
   rule after the dim rule) wins at equal specificity. Reduced-motion is
   already handled globally in styles.css, so no extra guard here. */
.nav-rail:hover .nav-dot { opacity: 0.34; filter: saturate(0.45); }
.nav-rail .nav-dot:hover {
  opacity: 1;
  filter: none;
  color: #fff0d2f2;
  text-shadow: 0 0 9px var(--gold), 0 1px 2px rgba(0, 0, 0, 0.95);
}
.nav-rail .nav-dot:hover .desc { opacity: 0.8; }

/* ── Explore ▾ : the single page-destinations disclosure (built by hud-nav.js),
   appended to the arch and pinned to the arch's right edge, out of the flex flow
   so it never disturbs the 6-topic spacing. Glowing text to match the buttons;
   the dropdown menu uses hud.css's .hud-nav-menu positioning. */
.nav-rail .hud-nav-explore {
  position: absolute;
  top: 78px;
  right: clamp(14px, 2vw, 40px);
  align-self: flex-start;
}
.nav-rail .hud-nav-explore .hud-nav-sum {
  list-style: none;
  cursor: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: Rajdhani, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #e8dfd099;
  background: none;
  border: none;
  padding: 0;
  min-height: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  transition: color 0.55s ease, opacity 0.55s ease, text-shadow 0.55s ease;
}
.nav-rail .hud-nav-explore .hud-nav-sum::-webkit-details-marker { display: none; }
.nav-rail:hover .hud-nav-explore { opacity: 0.34; }
.nav-rail .hud-nav-explore:hover { opacity: 1; }
.nav-rail .hud-nav-explore:hover .hud-nav-sum {
  color: #fff0d2f2;
  text-shadow: 0 0 9px var(--gold), 0 1px 2px rgba(0, 0, 0, 0.95);
}
.nav-rail .hud-nav-explore .hud-nav-caret { font-size: 8px; opacity: 0.7; }
.nav-rail .hud-nav-explore .hud-nav-mhd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hud-primary, #00e5ff);
  opacity: 0.65;
  padding: 8px 11px 2px;
}

/* ── Halo-style translucent cyan HUD treatment (user 2026-07-01) ──
   Glowing digital cyan, slightly see-through so the 3D scene bleeds behind the
   glyphs, larger text, and a periodic "reload" flicker that briefly reveals the
   environment then re-resolves the HUD. Cyan matches the existing HUD readouts. */
.nav-rail .nav-dot,
.nav-rail .hud-nav-explore .hud-nav-sum {
  color: rgba(0, 229, 255, 0.82);
  text-shadow: 0 0 5px rgba(0, 229, 255, 0.35), 0 0 1px rgba(0, 229, 255, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* Thinner, more digital, less "bold/clownish": the site's HUD monospace at a
   light weight, wider tracking for legibility. */
.nav-dot .label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.06em;
}
.nav-dot .desc { font-weight: 300; font-size: 10px; letter-spacing: 0.08em; }
.nav-dot .roman { font-size: 9.5px; color: rgba(0, 229, 255, 0.5); }
.nav-rail .hud-nav-explore .hud-nav-sum {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.nav-rail:hover .nav-dot { opacity: 0.3; filter: none; }
.nav-rail .nav-dot:hover,
.nav-rail .hud-nav-explore:hover .hud-nav-sum {
  opacity: 1;
  color: rgba(190, 248, 255, 0.98);
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.85), 0 0 3px rgba(120, 240, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.55);
}
.nav-rail .nav-dot.active {
  color: rgba(120, 240, 255, 0.96);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.8), 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* periodic HUD "reload": a brief flicker that lets the 3D world show through,
   then the HUD re-resolves. Pauses while hovering so it never flickers mid-read. */
@keyframes hud-arch-reload {
  0%, 87%, 100% { opacity: 1; }
  88.5% { opacity: 0.12; }
  90% { opacity: 0.72; }
  91.5% { opacity: 0.2; }
  93% { opacity: 0.95; }
  94% { opacity: 0.55; }
  95% { opacity: 1; }
}
.nav-rail { animation: hud-arch-reload 11s ease-in-out infinite; will-change: opacity; }
/* Pause for hover, keyboard focus, and an open Explore menu: the flicker must
   never blank the nav mid-read for keyboard users or over an open dropdown. */
.nav-rail:hover,
.nav-rail:focus-within,
.nav-rail:has(.hud-nav-explore[open]) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .nav-rail { animation: none; } }

/* The consolidated Explore menu holds ~21 rows; on short windows it would clip
   below the viewport with no scroll path. Cap it to the viewport and scroll. */
.nav-rail .hud-nav-explore .hud-nav-menu {
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}

/* ── Option A corner treatment ── the arch now shows the active section, so the
   top-left roman + section-name are redundant (kept in DOM for scene.js, hidden
   here). The top-right session block trims to two lines so the wide arch clears
   it. Bottom corners (scene telemetry, credentials, clock) are untouched. */
.hud-tl #hud-roman,
.hud-tl #hud-section-name { display: none; }
.hud-tr > div:nth-of-type(3),
.hud-tr > div:nth-of-type(4) { display: none; }