/* ==========================================================================
   EXMULI — animations.css
   Movimiento discreto. Todo se desactiva con prefers-reduced-motion.
   Los elementos .reveal solo se ocultan cuando JavaScript está activo
   (clase .js en <html>), así que sin JS el contenido siempre se ve.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@keyframes rig-in {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: none; }
}
.hero-art img { animation: rig-in 0.9s var(--ease) both; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.hero-copy > * { animation: hero-rise 0.7s var(--ease) both; }
.hero-copy > *:nth-child(2) { animation-delay: 0.08s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.16s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.24s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.32s; }

/* Estado de éxito del formulario */
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}
.is-entering { animation: pop-in 0.35s var(--ease) both; }

/* Lightbox */
dialog.lightbox[open] { animation: pop-in 0.25s var(--ease) both; }

/* Línea de tiempo (demo de seguimiento) */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(214, 40, 57, 0.45); }
  100% { box-shadow: 0 0 0 10px rgba(214, 40, 57, 0); }
}
.timeline li.current::before { animation: pulse-ring 1.8s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover { transform: none; }
}