/* retro.css — optional "retro-arcade identity" layer.
 *
 * Entirely additive. To revert, delete this file and remove its <link> tag
 * from templates/layout.templ. Nothing else depends on it.
 *
 * What this adds:
 *   1. Two independently-animated aurora blobs that drift across the
 *      viewport on different paths — the real "shifting light" feel,
 *      not a synchronized slide.
 *   2. Dot-grid overlay over the whole viewport.
 *   3. Heavier display headings with a soft accent glow.
 *
 * Both blobs live on html pseudo-elements at z-index -2 / -1, sitting
 * behind everything else so card glassiness still reads on top.
 */

body {
  /* Let the html-level aurora show through. app.css set a solid blue here;
     dropping it here unlocks the gradient. Removing retro.css restores the
     original solid background automatically. */
  background: transparent;
}

html {
  background-color: var(--bg);
  /* Refined direction: dot-grid and drifting blobs removed. A single calm,
     cool top-glow gradient gives the field depth without reading as a smudge
     or animating in the user's peripheral vision. */
  background-image: radial-gradient(
    120% 75% at 50% -15%,
    #1f3074 0%,
    var(--bg) 58%
  );
  background-attachment: fixed;
}

/* Retire the animated aurora blobs for the refined look. */
html::before, html::after { display: none; }

/* Two aurora blobs animated with seven waypoints each (no `alternate`, so
   the second half doesn't mirror the first) on incommensurate periods —
   the two cycles drift in and out of phase, so the eye never locks onto a
   repeating pattern even though each blob is technically on a loop.
   Opacity also wobbles so the lights "breathe" instead of just sliding. */

html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(0, 164, 228, 0.13),
    rgba(0, 164, 228, 0.0) 70%
  );
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(70px);
  /* Centered base; keyframes drive all motion from here. */
  top: 50%; left: 50%;
  margin-top: -35vmax; margin-left: -35vmax;
  animation: v-retro-drift-a 41s cubic-bezier(.6,.1,.4,.9) infinite;
  will-change: transform, opacity;
}

html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* Cooled to a faint mint instead of arcade yellow: the warm blob read as a
     smudge against the cold palette. Kept subtle so it's ambient, not a wash. */
  background: radial-gradient(
    closest-side,
    rgba(0, 228, 164, 0.07),
    rgba(0, 228, 164, 0.0) 70%
  );
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(80px);
  top: 50%; left: 50%;
  margin-top: -27.5vmax; margin-left: -27.5vmax;
  animation: v-retro-drift-b 29s cubic-bezier(.5,.2,.3,.8) infinite;
  will-change: transform, opacity;
}

@keyframes v-retro-drift-a {
  0%   { transform: translate3d(-30vw, -20vh, 0) scale(1.00); opacity: 0.85; }
  14%  { transform: translate3d(  5vw, -28vh, 0) scale(1.18); opacity: 1.00; }
  29%  { transform: translate3d( 32vw, -10vh, 0) scale(0.92); opacity: 0.75; }
  43%  { transform: translate3d( 18vw,  22vh, 0) scale(1.10); opacity: 0.95; }
  58%  { transform: translate3d(-15vw,  30vh, 0) scale(1.05); opacity: 0.80; }
  72%  { transform: translate3d(-38vw,   8vh, 0) scale(0.95); opacity: 1.00; }
  86%  { transform: translate3d(-20vw, -12vh, 0) scale(1.12); opacity: 0.90; }
  100% { transform: translate3d(-30vw, -20vh, 0) scale(1.00); opacity: 0.85; }
}

@keyframes v-retro-drift-b {
  0%   { transform: translate3d( 28vw, -25vh, 0) scale(1.00); opacity: 0.70; }
  17%  { transform: translate3d(  0vw, -10vh, 0) scale(1.20); opacity: 0.95; }
  33%  { transform: translate3d(-30vw,   8vh, 0) scale(0.90); opacity: 0.80; }
  48%  { transform: translate3d(-12vw,  28vh, 0) scale(1.10); opacity: 1.00; }
  64%  { transform: translate3d( 22vw,  18vh, 0) scale(0.95); opacity: 0.75; }
  80%  { transform: translate3d( 36vw,  -2vh, 0) scale(1.15); opacity: 0.90; }
  100% { transform: translate3d( 28vw, -25vh, 0) scale(1.00); opacity: 0.70; }
}

/* Refined direction: headings stay clean — no glow, modest weight. The
   page-title/section-title classes in app.css own the real hierarchy. */
h1, h2 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
  html::before, html::after { animation: none; }
}