/* ===========================
   NoirStack Header — Blue-only
   =========================== */

:root{
  --ns-bg:#0a0a0a;
  --ns-panel:#0e1116;
  --ns-text:#e2edff;
  --ns-muted:#9ca3af;
  --ns-primary:#0001FF;      /* electric blue (core) */
  --ns-primary-2:#66a3ff;    /* lighter blue for glow/accents */
  --ns-radius:14px;
  --ns-shadow:0 20px 60px rgba(0,0,0,.45);
}

/* Header shell with layered blue glow + subtle grid */
.site-header{
  position: relative;
  background:
    radial-gradient(1200px 600px at 10% -20%, rgba(0,1,255,.12), transparent 60%),
    radial-gradient(900px 400px at 90% -10%, rgba(102,163,255,.08), transparent 60%),
    linear-gradient(180deg, var(--ns-bg), #0b0d0f);
  color: var(--ns-text);
  padding: 3.5rem 1.5rem;
  border-bottom: 1px solid #1a1a1a;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.03);
  isolation: isolate;
}
.site-header::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/30px 100%,
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px) 0 0/100% 30px;
  opacity:.35; pointer-events:none; transform: translateZ(0);
  animation: ns-pan 38s linear infinite;
}
@keyframes ns-pan { to { background-position: 30px 30px; } }

/* inner container (glass) */
.header-inner{
  max-width: 1100px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: 1.25rem 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--ns-radius);
  backdrop-filter: saturate(130%) blur(6px);
  box-shadow: var(--ns-shadow);
}

/* branding */
.site-branding{ font-family: var(--font-primary, "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial); }

.site-title a{
  color: var(--ns-text);
  font-size: clamp(2rem, 4vw, 3rem);
  text-decoration: none; letter-spacing: .5px;
  text-shadow: 0 0 12px rgba(0,1,255,.28), 0 2px 0 rgba(0,0,0,.35);
  background: linear-gradient(90deg, var(--ns-primary), #5a7bff 40%, #9cc7ff 70%, var(--ns-primary));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* animated underline accent (blue only) */
.site-title a::after{
  content:""; display:block; height:2px; margin:.4rem auto 0; width:0%;
  background: linear-gradient(90deg, var(--ns-primary), var(--ns-primary-2));
  box-shadow: 0 0 14px rgba(0,1,255,.55);
  border-radius: 2px; transition: width .35s ease;
}
.site-title a:hover::after{ width: 64%; }

/* typewriter */
.typewriter a{
  display:inline-block; overflow:hidden; white-space:nowrap;
  border-right:2px solid #3b82f6; width:0;
  animation: typing 2.2s steps(28,end) forwards, blink .7s step-end infinite;
}
@keyframes typing { from{width:0} to{width:100%} }
@keyframes blink { 50%{ border-color: transparent } }

/* description & tagline */
.site-description{ font-size:1rem; opacity:.86; margin-top:.25rem; }
.header-tagline{ font-size:.98rem; font-style:italic; color:var(--ns-muted); }

/* primary CTA (outline → blue glow) */
.header-button{
  display:inline-block; margin-top:.6rem; padding:.55rem 1.1rem;
  font-size:.9rem; font-weight:700;
  color: var(--ns-primary);
  border:1px solid var(--ns-primary);
  border-radius:10px; text-decoration:none; background:transparent;
  transition: transform .08s ease, box-shadow .25s ease, color .25s ease,
              background .25s ease, border-color .25s ease;
  box-shadow: 0 0 0 rgba(0,1,255,0);
}
.header-button:hover{
  background: var(--ns-primary);
  color:#ffffff;
  border-color: var(--ns-primary-2);
  box-shadow: 0 10px 30px rgba(0,1,255,.4), 0 0 20px rgba(102,163,255,.35);
  transform: translateY(-1px);
}
.header-button:active{ transform: translateY(0); box-shadow: 0 4px 12px rgba(0,1,255,.25); }

/* domain nav buttons */
.domain-nav-buttons{ margin-top:1rem; justify-content:center; display:flex; gap:.8rem; flex-wrap:wrap; }
.nav-btn{
  position:relative; padding:.65rem 1.1rem;
  background: linear-gradient(180deg, var(--ns-primary), #3a4dff);
  color:#fff; border:1px solid rgba(0,1,255,.6);
  border-radius:12px; font-size:.95rem; font-weight:700; text-decoration:none;
  transition: transform .08s ease, box-shadow .25s ease, filter .2s ease;
  box-shadow: 0 10px 28px rgba(0,1,255,.3);
}
.nav-btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(120% 120% at 120% -20%, rgba(102,163,255,.45), transparent 40%);
  opacity:0; transition: opacity .25s ease; pointer-events:none;
}
.nav-btn:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(0,1,255,.38), 0 0 22px rgba(102,163,255,.28);
}
.nav-btn:hover::after{ opacity:.8; }
.nav-btn:active{ transform: translateY(0); }

/* focus states (keyboard) */
.site-title a:focus-visible,
.header-button:focus-visible,
.nav-btn:focus-visible{
  outline: 2px solid var(--ns-primary-2);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(102,163,255,.25);
}

/* micro-interaction: top line (blue only) */
.site-header::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--ns-primary), var(--ns-primary-2), transparent);
  filter: blur(.4px); opacity:.7;
}

/* responsive */
@media (max-width:600px){
  .site-title a{ font-size:2rem; }
  .header-tagline{ font-size:.9rem; }
  .header-button{ font-size:.85rem; padding:.45rem .9rem; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .typewriter a{ animation:none; border:none; width:auto; }
  .site-header::before{ animation:none; }
  .nav-btn, .header-button{ transition:none; }
}