/* ── HUD data-panel treatment for the homepage section cards (approved 2026-07-01)
   Turns each .so-card from a floating card into a cold, clinical HUD readout:
   translucent tinted panel + thin cyan frame + corner brackets + faint scanline,
   ice/steel type, glow dialed out. ADDITIVE over the existing .so-card layout:
   it does not touch positioning, the scale animation, or per-section alignment.
   Loaded after styles.css so it wins by source order.

   Every rule is scoped to html.mode-immersive. The section overlays also render
   in mode-static (mobile / no-WebGL) as normal scrolled content with their own
   .mob styling, and this treatment was designed and approved for the immersive
   HUD only (code review 2026-07-01: unscoped rules were silently restyling the
   mobile cards, including a backdrop-filter phones don't need).

   PSEUDO-ELEMENT NOTE (code review): styles.css already uses .so-card:before
   (full-card halo: inset gradient + blur + z-index:-1 + border-radius) and
   .so-card:after (16x2 gold accent dash at top-left), plus per-section hides
   (#overlay-1 :before, .so-center :before/:after) and body.hud-reading boosts.
   The bracket rules below therefore RESET every legacy property they don't
   use, re-enable the per-section hidden pseudos so all cards get both
   brackets, and neutralize the hud-reading halo boost that would otherwise
   leak its gradient + blur into a 13px bracket. */

:root {
  --hp-ice: #eaf1f6;
  --hp-steel: #aebecb;
  --hp-steel-dim: #8598a6;
  --hp-edge: #7fd3e6;
}

/* Panel surface: translucent cold tint + a faint scanline, thin cyan hairline,
   slight blur so the 3D scene bleeds through. The .so-center variant is listed
   explicitly: styles.css sets background-image:none on it at higher specificity
   (0,3,0), which silently stripped the tint from the Contact card. */
html.mode-immersive .section-overlay .so-card,
html.mode-immersive .section-overlay.so-center .so-card {
  border: 1px solid rgba(127, 211, 230, 0.16);
  background:
    linear-gradient(180deg, rgba(10, 16, 22, 0.5), rgba(10, 16, 22, 0.38)),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(127, 211, 230, 0.022) 4px, transparent 5px);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* Corner brackets (top-left + bottom-right), reading as a HUD readout without
   extra markup. The selector list includes the per-section pseudos styles.css
   hides (#overlay-1 :before, .so-center :before/:after) so every card gets a
   consistent frame; equal-or-higher specificity + later load order wins. */
html.mode-immersive .section-overlay .so-card::before,
html.mode-immersive .section-overlay .so-card::after,
html.mode-immersive #overlay-1 .so-card::before,
html.mode-immersive .section-overlay.so-center .so-card::before,
html.mode-immersive .section-overlay.so-center .so-card::after {
  content: "";
  display: block;
  position: absolute;
  /* reset the legacy halo/dash properties this pseudo is being repurposed from */
  inset: auto;
  margin: 0;
  background: none;
  z-index: auto;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
  box-shadow: none;
  /* the bracket itself */
  width: 13px;
  height: 13px;
  border: 1px solid var(--hp-edge);
  opacity: 0.8;
  pointer-events: none;
}
html.mode-immersive .section-overlay .so-card::before,
html.mode-immersive #overlay-1 .so-card::before,
html.mode-immersive .section-overlay.so-center .so-card::before {
  top: -1px; left: -1px; right: auto; bottom: auto;
  border-right: 0; border-bottom: 0;
}
html.mode-immersive .section-overlay .so-card::after,
html.mode-immersive .section-overlay.so-center .so-card::after {
  bottom: -1px; right: -1px; top: auto; left: auto;
  border-left: 0; border-top: 0;
}

/* body.hud-reading used to boost the legacy full-card halo (gradient + blur(5px))
   on .so-card:before. The halo is gone; without these neutralizers the boost
   rules would paint their gradient + blur inside the 13px bracket. The panel's
   own tint supplies the reading-mode contrast now. */
html.mode-immersive body.hud-reading .so-card::before,
html.mode-immersive body.hud-reading #overlay-1 .so-card::before {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Header strip: the eyebrow gets a trailing connector line, like a data readout. */
html.mode-immersive .section-overlay .so-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--hp-steel-dim);
}
html.mode-immersive .section-overlay .so-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(127, 211, 230, 0.3), rgba(127, 211, 230, 0.03));
}

/* Type: cold, precise, readable. Title lighter + ice; body a clean neutral sans,
   larger and steel-toned for legibility (the old size read too small). */
html.mode-immersive .section-overlay .so-title {
  font-weight: 500;
  color: var(--hp-ice);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
html.mode-immersive .section-overlay .so-body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--hp-steel);
}
html.mode-immersive .section-overlay .so-body .hi {
  color: var(--hp-ice);
  font-weight: 500;
}

/* The fixed side wings (left:3.4vw, up to 360px wide) overlap the centered
   section card below ~1400px. They're a wide-screen embellishment, so hide
   them when there isn't room, preventing the card panel from colliding with
   the wing text. */
@media (max-width: 1400px) {
  html.mode-immersive .so-wing { display: none !important; }
}