@keyframes flow{to{background-position:200% 0}}
@keyframes dot{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}}
/* El contenido solo se oculta si JS está activo; main.js lo revela siempre (con o sin GSAP). */
.js .reveal,.js [data-hero]{opacity:0;transform:translateY(26px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .hero-copy [data-hero].in,.js .hero-art.in,.js .page-hero [data-hero].in{opacity:1;transform:none;transition:opacity .9s,transform .9s;transition-delay:var(--d,0s)}
.hero-art img{animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .js .reveal,.js [data-hero]{opacity:1;transform:none}
}