/*
 * Pre-bundle splash (blocks). Loaded from index.html before React mounts, so this
 * file is NOT processed by Vite. Do not edit per app: override the --r3-splash-*
 * variables in splash.custom.css (preserved by `pnpm update:app`).
 */
:root {
  --r3-splash-block-size: 36px;
  --r3-splash-gap: 4px;
  --r3-splash-radius: 3px;
  --r3-splash-opacity-min: 0.04;
  --r3-splash-opacity-peak: 0.32;
  --r3-splash-opacity-tail: 0.12;
  /* Per-column cycle length range, in ms (read by splash.js). */
  --r3-splash-speed-min: 2400;
  --r3-splash-speed-max: 4800;
}
#r3-splash-grid {
  display: grid;
  gap: var(--r3-splash-gap);
  width: 100%;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
}
.r3-splash-block {
  border-radius: var(--r3-splash-radius);
  opacity: var(--r3-splash-opacity-min);
  animation: r3-splash-fall 3200ms ease-in-out infinite;
}
/* Dimmed, asymmetric fade: quick glow, slow trail — reads like falling code. */
@keyframes r3-splash-fall {
  0% { opacity: var(--r3-splash-opacity-min); }
  12% { opacity: var(--r3-splash-opacity-peak); }
  45% { opacity: var(--r3-splash-opacity-tail); }
  100% { opacity: var(--r3-splash-opacity-min); }
}
@media (prefers-reduced-motion: reduce) {
  .r3-splash-block {
    animation: none;
    opacity: var(--r3-splash-opacity-tail);
  }
}