/* ==========================================================================
   ESPUMA TORITO — Animaciones
   Todo el movimiento se desactiva si el usuario pidió "reducir movimiento".
   ========================================================================== */

@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes girar-lento {
  to { transform: rotate(360deg); }
}

@keyframes sombra-flota {
  0%, 100% { scale: 1; opacity: 1; }
  50% { scale: 0.86; opacity: 0.7; }
}

@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgb(215 50 47 / 0.45); }
  70%, 100% { box-shadow: 0 0 0 10px rgb(215 50 47 / 0); }
}

@keyframes visor-entrar {
  from { opacity: 0; }
}

.anim-flotar { animation: flotar 6s ease-in-out infinite; }
.anim-girar { animation: girar-lento 30s linear infinite; }

/* Aparecer al hacer scroll: js/main.js agrega .visible con IntersectionObserver.
   Sin JS el contenido se ve normal (la clase .js la pone el script). */
.js .revelar {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-lenta) var(--ease),
    transform var(--dur-lenta) var(--ease);
  transition-delay: var(--retraso, 0ms);
}

.js .revelar.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .revelar {
    opacity: 1;
    transform: none;
  }
}