/* ==========================================================================
   Animaciones — keyframes y clases reutilizables
   Duraciones dentro de 0.3s–0.5s; prefers-reduced-motion ya se respeta
   de forma global en reset.css.
   ========================================================================== */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Rebote suave para iconos circulares decorativos al pasar el mouse */
@keyframes gentle-bounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-4px) scale(1.08);
  }
}

/* Scroll reveal: la clase .js-reveal la añade js/animations.js mediante
   IntersectionObserver; sin JS o con prefers-reduced-motion, el contenido
   permanece visible por defecto (mejora progresiva, no bloqueante). */
.js-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: var(--transition-reveal);
}

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