/* ===================================================================
   ANIMACIONES
   Estado oculto SOLO se activa si JS confirma soporte (.js-ready),
   así el contenido es visible aunque el script falle o no cargue.
   =================================================================== */

[data-animate] {
  transition: opacity var(--duration-slow) var(--ease),
    transform var(--duration-slow) var(--ease);
}

.js-ready [data-animate] {
  opacity: 0;
  transform: translateY(26px);
}

.js-ready [data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-ready [data-animate="scale"] {
  transform: scale(0.97);
}

.js-ready [data-animate="scale"].is-visible {
  transform: scale(1);
}

@keyframes bounce-cue {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

.hero__scroll-cue svg {
  animation: bounce-cue 2.2s var(--ease) infinite;
}

@keyframes seal-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.badge-seal .rotor {
  transform-origin: 100px 100px;
  animation: seal-spin 30s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue svg,
  .badge-seal .rotor {
    animation: none;
  }
}