/*==================================================

  CUIDA SST — MOVIMIENTO

  Criterio: una sola secuencia orquestada al cargar
  (el hero) y revelados discretos al desplazarse.
  Nada se mueve solo salvo la franja, que trae su
  propio botón de pausa.

==================================================*/

/*==================================================
01. KEYFRAMES
==================================================*/

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes entrar-izq {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes escalar {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rotarFondo {
  /*
    Ciclo de 21 segundos, tres imágenes, siete cada una.
    La capa está visible del 0% al 28.6% (0 a 6 s), se
    desvanece hasta el 33.3% (7 s), permanece oculta, y
    vuelve a aparecer entre el 95.2% y el 100% (20 a 21 s).

    Las tres usan este mismo recorrido con retrasos
    negativos, así que al cargar la página ya están en su
    posición y ninguna arranca en blanco.
  */
  0%,
  28.6%  { opacity: 1; }
  33.3%  { opacity: 0; }
  95.2%  { opacity: 0; }
  100%   { opacity: 1; }
}

@keyframes desfile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes pulso {
  0% {
    transform: scale(0.85);
    opacity: 0.9;
  }
  70% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes acercar {
  from { transform: scale(1.1); }
  to { transform: scale(1); }
}

/*==================================================
02. ENTRADA DEL HERO
Una sola secuencia, escalonada. El remate de la
frase ("hasta que pasa") entra al final: es el
golpe del concepto.
==================================================*/

.hero-fondo {
  animation: acercar 2.4s var(--ease) both;
}

.hero-contenido > * {
  opacity: 0;
  animation: subir 0.85s var(--ease) forwards;
}

.hero-contenido .vigencia    { animation-delay: 0.12s; }
.hero-contenido h1           { animation-delay: 0.22s; }
.hero-contenido .hero-texto  { animation-delay: 0.34s; }
.hero-contenido .hero-ciudades { animation-delay: 0.44s; }
.hero-contenido .hero-botones  { animation-delay: 0.54s; }
.hero-contenido .regresiva     { animation-delay: 0.66s; }

.hero h1 .remate {
  opacity: 0;
  animation: entrar-izq 0.85s var(--ease) 0.62s forwards;
}

.tarjeta-form {
  opacity: 0;
  animation: escalar 0.95s var(--ease) 0.36s forwards;
}

/*==================================================
03. REVELADO AL DESPLAZARSE
La clase .revelar la activa js/main.js cuando el
elemento entra en pantalla.
==================================================*/

.revelar {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.75s var(--ease),
    transform 0.75s var(--ease);
}

.revelar.visto {
  opacity: 1;
  transform: none;
}

/* Escalonado dentro de una misma rejilla */

.revelar.d1 { transition-delay: 0.08s; }
.revelar.d2 { transition-delay: 0.16s; }
.revelar.d3 { transition-delay: 0.24s; }
.revelar.d4 { transition-delay: 0.32s; }
.revelar.d5 { transition-delay: 0.40s; }
.revelar.d6 { transition-delay: 0.48s; }

/*==================================================
04. DÍGITOS DE LA CUENTA REGRESIVA
Un salto mínimo cuando cambia el número, para que
se note que está corriendo en vivo.
==================================================*/

.reloj b {
  transition: transform 0.22s var(--ease);
}

.reloj b.tic {
  transform: translateY(-3px) scale(1.05);
}

/*==================================================
05. MENOS MOVIMIENTO
Si el sistema operativo pide reducir animaciones,
todo aparece sin desplazarse y la franja se detiene.
==================================================*/

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-contenido > *,
  .hero h1 .remate,
  .tarjeta-form,
  .revelar {
    opacity: 1;
    transform: none;
  }

  .franja-pista {
    animation: none;
    transform: none;
  }

  .hero-fondo {
    animation: none;
  }

  /* Sin rotación: se muestra solo la primera imagen */
  .hero-capa {
    animation: none;
    opacity: 0;
  }

  .hero-capa:nth-child(1) {
    opacity: 1;
  }
}