/* ==========================================================
   05-animaciones.css
   FUNCIÓN: Todas las animaciones de la página.
   IMPORTANTE: este archivo debe cargarse DESPUÉS de 04-hero.css
   para que la regla "reduced-motion" de abajo funcione.
   ========================================================== */

/* ---------- BLOQUE: Anillo giratorio (hero y círculo del reciclaje) ---------- */
.ring-spin{
  position:absolute;inset:0;
  animation:spin 26s linear infinite;
  will-change:transform;
}
.ring-spin svg{width:100%;height:100%;}

/* ---------- BLOQUE: Definición de las animaciones ---------- */
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}              /* gira el anillo */
@keyframes counterspin{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}      /* gira los nodos al revés */

/* ---------- BLOQUE: Accesibilidad ----------
   Si la persona tiene activada la opción "reducir movimiento"
   en su dispositivo, se apagan las animaciones. */
@media(prefers-reduced-motion: reduce){
  .ring-spin, .loop-node{animation:none;}
}