/* ════════════════════════════════════════════════════════════════
   MI TURNO · modals/splash.css — Intro animado estilo Nequi
   Flujo:
   0ms      #initSplash (HTML) aparece, logo rebota
   700ms    #initSplash empieza fade-out, React logo fades-in
   1200ms   #initSplash desaparece, texto de React desliza
   1600ms   exit animation (scale+fade)
   1940ms   pantalla de auth o app
   ════════════════════════════════════════════════════════════════ */

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

@keyframes spFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes spGlow {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

@keyframes spPing {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

@keyframes spPing2 {
  0% {
    transform: scale(1);
    opacity: 0.35;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes spUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes spDot {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  50% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

@keyframes spOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

/* ─── Fondo ──────────────────────────────────────────────────── */

.splash {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  overflow: hidden;
}

/* blobs decorativos */
.splash::before {
  display: none;
}
.splash::after {
  display: none;
}

/* estado de salida */
.splash--exit {
  animation: spOut 0.34s cubic-bezier(0.4, 0, 0.7, 0.9) forwards !important;
  pointer-events: none;
}

/* splash sin animaciones (cuando el intro del Root ya se reprodujo) */
.splash--plain,
.splash--plain .sp-logo,
.splash--plain .sp-ttl,
.splash--plain .sp-sub,
.splash--plain .sp-dots,
.splash--plain .sp-glow,
.splash--plain .sp-ping,
.splash--plain .sp-ping-2 {
  animation: none !important;
}
.splash--plain .sp-logo {
  opacity: 1;
}
.splash--plain .sp-ttl,
.splash--plain .sp-sub,
.splash--plain .sp-dots {
  opacity: 0;
}
.splash--plain .sp-glow,
.splash--plain .sp-ping,
.splash--plain .sp-ping-2 {
  opacity: 0;
}

/* ─── Logo ───────────────────────────────────────────────────── */

.sp-logo-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
}

/*
  El logo NO hace rebote en React — ese rebote ya lo hizo #initSplash.
  Aquí simplemente hace crossfade con #initSplash mientras él desaparece.
  delay 0.5s = cuando #initSplash empieza su fade (700ms desde page load ≈ 500ms desde React mount)
*/
.sp-logo {
  width: 88px;
  height: 88px;
  display: block;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 15px 30px rgba(65, 102, 212, 0.35));
  animation: spFadeIn 0.35s ease 0.5s both, spFloat 4s ease-in-out 0.85s infinite;
  -webkit-user-drag: none;
  will-change: transform, filter;
}

/* glow burst al momento de crossfade con #initSplash */
.sp-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125, 168, 255, 0.5) 0%, transparent 70%);
  animation: spGlow 1s ease 0.7s both;
  pointer-events: none;
  z-index: 1;
}

/*
  Anillos ping: arrancan INVISIBLES (opacity:0 en CSS).
  fill-mode: forwards (no 'both') para que no aparezcan durante el delay.
*/
.sp-ping {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2.5px solid rgba(125, 168, 255, 0.6);
  opacity: 0;
  animation: spPing 1.1s cubic-bezier(0, 0, 0.2, 1) 0.75s forwards;
  pointer-events: none;
}

.sp-ping-2 {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(125, 168, 255, 0.32);
  opacity: 0;
  animation: spPing2 1.1s cubic-bezier(0, 0, 0.2, 1) 0.95s forwards;
  pointer-events: none;
}

/* ─── Texto ──────────────────────────────────────────────────── */

/*
  delay 1.0s = después de que #initSplash desaparece (~1.0s desde React mount)
  Sin solapamiento con el texto HTML
*/
.sp-ttl {
  font-size: 36px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -1.6px;
  margin-bottom: 8px;
  animation: spUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both;
}

.sp-sub {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 52px;
  animation: spUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.15s both;
}

/* ─── Indicador de carga (3 puntos) ──────────────────────────── */

.sp-dots {
  display: flex;
  gap: 8px;
  animation: spUp 0.4s ease 1.3s both;
}

.sp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.sp-dot:nth-child(1) {
  animation: spDot 1s ease-in-out 1.3s infinite;
}
.sp-dot:nth-child(2) {
  animation: spDot 1s ease-in-out 1.45s infinite;
}
.sp-dot:nth-child(3) {
  animation: spDot 1s ease-in-out 1.6s infinite;
}

/* ─── Compatibilidad con botón de carga en auth ──────────────── */
.sp-ring {
  display: none;
}
.sp-in {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent-dim);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
  vertical-align: middle;
}