/* ================================================================
   animations.css — GAMS Sacaba / Tema gams
   Animaciones del front-page. Archivo separado para:
     - Carga condicional (solo en portada)
     - Fácil desactivación con prefers-reduced-motion
     - No contaminar front-page.css con keyframes

   Cargado en functions.php:
     wp_enqueue_style('gams-animations', .../animations.css,
       ['gams-front-page'], $ver);
   ================================================================ */

/* ── Respetar preferencia del sistema ────────────────────────
   Si el usuario tiene activado "Reducir movimiento" en su SO,
   desactivamos TODAS las animaciones de este archivo.
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
  .gams-particle       { display: none !important; }
  .gams-counter-num    { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   1. HERO — Partículas flotantes (Canvas vía JS)
   El canvas se inserta por animations.js dentro de #gams-hero.
   ══════════════════════════════════════════════════════════════ */
#gams-hero-canvas {
  position:       absolute;
  inset:          0;
  z-index:        1;   /* encima del overlay ::before, debajo del content */
  pointer-events: none;
  opacity:        0.45;
}

/* Fade-in del contenido del hero al cargar */
#gams-hero-text {
  animation: heroFadeUp 0.9s ease both;
  animation-delay: 0.2s;
}
#gams-alertas-box {
  animation: heroFadeUp 0.9s ease both;
  animation-delay: 0.45s;
}

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


/* ══════════════════════════════════════════════════════════════
   2. ACCESOS RÁPIDOS — entrada escalonada al hacer scroll
   ══════════════════════════════════════════════════════════════ */
.gams-acc {
  opacity:    0;
  transform:  translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.gams-acc.is-visible {
  opacity:   1;
  transform: translateY(0);
}
/* Delay escalonado: cada hijo nth */
.gams-acc:nth-child(1) { transition-delay: 0.05s; }
.gams-acc:nth-child(2) { transition-delay: 0.12s; }
.gams-acc:nth-child(3) { transition-delay: 0.19s; }
.gams-acc:nth-child(4) { transition-delay: 0.26s; }
.gams-acc:nth-child(5) { transition-delay: 0.33s; }


/* ══════════════════════════════════════════════════════════════
   3. INDICADORES — contador ascendente
   El número real se esconde, se muestra .gams-counter-num
   que JS anima desde 0 hasta el valor final.
   ══════════════════════════════════════════════════════════════ */
.gams-ind {
  opacity:    0;
  transform:  translateY(20px) scale(0.97);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.gams-ind.is-visible {
  opacity:   1;
  transform: translateY(0) scale(1);
}
.gams-ind:nth-child(1) { transition-delay: 0.00s; }
.gams-ind:nth-child(2) { transition-delay: 0.10s; }
.gams-ind:nth-child(3) { transition-delay: 0.20s; }
.gams-ind:nth-child(4) { transition-delay: 0.30s; }

/* Contenedor del número animado — inline para que número y sufijo
   queden en la misma línea: "160k", "2.570", "735" */
.gams-ind-num {
  display:     flex;
  align-items: baseline;  /* alinea número y sufijo en la misma base */
  justify-content: center;
  gap:         1px;
  flex-wrap:   nowrap;    /* nunca rompe a segunda línea */
}

.gams-counter-num {
  display:              inline;  /* FIX: inline en lugar de block */
  font-weight:          800;
  font-size:            2.2rem;
  line-height:          1;
  font-variant-numeric: tabular-nums;
}

.counter-suffix {
  display:     inline;
  font-weight: 800;
  font-size:   1.4rem;  /* ligeramente menor que el número */
  line-height: 1;
}


/* ══════════════════════════════════════════════════════════════
   4. SECCIONES GENÉRICAS — fade-in al entrar en viewport
   Aplicar clase .gams-anim-section a cualquier sección.
   ══════════════════════════════════════════════════════════════ */
.gams-anim-section {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.gams-anim-section.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* Variante: solo fade sin desplazamiento */
.gams-anim-fade {
  opacity:    0;
  transition: opacity 0.7s ease;
}
.gams-anim-fade.is-visible {
  opacity: 1;
}