/* ─────────────────────────────────────────────────────────────────────────
   Splash screen web — mostrata durante il download di main.dart.js e fino
   al primo frame Flutter. La "continuazione" Flutter (AuthGate BootSplash)
   usa la stessa palette e lo stesso layout, così visivamente è UNA splash.
   ───────────────────────────────────────────────────────────────────────── */

/* Palette allineata a lightColorScheme (lib/config/material_schemes.dart) */
:root {
  --ds-primary: #2D6A4F;
  --ds-surface: #FAF8F4;
  --ds-surface-low: #F3EFE8;
  --ds-outline: #48443C;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1200px 800px at 50% 20%, #FFFFFF 0%, var(--ds-surface) 55%, var(--ds-surface-low) 100%);
  color: var(--ds-outline);
}

#splash {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 28px;
  animation: splash-fade-in 260ms ease-out both;
}

/* Alone morbido dietro al logo, primary a bassissima opacità */
#splash::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(45, 106, 79, 0.10), transparent 70%);
  filter: blur(4px);
  pointer-events: none;
  animation: splash-glow 3.2s ease-in-out infinite;
}

.splash-logo {
  width: min(180px, 42vw);
  height: auto;
  display: block;
  position: relative;
  animation: splash-logo-in 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both,
             splash-logo-float 4s ease-in-out 900ms infinite;
}

.splash-dots {
  display: flex;
  gap: 8px;
  position: relative;
  margin-top: 4px;
}

.splash-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ds-primary);
  opacity: 0.35;
  animation: splash-dot 1.2s ease-in-out infinite;
}

.splash-dots span:nth-child(2) { animation-delay: 0.15s; }
.splash-dots span:nth-child(3) { animation-delay: 0.30s; }

/* ── Keyframes ────────────────────────────────────────────────────────── */

@keyframes splash-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes splash-logo-in {
  0%   { opacity: 0; transform: scale(0.92) translateY(12px); }
  100% { opacity: 1; transform: scale(1)    translateY(0);     }
}

@keyframes splash-logo-float {
  0%, 100% { transform: translateY(0);     }
  50%      { transform: translateY(-4px);  }
}

@keyframes splash-dot {
  0%, 100% { transform: scale(0.7); opacity: 0.35; }
  40%      { transform: scale(1.0); opacity: 1;    }
}

@keyframes splash-glow {
  0%, 100% { transform: scale(1);    opacity: 0.9; }
  50%      { transform: scale(1.08); opacity: 1;   }
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --ds-primary: #8ED49E;
    --ds-surface: #1A1D1B;
    --ds-surface-low: #111311;
    --ds-outline: #CBC6BD;
  }
  html, body {
    background:
      radial-gradient(1200px 800px at 50% 20%, #232826 0%, var(--ds-surface) 55%, var(--ds-surface-low) 100%);
  }
  #splash::before {
    background: radial-gradient(closest-side, rgba(142, 212, 158, 0.12), transparent 70%);
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #splash,
  .splash-logo,
  .splash-dots span,
  #splash::before {
    animation: none !important;
  }
}