/* === Animated Gradient Stage === */
/* Full-viewport, painted behind everything. Owned by Agent A.
   Two stacked layers cross-fade on content-type morph; stripes + grain
   sit on top for the retro brand feel. GPU-only properties. */

#gradient-stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  overflow: hidden;
  background: var(--c-black);
  isolation: isolate;
  transform: translateZ(0);
  transition:
    transform 600ms var(--ease-smooth),
    filter   600ms var(--ease-smooth);
}

/* Pulse: amplify scale + saturation + brightness for one beat. */
#gradient-stage.is-pulsing {
  transform: translateZ(0) scale(1.02);
  filter: saturate(1.18) brightness(1.06);
}

/* ── Gradient layers (A/B crossfade) ───────────────────────────────── */

.grad-layer {
  position: absolute;
  /* Bleed beyond the viewport so background-position drift never reveals
     the canvas edge. */
  inset: -12%;
  opacity: 0;
  will-change: opacity, background-position, filter, transform;
  background-color: var(--c-black);
  background-repeat: no-repeat;

  /* Three radial blooms layered over a diagonal sweep. The radials use
     the per-layer custom props (--g1/--g2/--g3) so JS can swap palettes
     without redeclaring this rule. */
  background-image:
    radial-gradient(60% 55% at 18% 22%, var(--g1) 0%, transparent 62%),
    radial-gradient(55% 60% at 82% 32%, var(--g3) 0%, transparent 65%),
    radial-gradient(70% 70% at 50% 95%, var(--g2) 0%, transparent 70%),
    linear-gradient(135deg, var(--g1) 0%, var(--g2) 48%, var(--g3) 100%);
  background-size:
    180% 180%,
    180% 180%,
    180% 180%,
    220% 220%;
  background-position:
    0% 0%,
    100% 0%,
    50% 100%,
    0% 50%;

  transition:
    opacity var(--dur-slow) var(--ease-smooth),
    filter  var(--dur-slow) var(--ease-smooth);
}

/* Active layer: full opacity + idle drift + subtle hue cycle. */
.grad-layer.is-active {
  opacity: 1;
  animation:
    grad-drift   var(--dur-drift) linear infinite,
    grad-hue     calc(var(--dur-drift) * 1.25) ease-in-out infinite;
}

/* Default palettes for each layer slot — JS overrides via inline style. */
.grad-layer--a { --g1: var(--grad-intro-1); --g2: var(--grad-intro-2); --g3: var(--grad-intro-3); }
.grad-layer--b { --g1: var(--grad-trivia-1); --g2: var(--grad-trivia-2); --g3: var(--grad-trivia-3); }

@keyframes grad-drift {
  0% {
    background-position:
      0%   0%,
      100% 0%,
      50%  100%,
      0%   50%;
  }
  50% {
    background-position:
      100% 30%,
      0%   60%,
      30%  20%,
      100% 50%;
  }
  100% {
    background-position:
      0%   0%,
      100% 0%,
      50%  100%,
      0%   50%;
  }
}

@keyframes grad-hue {
  0%, 100% { filter: hue-rotate(-5deg) saturate(1.05); }
  50%      { filter: hue-rotate( 5deg) saturate(1.12); }
}

/* ── Retro rainbow stripes (brand motif) ───────────────────────────── */

.grad-stripes {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: screen;
  will-change: background-position;
  background-image: repeating-linear-gradient(
    62deg,
    var(--c-cyan)        0px,
    var(--c-cyan)        14px,
    var(--c-blue-deep)   14px,
    var(--c-blue-deep)   28px,
    var(--c-green-deep)  28px,
    var(--c-green-deep)  42px,
    var(--c-orange-deep) 42px,
    var(--c-orange-deep) 56px,
    var(--c-pink)        56px,
    var(--c-pink)        70px,
    var(--c-magenta-deep) 70px,
    var(--c-magenta-deep) 84px,
    transparent          84px,
    transparent          168px
  );
  background-size: 200% 200%;
  background-position: 0% 0%;
  animation: grad-stripes-drift calc(var(--dur-drift) * 1.5) linear infinite;
}

@keyframes grad-stripes-drift {
  0%   { background-position:   0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ── Film grain (fixed, no animation) ──────────────────────────────── */

.grad-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  /* Inline SVG turbulence — no network, no animation. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  background-repeat: repeat;
}

/* ── Reduced motion: freeze drift, stripes, pulse ──────────────────── */

@media (prefers-reduced-motion: reduce) {
  #gradient-stage,
  #gradient-stage.is-pulsing {
    transform: none;
    filter: none;
    transition: none;
  }
  .grad-layer.is-active,
  .grad-stripes {
    animation: none !important;
  }
  .grad-layer {
    transition: opacity 1ms linear;
  }
}