/* =====================================================================
   theme-quantum.css — NeoShield QUANTUM X design layer  (v2 "Aurora HUD")
   PURE OVERRIDE stylesheet: loads after style.css / seo-responsive.css and
   re-skins the site through the existing token system. No HTML, no PHP,
   no layout-property overrides (display/position/sizing untouched), so no
   page can break. Everything degrades gracefully: @property, color-mix()
   and scroll-driven animation are progressive enhancements; old browsers
   simply get the v1-style static look. Reduced motion fully respected.

   Futuristic-but-trustworthy rules of this layer:
   - motion is slow, ambient and purposeful (no flicker, no strobing)
   - glow is reserved for interaction and the hero signature
   - text contrast never drops below the existing readable palette
   ===================================================================== */

/* ---- 0. Registered properties (enable animatable gradients) ---------- */
@property --ns-angle   { syntax:'<angle>'; initial-value:0deg;   inherits:false }

/* ---- 1. Tokens -------------------------------------------------------- */
:root{
  --bg:#060a12;
  --panel:#0f1726;  --panel-2:#0b1220;
  --line:#24334f;   --line-soft:#1a2740;
  --ink:#edf3fc;    --muted:#94a4be;  --faint:#5f6c86;
  --accent:#41d8ff; --accent-2:#8f7dff; --accent-3:#39ffd0;
  --ok:#3ad29f; --warn:#ffb454; --crit:#ff5d6c;
  --glow:rgba(65,216,255,.30); --glow-2:rgba(143,125,255,.24);
  --r:14px;
  --ring:conic-gradient(from var(--ns-angle),
        var(--accent) 0%, var(--accent-2) 28%, transparent 42%,
        transparent 58%, var(--accent-3) 74%, var(--accent) 100%);
  --shadow-1:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -18px rgba(0,0,0,.85);
  --shadow-2:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 50px -22px rgba(0,0,0,.9);
}
@supports (color: color-mix(in oklab, red, blue)){
  :root{
    --glow:color-mix(in oklab, var(--accent) 32%, transparent);
    --glow-2:color-mix(in oklab, var(--accent-2) 26%, transparent);
  }
}

/* ---- 2. Ambient field --------------------------------------------------
   body::before (existing texture) stays; the aurora sits behind it. ----- */
@keyframes nsAurora{
  0%  {background-position:12% 0%, 88% 12%, 50% 100%}
  50% {background-position:0% 22%, 100% 0%, 38% 84%}
  100%{background-position:12% 0%, 88% 12%, 50% 100%}
}
body{background-color:var(--bg)}
body::after{
  content:"";position:fixed;inset:-12%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(46% 38% at 12% 0%,   rgba(65,216,255,.11), transparent 70%),
    radial-gradient(42% 36% at 88% 12%,  rgba(143,125,255,.13), transparent 70%),
    radial-gradient(60% 42% at 50% 100%, rgba(57,255,208,.05),  transparent 72%);
  background-repeat:no-repeat;
  filter:blur(28px) saturate(1.15);
}
@media (prefers-reduced-motion: no-preference){
  body::after{animation:nsAurora 36s ease-in-out infinite}
}
::selection{background:rgba(65,216,255,.28);color:var(--ink)}
*{scrollbar-width:thin;scrollbar-color:#2a3a5c transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#33466e,#22304d);
  border-radius:8px;border:2px solid var(--bg)}
*::-webkit-scrollbar-track{background:transparent}

/* ---- 3. Typographic voice ---------------------------------------------- */
html{scroll-behavior:smooth}
h1,h2,h3{letter-spacing:-.024em;text-wrap:balance}
h2{font-size:clamp(1.28rem,2.6vw,1.62rem)}
h3{font-size:clamp(1.02rem,2vw,1.16rem)}
p{text-wrap:pretty}
.eyebrow{letter-spacing:.36em;color:var(--accent);text-shadow:0 0 18px var(--glow)}
code,kbd,pre,.mono,.num,td{font-variant-numeric:tabular-nums lining-nums}
code,kbd{font-family:var(--mono)}
kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;
  padding:1px 6px;background:var(--panel-2);font-size:.82em}
