/* ============================================================
   SPLASH.CSS — Santiago FC · Pantalla de carga
   2 segundos, 4 tiras verticales Ken Burns + escudo pulsante
   ============================================================ */

#sfc-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0A0A0A;
  overflow: hidden;
  pointer-events: all;
}

/* ---- 4 tiras verticales de fondo ---- */
.splash__strips {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 0;
}

.splash__strip {
  position: relative;
  overflow: hidden;
}

.splash__strip img {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(1.2) brightness(0.35);
  transform-origin: center center;
}

/* Ken Burns alternado por tira — movimiento casi imperceptible y elegante */
.splash__strip:nth-child(1) img { animation: kbIn  13s ease-in-out infinite alternate; }
.splash__strip:nth-child(2) img { animation: kbOut 13s ease-in-out infinite alternate; }
.splash__strip:nth-child(3) img { animation: kbIn  13s 0.8s ease-in-out infinite alternate; }
.splash__strip:nth-child(4) img { animation: kbOut 13s 0.8s ease-in-out infinite alternate; }

@keyframes kbIn  { from { transform: scale(1.0); } to { transform: scale(1.05); } }
@keyframes kbOut { from { transform: scale(1.05); } to { transform: scale(1.0); } }

/* Separadores entre tiras */
.splash__strip + .splash__strip::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 100%;
  background: rgba(255,107,0,0.2);
  z-index: 1;
}

/* ---- Overlay negro translúcido con blur central ---- */
.splash__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    rgba(10,10,10,0.6) 0%,
    rgba(10,10,10,0.85) 100%
  );
  backdrop-filter: blur(2px);
  z-index: 1;
}

/* ---- Escudo central ---- */
.splash__center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.splash__escudo-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Aro de pulso naranja */
.splash__escudo-wrap::before,
.splash__escudo-wrap::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px solid rgba(255,107,0,0.4);
  animation: ringPulse 2s ease-in-out infinite;
}

.splash__escudo-wrap::after {
  inset: -24px;
  border-color: rgba(255,107,0,0.15);
  animation-delay: 0.5s;
}

@keyframes ringPulse {
  0%, 100% { transform: scale(0.95); opacity: 0.6; }
  50%       { transform: scale(1.05); opacity: 1; }
}

.splash__escudo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  animation: escudoPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 24px rgba(255,107,0,0.5));
}

@keyframes escudoPulse {
  0%, 100% { transform: scale(0.97); opacity: 0.9; }
  50%       { transform: scale(1.03); opacity: 1; }
}

/* Texto debajo */
.splash__wordmark {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  animation: wordmarkFade 1.5s ease-in-out infinite alternate;
}

.splash__wordmark span {
  color: #FF6B00;
}

@keyframes wordmarkFade {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

/* Barra de progreso */
.splash__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: #FF6B00;
  box-shadow: 0 0 10px rgba(255,107,0,0.7);
  z-index: 3;
  animation: barFill 2.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes barFill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ---- Fade-out al desaparecer ---- */
#sfc-splash.splash--exit {
  animation: splashExit 0.5s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)) forwards;
  pointer-events: none;
}

@keyframes splashExit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.03); }
}

/* ---- Reduced motion: version minima ---- */
@media (prefers-reduced-motion: reduce) {
  .splash__strip img,
  .splash__escudo,
  .splash__escudo-wrap::before,
  .splash__escudo-wrap::after,
  .splash__wordmark,
  .splash__bar {
    animation: none !important;
  }
  .splash__escudo { opacity: 1; transform: none; }
  .splash__bar { width: 100%; }
}