/* 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);
  /* Static dot-grid baked into the root background so the two pseudo-element
     slots stay free for the animated blobs. */
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.045) 1px,
    transparent 1px
  );
  background-size: 26px 26px;
  background-attachment: fixed;
}

/* 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.60),
    rgba(0, 164, 228, 0.0) 70%
  );
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(60px);
  /* 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;
  background: radial-gradient(
    closest-side,
    rgba(245, 196, 0, 0.50),
    rgba(245, 196, 0, 0.0) 70%
  );
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  filter: blur(70px);
  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; }
}

/* Display headings: heavier, slightly tighter, with an accent glow that ties
   into the card border gradient. Class-free selectors so existing Tailwind
   utilities (text-3xl etc.) stack on top untouched. */
h1, h2 {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 14px rgba(0, 164, 228, 0.30);
}

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