@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --distance {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@property --t {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

#splash {
  /* sibling-index() is less hacky but extremely new (support added in
   * late 2025, still unsupported in Firefox). */
  :nth-child(1) { --index: 1; }
  :nth-child(2) { --index: 2; }
  :nth-child(3) { --index: 3; }
  :nth-child(4) { --index: 4; }
  :nth-child(5) { --index: 5; }
  :nth-child(6) { --index: 6; }
  :nth-child(7) { --index: 7; }
  :nth-child(8) { --index: 8; }
  :nth-child(9) { --index: 9; }
  :nth-child(10) { --index: 10; }
  :nth-child(11) { --index: 11; }
  :nth-child(12) { --index: 12; }
  :nth-child(13) { --index: 13; }
  :nth-child(14) { --index: 14; }
  :nth-child(15) { --index: 15; }
  --seed: 6217;
  --mod: 2999;
}

#splash > div {
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 5vh;

  bottom: 0;
  /* Translate according to --angle and --t, scaled by --distance.
   * Initial position just below center of viewport (some fudge for scale).
   * Use vh for both axes so spread is independent of viewport aspect ratio. */
  translate: calc(cos(var(--angle)) * var(--distance) * var(--t) * 50vh) calc(120% - sin(var(--angle)) * var(--distance) * var(--t) * 95vh);

  /* PRNG [20deg, 160deg]. Square --index to make non-linear. */
  --angle: calc(20deg + 140deg * mod(var(--seed) * var(--index) * var(--index), var(--mod)) / var(--mod));
  /* Make a lobe shape directed maximally at 90deg, with added randomness. */
  --distance: calc(sin(var(--angle)) * mod(var(--seed) * var(--index) * var(--index) * 19, var(--mod)) / var(--mod));

  /* Full opacity until t = .9; transparent at t = 1.
   * Fade out up to .1t earlier. */
  opacity: calc(10 - 10 * var(--t) - mod(var(--seed) * var(--index) * var(--index) * 7, var(--mod)) / var(--mod));

  /* 50% scale perturbation */
  scale: calc(1.5 - mod(var(--seed) * var(--index) * var(--index) * 5, var(--mod)) / var(--mod));

  animation: t-ramp ease;
  animation-timeline: --splash;
}

@keyframes t-ramp {
  from {
    --t: 0;
  }
  to {
    --t: 1;
  }
}