/* ========================================================================== animations.css — Keyframes, aparición al hacer scroll y reduced-motion ========================================================================== */ @keyframes glowPulse { 0%, 100% { opacity: .45; } 50% { opacity: .8; } } @keyframes revealUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } /* El isotipo del hero conserva su translateY(-50%) y solo flota */ .hero__mark { animation: triFloat 9s ease-in-out infinite; } @keyframes triFloat { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 16px)); } } /* ----- Reveal progresivo (lo activa reveal.js con IntersectionObserver) ----- Por defecto visible; solo se oculta cuando hay JS (clase quitada de ), así nunca escondemos contenido si el JS falla o está deshabilitado. */ .reveal { opacity: 1; transform: none; } html:not(.no-js) .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; } html:not(.no-js) .reveal.is-visible { opacity: 1; transform: none; } /* ----- Respeto a quien prefiere menos movimiento (WCAG 2.3.3) ----- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal, html:not(.no-js) .reveal { opacity: 1 !important; transform: none !important; } }