/* ========================================================================== animations.css — Reveal on scroll y microinteracciones Todo con CSS transitions; el JS solo agrega/quita la clase `is-visible`. ========================================================================== */ /* -------------------------------------------------------------------------- Reveal on scroll Estado inicial solo cuando JS esta activo (clase `js` en ), para que sin JavaScript el contenido siga siendo visible. -------------------------------------------------------------------------- */ .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .js [data-reveal="fade"] { transform: none; } .js [data-reveal="right"] { transform: translateX(-24px); } .js [data-reveal="scale"] { transform: scale(0.96); } .js [data-reveal].is-visible { opacity: 1; transform: none; will-change: auto; } /* Retardos escalonados para grupos (tarjetas, pasos, logos) */ .js [data-reveal-group] > * { --reveal-delay: 0ms; } .js [data-reveal-group] > *:nth-child(2) { --reveal-delay: 80ms; } .js [data-reveal-group] > *:nth-child(3) { --reveal-delay: 160ms; } .js [data-reveal-group] > *:nth-child(4) { --reveal-delay: 240ms; } .js [data-reveal-group] > *:nth-child(5) { --reveal-delay: 320ms; } .js [data-reveal-group] > *:nth-child(n + 6) { --reveal-delay: 400ms; } /* -------------------------------------------------------------------------- Keyframes -------------------------------------------------------------------------- */ @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes float-hint { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } } /* Entrada del hero: no depende del observer para no penalizar el LCP */ .hero__content > * { animation: fade-in-up 0.6s var(--ease-out) both; } .hero__content > *:nth-child(1) { animation-delay: 0.05s; } .hero__content > *:nth-child(2) { animation-delay: 0.15s; } .hero__content > *:nth-child(3) { animation-delay: 0.25s; } .hero__content > *:nth-child(4) { animation-delay: 0.35s; } .hero__scroll { animation: float-hint 2.4s ease-in-out infinite; } /* -------------------------------------------------------------------------- Entrada escalonada de los enlaces del menu movil. Solo aplica cuando el panel esta abierto (.is-open), y el panel nunca lleva esa clase en desktop, asi que el menu horizontal no se ve afectado. -------------------------------------------------------------------------- */ .nav.is-open .nav__item { animation: fade-in-up 0.45s var(--ease-out) both; } .nav.is-open .nav__item:nth-child(1) { animation-delay: 0.12s; } .nav.is-open .nav__item:nth-child(2) { animation-delay: 0.18s; } .nav.is-open .nav__item:nth-child(3) { animation-delay: 0.24s; } .nav.is-open .nav__item:nth-child(4) { animation-delay: 0.3s; } .nav.is-open .nav__item:nth-child(5) { animation-delay: 0.36s; } /* -------------------------------------------------------------------------- Preferencia de movimiento reducido: se desactiva todo el movimiento -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; /* justificado: override de a11y */ animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; } }