/* =============================================================================
   Aurora backdrop: mesh gradient + rotating ribbon + particles + grain + vignette
   Performance notes:
   - The mesh is painted at half size and scaled up 2.6× on the compositor.
     Radial gradients are soft, so upscaling is invisible and repaint cost drops ~7×.
   - The ribbon only animates `transform`, so its blurred layer is rasterised once.
   - Particles animate transform/opacity only.
   ============================================================================= */

@layer layout {
  .aurora {
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    opacity: var(--aurora-opacity);
    transition: opacity var(--dur-4) var(--ease-out);
  }

  /* ---- Mesh: four drifting colour fields whose positions are @property percentages */
  .aurora__mesh {
    position: absolute;
    inset-inline-start: 25%;
    inset-block-start: 25%;
    inline-size: 50%;
    block-size: 50%;
    transform: scale(2.6);
    background:
      radial-gradient(42% 52% at var(--a1x) var(--a1y), var(--aurora-1), transparent 72%),
      radial-gradient(38% 46% at var(--a2x) var(--a2y), var(--aurora-2), transparent 72%),
      radial-gradient(46% 40% at var(--a3x) var(--a3y), var(--aurora-3), transparent 72%),
      radial-gradient(32% 38% at var(--a4x) var(--a4y), var(--aurora-4), transparent 72%);
    animation: aurora-drift 38s var(--ease-in-out) infinite alternate;
    will-change: background;
  }

  @keyframes aurora-drift {
    0%   { --a1x: 18%; --a1y: 22%; --a2x: 82%; --a2y: 18%; --a3x: 70%; --a3y: 85%; --a4x: 22%; --a4y: 78%; }
    25%  { --a1x: 34%; --a1y: 36%; --a2x: 66%; --a2y: 30%; --a3x: 84%; --a3y: 64%; --a4x: 12%; --a4y: 60%; }
    50%  { --a1x: 52%; --a1y: 18%; --a2x: 78%; --a2y: 52%; --a3x: 48%; --a3y: 82%; --a4x: 28%; --a4y: 40%; }
    75%  { --a1x: 26%; --a1y: 48%; --a2x: 90%; --a2y: 28%; --a3x: 62%; --a3y: 70%; --a4x: 40%; --a4y: 86%; }
    100% { --a1x: 12%; --a1y: 30%; --a2x: 60%; --a2y: 12%; --a3x: 80%; --a3y: 92%; --a4x: 16%; --a4y: 66%; }
  }

  /* ---- Ribbon: a slowly turning conic sheen, like light through the aurora curtain */
  .aurora__ribbon {
    position: absolute;
    inset: -40%;
    background: conic-gradient(
      from 210deg at 50% 55%,
      transparent 0deg,
      color-mix(in oklch, var(--accent) 22%, transparent) 40deg,
      transparent 95deg,
      color-mix(in oklch, var(--accent-2) 18%, transparent) 170deg,
      transparent 240deg,
      color-mix(in oklch, var(--accent-3) 14%, transparent) 300deg,
      transparent 360deg);
    filter: blur(70px);
    mix-blend-mode: screen;
    opacity: 0.7;
    animation: aurora-turn 140s linear infinite;
  }

  @keyframes aurora-turn {
    to { transform: rotate(1turn); }
  }

  /* ---- Particles */
  .aurora__particles {
    position: absolute;
    inset: 0;
    display: var(--particles-display);
  }

  .aurora__particles span {
    position: absolute;
    inset-inline-start: var(--x);
    inset-block-end: -4vh;
    inline-size: var(--s);
    block-size: var(--s);
    border-radius: 50%;
    background: color-mix(in oklch, var(--accent) 70%, white);
    box-shadow: 0 0 calc(var(--s) * 4) color-mix(in oklch, var(--accent) 60%, transparent);
    opacity: 0;
    animation: particle-rise var(--t) linear var(--d) infinite;
    will-change: transform, opacity;
  }

  .aurora__particles span:nth-child(3n) { background: color-mix(in oklch, var(--accent-2) 70%, white); }
  .aurora__particles span:nth-child(5n) { background: color-mix(in oklch, var(--accent-3) 70%, white); }

  @keyframes particle-rise {
    0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
    12%  { opacity: var(--o); }
    50%  { transform: translate3d(calc(var(--dx) * -0.5), -55vh, 0) scale(1); }
    88%  { opacity: var(--o); }
    100% { transform: translate3d(var(--dx), -112vh, 0) scale(0.8); opacity: 0; }
  }

  /* ---- Film grain (static SVG noise, jittered in steps so it shimmers instead of sliding) */
  .aurora__grain {
    position: absolute;
    inset: -60px;
    background-image: url("../img/grain.svg");
    background-size: 180px 180px;
    opacity: var(--grain-opacity);
    mix-blend-mode: overlay;
    animation: grain-jitter 1.1s steps(5) infinite;
  }

  @keyframes grain-jitter {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-22px, 14px); }
    40%  { transform: translate(18px, -26px); }
    60%  { transform: translate(-12px, -8px); }
    80%  { transform: translate(26px, 20px); }
    100% { transform: translate(0, 0); }
  }

  /* ---- Vignette keeps text readable at the edges */
  .aurora__vignette {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120% 90% at 50% 35%, transparent 40%, color-mix(in oklch, var(--bg) 85%, transparent) 100%),
      linear-gradient(180deg, transparent 60%, color-mix(in oklch, var(--bg) 70%, transparent));
  }
}