/* ============================================================
   HUD REMODEL — additive futuristic/cinematic theme layer.
   Transforms the whole site's look without changing page structure.
   Reduced-motion safe. Dark-first; light-theme overrides at bottom.
   ============================================================ */

:root{
  --hud-glow: 0 0 24px -4px color-mix(in srgb, var(--teal) 55%, transparent);
  --hud-edge: color-mix(in srgb, var(--teal) 40%, transparent);
}

/* --- deeper cinematic backdrop with vignette + subtle scanlines --- */
body{
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb,var(--teal) 5%,transparent), transparent 55%),
    var(--bg);
}
body::before{ opacity:.7; }  /* keep existing grid but a touch stronger */

@media (prefers-reduced-motion: no-preference){
  /* faint moving scanline sweep over the whole viewport */
  body > .hud-scan{position:fixed; inset:0; z-index:0; pointer-events:none;
    background:repeating-linear-gradient(180deg, transparent 0, transparent 2px, rgba(255,255,255,.010) 3px, transparent 4px);
    mask-image:linear-gradient(180deg,#000,transparent 90%)}
}

/* --- PANELS become glowing HUD frames --- */
.panel-card{
  border:1px solid var(--line-2);
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--teal) 5%, var(--panel)), var(--panel)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--teal) 8%,transparent),
    0 30px 70px -34px rgba(0,0,0,.9),
    inset 0 1px 0 color-mix(in srgb,var(--teal) 10%,transparent),
    var(--hud-glow) !important;
  position:relative;
}
/* animated HUD corner brackets (all four) via layered pseudo + child sweeps */
.panel-card::before,.panel-card::after{
  border-color:var(--teal) !important; opacity:.85 !important; width:16px !important; height:16px !important;
  box-shadow:0 0 8px -1px color-mix(in srgb,var(--teal) 60%,transparent);
}
.panel-head .detail{
  background:linear-gradient(180deg, color-mix(in srgb,var(--teal) 18%,transparent), transparent) !important;
  border:1px solid var(--hud-edge) !important;
  box-shadow:0 0 16px -4px color-mix(in srgb,var(--teal) 60%,transparent), inset 0 0 12px -6px var(--teal) !important;
  color:var(--teal) !important;
}
.panel-head h2.disp{ text-shadow:0 0 20px color-mix(in srgb,var(--teal) 25%,transparent); }

/* --- HERO: cinematic title --- */
.hero-h1{
  text-shadow:0 0 60px color-mix(in srgb,var(--teal) 30%,transparent);
}
.eyebrow{ text-shadow:0 0 14px color-mix(in srgb,var(--teal) 40%,transparent); }

/* --- NAV: charged active state --- */
/* nav active tab: clean underline only, no glow */

/* --- HEADER: glass + glow underline --- */
header{ box-shadow:0 1px 0 color-mix(in srgb,var(--teal) 14%,transparent), 0 18px 40px -30px rgba(0,0,0,.8); }
.ticker{ box-shadow:inset 0 0 30px -18px color-mix(in srgb,var(--teal) 40%,transparent); }

/* --- BUTTONS / CHIPS: neon edge on hover --- */
.msc-from button:hover,.fam-kid:hover,.uni:hover,.subj:hover,.cc-course:hover,
.pin:hover,.qz-opts button:hover,.region button:hover,.theme-tog:hover{
  box-shadow:0 0 14px -3px color-mix(in srgb,var(--teal) 55%,transparent);
  border-color:var(--teal) !important;
}
.msc,.fam-branch,.about-block,.sk,.dw{
  box-shadow:0 20px 50px -32px rgba(0,0,0,.85);
}
.msc:hover,.fam-branch:hover,.about-block:hover,.dw:hover{
  box-shadow:0 26px 60px -30px rgba(0,0,0,.9), var(--hud-glow) !important;
}

/* --- DATA BARS: glowing energy fill --- */
.wr-bar,.rr-bar,.gr-fill,.oc-fill,.ws-fill,.spectrum-fill,.bar-fill{
  box-shadow:0 0 10px -1px color-mix(in srgb,var(--teal) 45%,transparent);
}

/* --- CHARTS: glow on lines/dots --- */
svg path[stroke],svg polyline[stroke]{ filter:drop-shadow(0 0 4px color-mix(in srgb,var(--teal) 40%,transparent)); }

/* --- big numbers glow --- */
.dw-big #dashIdx,.lead-stat b,.ct-wins,.mn-idx b,.tm-hero-big,.hero-live b{
  text-shadow:0 0 28px color-mix(in srgb,var(--teal) 45%,transparent) !important;
}

/* --- HUD animated corner-scan on panels (desktop only) --- */
@media (min-width:761px) and (prefers-reduced-motion: no-preference){
  .panel-card{overflow:hidden}
  .hud-tick{position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:4}
  .hud-tick::before{content:""; position:absolute; top:0; left:-40%; width:40%; height:2px;
    background:linear-gradient(90deg,transparent,var(--teal),transparent);
    box-shadow:0 0 12px 1px color-mix(in srgb,var(--teal) 60%,transparent);
    animation:hudSweep 6s ease-in-out infinite}
  @keyframes hudSweep{0%{left:-40%}50%{left:100%}100%{left:100%}}
}

/* --- LIGHT THEME (blueprint) HUD adjustments --- */
html[data-theme="light"] body{
  background:radial-gradient(120% 90% at 50% -10%, rgba(127,227,255,.12), transparent 55%), var(--bg);
}
html[data-theme="light"] .panel-card{
  box-shadow:0 0 0 1px rgba(127,227,255,.14), 0 30px 70px -34px rgba(4,20,44,.5),
    inset 0 1px 0 rgba(127,227,255,.12), 0 0 24px -6px rgba(127,227,255,.35) !important;
}

/* ============ REFINEMENT PASS ============ */
/* nav: smooth underline that grows in, quiet hover */
nav a{ position:relative; }
nav a::after{ content:""; position:absolute; left:11px; right:11px; bottom:-1px; height:2px;
  background:var(--teal); transform:scaleX(0); transform-origin:center; transition:transform .3s var(--ease-out); opacity:.9; }
nav a.on::after{ transform:scaleX(1); }
nav a:hover::after{ transform:scaleX(.4); opacity:.5; }
nav a.on{ border-bottom-color:transparent !important; }  /* let the animated underline handle it */

/* ticker: subtle fade at the edges so it scrolls in/out gracefully */
.ticker{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }

/* region + theme buttons: springier press */
.region button:active,.theme-tog:active{ transform:scale(.95); }

/* brand wordmark: faint glow on hover */
.brand:hover .wordmark span{ text-shadow:0 0 14px color-mix(in srgb,var(--teal) 55%,transparent); transition:text-shadow .25s; }

/* smoother scroll behaviour site-wide */
html{ scroll-behavior:smooth; }

/* ============ MOBILE NAV FIX ============ */
/* keep the header/nav above the first-visit intro so it's always tappable */
header{ z-index:300 !important; position:sticky; }
.navpanel{ z-index:320 !important; }
.navbtn{ z-index:320 !important; position:relative; }
/* intro overlay sits below the header now */
.intro-ov{ z-index:180 !important; }