/* ==========================================================================
   ANIMATIONS — reveal al hacer scroll, keyframes y movimiento reducido.
   Los elementos solo se ocultan si hay JS (.js); sin JS todo es visible.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.js [data-reveal="fade"] {
  transform: none;
}

.js [data-reveal="scale"] {
  transform: scale(0.92);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Tras la primera aparición (p. ej. al cambiar de idioma) no se vuelve a animar */
.js [data-reveal].no-anim {
  transition: none;
}

/* Parallax suave del hero: main.js actualiza --hero-p (0 → 1) al hacer scroll */
.hero__inner {
  opacity: calc(1 - var(--hero-p, 0) * 1.1);
  transform: translateY(calc(var(--hero-p, 0) * -48px)) scale(calc(1 - var(--hero-p, 0) * 0.04));
  will-change: opacity, transform;
}

.hero__scroll .icon {
  animation: bob 2s var(--ease-in-out) infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ---------- Movimiento reducido: contenido inmediato, sin desplazamientos ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .hero__inner {
    opacity: 1;
    transform: none;
  }

  .timeline::after {
    transform: none;
  }
}