/* Splash de inicio de la portada: construccion del isotipo y viaje al heroe.
   Lo activa js/componentes/splash.js; sin JS ninguna de estas reglas aplica. El fondo usa
   --fondo del tema activo, asi que el fundido final no mezcla dos colores distintos. */

/* Cubre la pagina desde el primer pintado hasta que el JS monta el splash. */
html.splash-cubre body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: var(--fondo);
}

/* Mientras dura el splash, el heroe espera en su estado inicial (la maquetacion no cambia). */
html.splash-activo .hero-visual .hero-isotipo-anim {
  animation: none !important;
  opacity: 0 !important;
  transform: none !important;
}
html.splash-activo .hero-anillos,
html.splash-activo .hero-resplandor-parallax { opacity: 0; }
html.splash-activo .hero-anillo,
html.splash-activo .hero-resplandor { animation: none !important; }
html.splash-activo .hero-visual { --px: 0px !important; --py: 0px !important; }
html.splash-texto .hero-texto > * {
  opacity: 0 !important;
  transform: translateY(18px) !important;
  transition: none !important;
}

/* Entrada del texto del heroe mientras el atomo viaja. */
html.splash-revela .hero-texto > * {
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html.splash-revela .hero-texto > :nth-child(1) { transition-delay: 0s !important; }
html.splash-revela .hero-texto > :nth-child(2) { transition-delay: 0.07s !important; }
html.splash-revela .hero-texto > :nth-child(3) { transition-delay: 0.14s !important; }
html.splash-revela .hero-texto > :nth-child(4) { transition-delay: 0.21s !important; }
html.splash-revela .hero-texto > :nth-child(5) { transition-delay: 0.26s !important; }

/* Tras el relevo, el isotipo del heroe ya esta en su sitio: sin entrada, solo la flotacion. */
html.splash-hecho .hero-visual .hero-isotipo-anim {
  opacity: 1;
  transform: none;
  animation: flotar-suave 7s ease-in-out infinite;
}

/* ---------- Capa del splash ---------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  contain: strict;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.splash-fondo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, var(--superficie), transparent 70%),
    var(--fondo);
}
.splash-escena {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
}
.splash-escena > * {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.splash-resplandor {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 169, 255, 0.4), rgba(0, 169, 255, 0) 68%);
  filter: blur(10px);
  opacity: 0;
}
.splash-anillos {
  color: #00A9FF;
  overflow: visible;
  opacity: 0;
}
.sp-anillo { fill: none; stroke: currentColor; stroke-dasharray: 0.05 0.035; }
.sp-anillo--1 { stroke-width: 1.4; opacity: 0.6; }
.sp-anillo--2 { stroke-width: 1.1; opacity: 0.4; }
.splash-iso {
  overflow: visible;
  filter: drop-shadow(0 18px 40px rgba(22, 23, 102, 0.45));
}
.splash-iso .isotipo-base { fill: #F4F6FB; }
.splash-iso .electron {
  fill: #E6F6FF;
  stroke: #00A9FF;
  stroke-width: 8;
  filter: drop-shadow(0 0 10px #00A9FF) drop-shadow(0 0 22px rgba(0, 169, 255, 0.6));
}
.splash-iso .electron-estela { fill: #00A9FF; }
.splash-iso .sp-pieza { transform-box: fill-box; transform-origin: 50% 50%; }
.splash-iso .sp-disco { transform-box: view-box; transform-origin: 696.28px 694.97px; }
.splash-iso .sp-orbita {
  fill: none;
  stroke: #F4F6FB;
  stroke-width: 26;
  stroke-linecap: butt;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

/* ---------- Control para saltar ---------- */
.splash-saltar {
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  cursor: pointer;
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  min-height: 44px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--texto-2);
  background: color-mix(in srgb, var(--fondo) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--texto-2) 35%, transparent);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.splash-saltar svg { width: 14px; height: 14px; }
.splash-saltar:hover { color: var(--texto-1); border-color: var(--acento); }
/* Con el foco de teclado se ve entero aunque su fundido de entrada no haya terminado. */
.splash-saltar:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; opacity: 1 !important; }
@media (min-width: 768px) {
  .splash-saltar { right: 32px; bottom: 32px; }
}