/* ============================================================
   DiveLog DS — Component: Splash Background
   Sfondo subacqueo Ken Burns + bolle decorative.
   Usato da: splash, login, register.

   NOTA (2026-07-19): l'overlay gradiente sopra la foto era
   hardcoded solo-dark (rgba(3,19,48,...)), indipendente dal tema.
   Testo sopra (--color-text-secondary, ecc.) è theme-aware: in
   light theme diventava testo scuro su overlay ancora scuro,
   violazione WCAG AA. Ora l'overlay usa --photo-overlay-* da
   design-token.md, con valori distinti per dark/light.
   ============================================================ */

/* ── Sfondo subacqueo ── */
.splash-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      180deg,
      var(--photo-overlay-1) 0%,
      var(--photo-overlay-2) 50%,
      var(--photo-overlay-3) 100%
    ),
    url("/splash-bg.jpg");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  animation: splash-kb 20s ease-in-out infinite alternate;
}

@keyframes splash-kb {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(1.06) translateY(-1%); }
}

/* ── Bolle decorative ── */
.splash-bubbles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.splash-bubble {
  position: absolute;
  bottom: -40px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  animation: splash-rise linear infinite;
}
/* NOTA: valore rgba fisso lasciato invariato — elemento puramente
   decorativo (aria-hidden, nessun testo), impatto contrasto nullo. */

@keyframes splash-rise {
  0%   { transform: translateY(0) scale(1);   opacity: 0; }
  10%  { opacity: 0.4; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(-110vh) scale(1.3); opacity: 0; }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .splash-bg { animation: none; }
  .splash-bubble { animation: none; }
}