/* ==========================================================================
   ANIMACIONES.CSS
   Movimientos sutiles de la página: aparición de secciones al scrollear
   y transición del menú mobile. Todo pensado para ser discreto y
   prolijo (institucional), no "vistoso".
   ========================================================================== */

/* Estado inicial: el elemento está listo para aparecer pero todavía no
   se ve. principal.js le agrega la clase ".visible" cuando entra en
   pantalla (usando IntersectionObserver). */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Pequeños retrasos escalonados para que las tarjetas de una misma
   grilla no aparezcan todas exactamente al mismo tiempo */
.reveal[data-retraso="1"].visible {
  transition-delay: 0.1s;
}
.reveal[data-retraso="2"].visible {
  transition-delay: 0.2s;
}
.reveal[data-retraso="3"].visible {
  transition-delay: 0.3s;
}
.reveal[data-retraso="4"].visible {
  transition-delay: 0.4s;
}
.reveal[data-retraso="5"].visible {
  transition-delay: 0.5s;
}

/* Si la persona tiene "reducir movimiento" activado en su sistema,
   respetamos esa preferencia y sacamos las animaciones */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .tarjeta-integrante__foto img {
    transition: none;
  }
}