/* Animaciones suaves y de corta duración — nunca deben distraer del contenido.
   Importante: [data-reveal] SOLO se oculta cuando <html> tiene la clase "js"
   (añadida por un script mínimo en el <head>). Así, si JavaScript falla, se
   deshabilita o un rastreador no interactúa con la página, el contenido
   siempre es visible por defecto (progressive enhancement). */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-standard);
}

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

[data-reveal-delay="1"] {
  transition-delay: 90ms;
}
[data-reveal-delay="2"] {
  transition-delay: 180ms;
}
[data-reveal-delay="3"] {
  transition-delay: 270ms;
}
[data-reveal-delay="4"] {
  transition-delay: 360ms;
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-white);
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}