/* ============================================================
   EFFECTS — ambient background, NORA-derived
   ------------------------------------------------------------
   four stacking layers behind all content:
     · body::before              — theme-specific (meridian / wash)
     · .fx-overlay::before       — universal scanline texture
     · .fx-overlay::after        — universal tiled starfield
     · .fx-reactor::before/after — soft drifting glow tubes

   the screen blend on .fx-overlay is what makes stars POP
   against dark surfaces. don't remove it.

   ALL pointer-events: none. ALL hidden under reduced-motion.
   ============================================================ */


/* ---- LAYER 1 · BODY::BEFORE — theme-specific ambient --- */
/* the heaviest theme-defining layer. nightsky gets sparse
   anchor stars + meridian + corner ambient + vignette.
   blackout gets a clean vignette + amber wash with no stars. */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-bg-fx);
}

/* NIGHTSKY — 6 anchor stars at fixed % positions, meridian wash,
   corner ambient, center vignette. drifts 2-3px every 22s. */
[data-theme="nightsky"] body::before {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.55) 0.4px, transparent 1.2px),
    radial-gradient(circle at 78% 32%, rgba(255,255,255,.40) 0.4px, transparent 1.2px),
    radial-gradient(circle at 35% 72%, rgba(255,255,255,.45) 0.4px, transparent 1.2px),
    radial-gradient(circle at 64% 88%, rgba(255,255,255,.35) 0.4px, transparent 1.2px),
    radial-gradient(circle at 92% 64%, rgba(255,255,255,.50) 0.4px, transparent 1.2px),
    radial-gradient(circle at  4% 56%, rgba(255,255,255,.40) 0.4px, transparent 1.2px),
    /* meridian wash — vertical column of cool light, very subtle */
    linear-gradient(180deg, transparent 0%, rgba(220,227,236,.04) 35%, rgba(220,227,236,.05) 65%, transparent 100%),
    /* corner ambient — soft glow at opposite corners */
    radial-gradient(ellipse 50% 40% at 20% 10%, rgba(220,227,236,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 90%, rgba(220,227,236,.05) 0%, transparent 60%),
    /* vignette — push edges into darkness */
    radial-gradient(circle at 50% 50%, transparent 50%, rgba(0,0,0,.6) 100%);
  animation: fx-nightsky-drift 22s ease-in-out infinite alternate;
}
@keyframes fx-nightsky-drift {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 50% 50%; }
  100% { background-position: 2px 1px, -1px 2px, 1px -2px, -2px 1px, 1px 2px, -1px -1px, 0 0, 0 0, 0 0, 50% 50%; }
}

/* BLACKOUT — no stars. vignette + amber wash. tactical, sharp. */
[data-theme="blackout"] body::before {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 25%, rgba(0,0,0,.45) 90%),
    linear-gradient(180deg, transparent 0%, rgba(255,107,26,.05) 30%, rgba(255,107,26,.08) 70%, transparent 100%);
}

/* WHITE — invisible dot grid. technical, calm. */
[data-theme="white"] body::before {
  background-image: radial-gradient(circle, rgba(10,10,11,.06) 1px, transparent 1px);
  background-size: 28px 28px;
}


/* ---- LAYER 2 · FX-OVERLAY — universal scan + stars ----- */
/* sits above bg, below content. screen blend makes stars pop.
   one DOM node, two pseudos. drifts ~220s. */

.fx-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
  overflow: hidden;
  mix-blend-mode: screen;
}

/* scanline texture — 2px lines, theme-tinted, drifts vertically */
.fx-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(var(--brand-glow-rgb), 0)   0px,
    rgba(var(--brand-glow-rgb), 0)   2px,
    rgba(var(--brand-glow-rgb), .14) 2px,
    rgba(var(--brand-glow-rgb), .14) 3px
  );
  opacity: .35;
  animation: fx-scan-drift 6s linear infinite;
}
@keyframes fx-scan-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 0 60px; }
}

/* tiled starfield — 10 stars per 720px tile, mix of theme-tinted
   and warm white. drifts diagonally over 220s. */