a{transition:color .15s ease}
a:hover{color:#8ae8ff;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---- 4. Topbar: glass rail with a living hairline ----------------------- */
@keyframes nsHairline{from{background-position:-40% 0}to{background-position:140% 0}}
.topbar{
  background:linear-gradient(180deg,rgba(12,18,31,.94),rgba(12,18,31,.60));
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(12px) saturate(1.35);
  -webkit-backdrop-filter:blur(12px) saturate(1.35);
  box-shadow:0 10px 30px -20px rgba(0,0,0,.95);
}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--accent) 35%,
             var(--accent-2) 55%,transparent 80%) 0 0 / 60% 100% no-repeat;
  opacity:.55;
}
@media (prefers-reduced-motion: no-preference){
  .topbar::after{animation:nsHairline 7s linear infinite}
}
.brand b{color:var(--accent);text-shadow:0 0 16px var(--glow)}
.nav .ghost{transition:border-color .15s ease, box-shadow .15s ease, color .15s ease}
.nav .ghost:hover{border-color:var(--accent);color:var(--ink);
  box-shadow:0 0 0 3px rgba(65,216,255,.12), 0 0 22px -6px var(--glow)}
.nd-menu{border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,rgba(15,23,38,.98),rgba(11,18,32,.98));
  backdrop-filter:blur(10px);box-shadow:var(--shadow-2)}
.nd-menu a{border-radius:8px;transition:background-color .12s ease,color .12s ease}
.nd-menu a:hover{background:rgba(65,216,255,.09);color:var(--ink)}

/* ---- 5. SIGNATURE: the hero targeting frame ------------------------------
   Animated conic ring border (padding-box/border-box composite — works with
   border-radius, needs no extra element) + HUD corner brackets + scanline. */
@keyframes nsRing{to{--ns-angle:360deg}}
@keyframes nsScan{from{background-position:0 -160px,0 0,0 0}
                  to  {background-position:0 calc(100% + 160px),0 0,0 0}}
