.splash-body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background: #0a0a0a;
  font-family: "Poppins", system-ui, sans-serif;
  color: #ffedd5;
}

.splash-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 40%, #7c2d12 0%, #1a0a00 45%, #0a0a0a 100%);
  z-index: 0;
}

.splash-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(249, 115, 22, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249, 115, 22, 0.2) 1px, transparent 1px);
  background-size: 42px 42px;
}

.splash-scan {
  position: fixed;
  left: 0;
  right: 0;
  height: 28%;
  top: -30%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(249, 115, 22, 0.22),
    transparent
  );
  z-index: 2;
  pointer-events: none;
  animation: splashScan 2.8s ease-in-out forwards;
}

.splash-stage {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 1.5rem;
}

.splash-logo-wrap {
  position: relative;
  width: min(280px, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 3px rgba(249, 115, 22, 0.45),
    0 0 40px rgba(234, 88, 12, 0.5);
  animation: splashPulse 2.8s ease-in-out forwards;
}

.splash-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: inset(100% 0 0 0);
  animation: splashReveal 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  filter: saturate(1.08) contrast(1.05);
}

.splash-glitch {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      rgba(255, 200, 120, 0.08) 2px 3px
    );
  mix-blend-mode: overlay;
  opacity: 0;
  animation: splashGlitch 2.6s steps(2) forwards;
  pointer-events: none;
}

.splash-status {
  margin: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: #fdba74;
  opacity: 0.9;
  animation: splashFadeIn 0.6s ease forwards;
}

/* Pausar animaciones mientras el splash de login está oculto */
.login-pre-splash[hidden] .splash-scan,
.login-pre-splash[hidden] .splash-logo,
.login-pre-splash[hidden] .splash-logo-wrap,
.login-pre-splash[hidden] .splash-glitch,
.login-pre-splash[hidden] .splash-status {
  animation-play-state: paused !important;
}

@keyframes splashReveal {
  0% { clip-path: inset(100% 0 0 0); opacity: 0.3; filter: brightness(1.8) contrast(1.4); }
  35% { clip-path: inset(55% 0 0 0); opacity: 0.7; }
  70% { clip-path: inset(18% 0 0 0); opacity: 1; filter: brightness(1.15); }
  100% { clip-path: inset(0 0 0 0); opacity: 1; filter: brightness(1) contrast(1.05); }
}

@keyframes splashScan {
  0% { top: -30%; }
  100% { top: 110%; }
}

@keyframes splashPulse {
  0% { transform: scale(0.92); }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes splashGlitch {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 0.35; transform: translate(-2px, 1px); }
  40% { opacity: 0.2; transform: translate(2px, -1px); }
  60% { opacity: 0.4; transform: translate(-1px, 2px); }
  80% { opacity: 0.15; transform: translate(1px, -2px); }
}

@keyframes splashFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 0.9; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .splash-logo,
  .splash-scan,
  .splash-logo-wrap,
  .splash-glitch {
    animation-duration: 0.01ms !important;
  }
  .splash-logo {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}