.fx-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at  8% 14%, rgba(var(--brand-glow-rgb), .85), transparent 60%),
    radial-gradient(1px 1px at 22% 31%, rgba(255,255,255, .55), transparent 60%),
    radial-gradient(1px 1px at 38%  9%, rgba(var(--brand-glow-rgb), .60), transparent 60%),
    radial-gradient(2px 2px at 47% 47%, rgba(255,255,255, .75), transparent 55%),
    radial-gradient(1px 1px at 56% 73%, rgba(var(--brand-glow-rgb), .50), transparent 60%),
    radial-gradient(1px 1px at 64% 18%, rgba(255,255,255, .55), transparent 60%),
    radial-gradient(1px 1px at 73% 60%, rgba(var(--brand-glow-rgb), .70), transparent 60%),
    radial-gradient(2px 2px at 82% 88%, rgba(255,255,255, .65), transparent 55%),
    radial-gradient(1px 1px at 91% 27%, rgba(var(--brand-glow-rgb), .55), transparent 60%),
    radial-gradient(1px 1px at 14% 79%, rgba(255,255,255, .50), transparent 60%);
  background-size: 720px 720px;
  background-repeat: repeat;
  animation: fx-stars-drift 220s linear infinite;
  opacity: .55;
}
@keyframes fx-stars-drift {
  from { background-position: 0 0; }
  to   { background-position: -720px -720px; }
}

/* white theme — no scanlines, no stars. clean. */
[data-theme="white"] .fx-overlay { display: none; }


/* ---- LAYER 3 · FX-REACTOR — soft drifting glow tubes --- */
/* two pseudo-elements, slow independent pulses. screen blend.
   the "arc reactor energy bleeding through the chassis" feel. */

.fx-reactor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-reactor);
  overflow: hidden;
  mix-blend-mode: screen;
}

.fx-reactor::before,
.fx-reactor::after {
  content: '';
  position: absolute;
  inset: -10%;
  opacity: .35;
}

.fx-reactor::before {
  background: radial-gradient(
    ellipse 40% 30% at 20% 30%,
    rgba(var(--brand-glow-rgb), .12) 0%,
    transparent 60%
  );
  animation: fx-reactor-a 38s ease-in-out infinite alternate;
}

.fx-reactor::after {
  background: radial-gradient(
    ellipse 35% 25% at 80% 70%,
    rgba(var(--brand-glow-rgb), .10) 0%,
    transparent 60%
  );
  animation: fx-reactor-b 46s ease-in-out infinite alternate;
}

@keyframes fx-reactor-a {
  0%   { transform: translate(-2%, -1%); opacity: .35; }
  100% { transform: translate( 3%,  2%); opacity: .55; }
}
@keyframes fx-reactor-b {
  0%   { transform: translate( 2%,  1%); opacity: .25; }
  100% { transform: translate(-3%, -2%); opacity: .45; }
}

/* white theme — no reactor glow */
[data-theme="white"] .fx-reactor { display: none; }


/* ---- REDUCED MOTION — kill all animation --------------- */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .fx-overlay::before,
  .fx-overlay::after,
  .fx-reactor::before,
  .fx-reactor::after { animation: none; }
}


/* ============================================================
   BLACKOUT — theme-specific UI pulses
   ------------------------------------------------------------
   active nav rail and primary buttons get a slow afterburner
   pulse. tactical, alive, never frantic.
   ============================================================ */

[data-theme="blackout"] .nav-item.is-active::before {
  animation: fx-blackout-rail 1.4s ease-in-out infinite;
}
@keyframes fx-blackout-rail {
  0%, 100% { box-shadow: 0 0 8px  #FF6B1A, 0 0 0    #FFB347; }
  50%      { box-shadow: 0 0 18px #FF6B1A, 0 0 32px #FFB347; }
}

[data-theme="blackout"] .btn--primary {
  animation: fx-blackout-btn 2s ease-in-out infinite;
}
@keyframes fx-blackout-btn {
  0%, 100% { box-shadow: 0 0 16px rgba(255, 107, 26, .5),  inset 0 0 0 1px rgba(255, 179, 71, .3); }
  50%      { box-shadow: 0 0 32px rgba(255, 107, 26, .85), inset 0 0 0 1px rgba(255, 179, 71, .5); }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="blackout"] .nav-item.is-active::before,
  [data-theme="blackout"] .btn--primary { animation: none; }
}