.hero{
  border:1px solid transparent;
  background:
    linear-gradient(180deg,transparent,rgba(65,216,255,.05) 50%,transparent)
      0 -160px / 100% 160px no-repeat padding-box,
    linear-gradient(180deg,rgba(65,216,255,.05),transparent 44%) padding-box,
    linear-gradient(180deg,var(--panel),var(--panel-2)) padding-box,
    var(--ring) border-box;
  box-shadow:var(--shadow-2), 0 0 60px -30px var(--glow);
}
@media (prefers-reduced-motion: no-preference){
  .hero{animation:nsRing 14s linear infinite, nsScan 9s linear infinite}
}
.hero::before{opacity:.08;mask-image:linear-gradient(180deg,#000,transparent 78%)}
.hero::after{ /* HUD corner brackets */
  content:"";position:absolute;inset:10px;pointer-events:none;border-radius:8px;
  background:
    linear-gradient(var(--accent),var(--accent))     top    left  /22px 1px,
    linear-gradient(var(--accent),var(--accent))     top    left  /1px 22px,
    linear-gradient(var(--accent),var(--accent))     top    right /22px 1px,
    linear-gradient(var(--accent),var(--accent))     top    right /1px 22px,
    linear-gradient(var(--accent-2),var(--accent-2)) bottom left  /22px 1px,
    linear-gradient(var(--accent-2),var(--accent-2)) bottom left  /1px 22px,
    linear-gradient(var(--accent-2),var(--accent-2)) bottom right /22px 1px,
    linear-gradient(var(--accent-2),var(--accent-2)) bottom right /1px 22px;
  background-repeat:no-repeat;opacity:.6;
}
.hero h1{
  background:linear-gradient(92deg,var(--ink) 52%,#bfeaff 76%,var(--accent-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero p{color:var(--muted)}

/* ---- 6. Panels & cards: precision surfaces + scroll reveal --------------- */
.panel{border-radius:var(--r);box-shadow:var(--shadow-1);
  transition:border-color .18s ease, box-shadow .18s ease}
.panel:hover{border-color:#2d3f64;box-shadow:var(--shadow-2)}
.card{
  border-left:3px solid var(--accent-2);
  background:linear-gradient(180deg,var(--panel-2),#091020);
  box-shadow:var(--shadow-1);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s ease,
             box-shadow .2s ease, background-color .2s ease;
}
.card:hover{
  transform:translateY(-3px);
  border-left-color:var(--accent);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.95), 0 0 0 1px rgba(65,216,255,.14),
             0 0 34px -14px var(--glow);
}
/* CSS-only scroll reveal (Chromium/modern; others just show content) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes nsRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
    .card,.panel{
      animation:nsRise .7s cubic-bezier(.2,.7,.3,1) both;
      animation-timeline:view();
      animation-range:entry 0% entry 42%;
    }
  }
}

/* ---- 7. Buttons: pressable, with a light sweep ---------------------------- */
button,.btn,input[type=submit]{
  transition:transform .12s ease, box-shadow .18s ease, border-color .15s ease,
             background-color .15s ease, filter .15s ease}
button:hover,.btn:hover,input[type=submit]:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 26px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.14)}
button:active,.btn:active,input[type=submit]:active{transform:translateY(0) scale(.99)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;
  box-shadow:0 0 0 4px rgba(65,216,255,.16)}

/* ---- 8. Forms: console inputs --------------------------------------------- */
input[type=text],input[type=email],input[type=url],input[type=password],
input[type=search],input[type=number],textarea,select{
  background:#091020;border:1px solid var(--line-soft);color:var(--ink);
  border-radius:10px;transition:border-color .15s ease, box-shadow .18s ease}
input:hover,textarea:hover,select:hover{border-color:#2d3f64}
input:focus,textarea:focus,select:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px rgba(65,216,255,.15), 0 0 24px -10px var(--glow)}
::placeholder{color:var(--faint)}

/* ---- 9. Tables & telemetry ------------------------------------------------- */
th{color:var(--muted);font-weight:600;letter-spacing:.05em;font-size:.82rem;
  text-transform:uppercase}
td,th{border-bottom:1px solid var(--line-soft)}
tbody tr{transition:background-color .12s ease}
tbody tr:hover{background:rgba(65,216,255,.05)}
.badge,.pill,.tag{border-radius:999px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.06em}
.ok,.badge-ok,.status-ok{color:var(--ok)} .warn,.badge-warn{color:var(--warn)}
.crit,.badge-crit,.danger{color:var(--crit)}

/* ---- 10. Content polish ------------------------------------------------------ */
hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
blockquote{border-left:3px solid var(--accent-2);background:rgba(143,125,255,.07);
  border-radius:0 10px 10px 0}
pre{border:1px solid var(--line-soft);border-radius:12px;background:#091020;
  box-shadow:var(--shadow-1)}
img{border-radius:8px}
details{border:1px solid var(--line-soft);border-radius:10px;
  transition:border-color .15s ease}
details[open]{border-color:#2d3f64}
summary{cursor:pointer}
.footer,footer{border-top:1px solid var(--line-soft);color:var(--faint)}
.footer a:hover,footer a:hover{color:var(--accent)}

/* ---- 11. Trust floor ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.001s !important}
  html{scroll-behavior:auto}
}
@media (prefers-contrast: more){
  :root{--muted:#b4c2d8;--line:#3a4d76}
  .hero h1{background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
}
@media print{
  body{background:#fff;color:#111}
  body::before,body::after,.topbar,.nav,.footer,.hero::after,.hero::before{display:none !important}
  .panel,.card,.hero{border:1px solid #ccc;box-shadow:none;background:#fff;animation:none}
  a{color:#111;text-decoration:underline}
}