/* Lo que antes hacía framer-motion, ahora en CSS + un script de 40 líneas.
   Todo cuelga de .js, que pone el propio script en el <head>: si el
   JavaScript no llega, la página se ve entera y quieta en vez de en blanco
   (con React, sin JavaScript no había nada que ver). */

/* Entrada: sube 20px y aparece cuando entra en pantalla. El retardo de cada
   elemento va en su atributo data-delay y el script lo copia al style. */
.js [data-anim='fade-up'] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.js [data-anim='fade-up'].visible {
  opacity: 1;
  transform: none;
}

/* Revelado palabra a palabra: arrancan apagadas y el scroll las enciende. */
.js [data-reveal-start] > span {
  opacity: 0.15;
}

/* Quien pide menos movimiento ve la página de una vez, sin animación. */
@media (prefers-reduced-motion: reduce) {
  .js [data-anim='fade-up'],
  .js [data-anim='fade-up'].visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js [data-reveal-start] > span {
    opacity: 1;
  }
}