/* ==========================================================================
   animations.css — estados iniciales de los elementos animados por GSAP
   y respeto por prefers-reduced-motion.

   Regla: aquí solo se declaran los estados de PARTIDA. El movimiento lo
   controla GSAP (js/animations.js). Así evitamos el destello de contenido
   sin estilo y mantenemos un único lugar donde apagarlo todo.
   ========================================================================== */

/* Estados de partida.
   ==========================================================================
   Solo cubren la ventana entre que se pinta el HTML y que GSAP arranca, para
   que no se vea el contenido en su posición final y luego salte. En cuanto
   GSAP fija esos mismos valores como estilo en línea añade `anim-listo` y
   estas reglas dejan de aplicarse para siempre.

   Es imprescindible que dejen de aplicarse: al terminar cada animación GSAP
   limpia sus estilos en línea, y si el CSS siguiera activo el elemento
   volvería un fotograma a su posición de partida. Ese es exactamente el salto
   —bajar y volver a subir— que se veía al recorrer la página.
   ========================================================================== */
.js-anim:not(.anim-listo) [data-anim='subir'],
.js-anim:not(.anim-listo) [data-anim='fade'],
.js-anim:not(.anim-listo) [data-anim='escala'],
.js-anim:not(.anim-listo) [data-anim='izquierda'],
.js-anim:not(.anim-listo) [data-anim='derecha'] {
  opacity: 0;
}

.js-anim:not(.anim-listo) [data-anim='subir'] { transform: translateY(28px); }
.js-anim:not(.anim-listo) [data-anim='escala'] { transform: scale(0.95); }
.js-anim:not(.anim-listo) [data-anim='izquierda'] { transform: translateX(-32px); }
.js-anim:not(.anim-listo) [data-anim='derecha'] { transform: translateX(32px); }

/* Los hijos de un contenedor escalonado parten ocultos */
.js-anim:not(.anim-listo) [data-anim-grupo] > * {
  opacity: 0;
  transform: translateY(22px);
}

/* Título partido en líneas */
.linea-mascara {
  display: block;
  overflow: hidden;
}

.linea-mascara > span { display: block; }

.js-anim:not(.anim-listo) .linea-mascara > span {
  transform: translateY(105%);
}

/* Los revelados laterales parten desplazados (`translateX(±32px)`). Cuando el
   elemento va pegado al borde derecho del contenedor —el botón «Ver todas las
   especies», por ejemplo— esos 32 px sobresalen de la ventana y aparece una
   barra de scroll horizontal, que desaparece sola en cuanto la animación se
   dispara. Se recorta el eje X para que ese estado transitorio no se note.

   `clip` y no `hidden` a propósito: `hidden` crearía un contenedor de scroll y
   rompería el `position: sticky` de la cabecera de sección, el lateral del
   glosario y el aparte de las fichas. `clip` recorta sin crear scroll. */
main { overflow-x: clip; }

/* Hero: capa de parallax */
.parallax { will-change: transform; }

/* Contadores: reservan el espacio para que no salte el layout */
.contador { font-variant-numeric: tabular-nums; }

/* Cursor de ayuda sobre el mapa (imita el puntero de la referencia) */
.pista-cursor {
  position: absolute;
  z-index: 550;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: var(--r-full);
  background: rgba(26, 36, 32, 0.88);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
  white-space: nowrap;
}

.pista-cursor svg { width: 14px; height: 14px; }

/* Punto que late (indicador de "en vivo") */
.latido {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 8px;
  height: 8px;
}

.latido::before,
.latido::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--rojo);
}

.latido::before { animation: latir 2s ease-out infinite; }

@keyframes latir {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(3.2); opacity: 0; }
}

/* Línea que se dibuja al entrar en pantalla */
.js-anim .linea-dibujo {
  transform: scaleX(0);
  transform-origin: left center;
}

/* ==========================================================================
   Accesibilidad: sin movimiento
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Todo lo que GSAP iba a revelar queda visible desde el inicio */
  [data-anim],
  [data-anim-grupo] > *,
  .linea-mascara > span {
    opacity: 1 !important;
    transform: none !important;
  }

  .linea-dibujo { transform: scaleX(1) !important; }

  /* Sin transición entre páginas ni follaje: se navega directamente. */
  .transicion { display: none !important; }

  .latido::before { animation: none; }
  .esqueleto { animation: none; }
}