/* ------------------------------------------------------------------ Motion Regla de la casa: el estado oculto lo pone JavaScript (clase .js-motion en ). Si el script falla o tarda, el contenido se ve igual — un sitio cuyo texto depende de una animación está roto para buscadores, lectores de pantalla y conexiones lentas. ------------------------------------------------------------------ */ .js-motion [data-reveal] { opacity: 0; transform: translateY(1.75rem); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .js-motion [data-reveal].is-visible { opacity: 1; transform: none; } /* Revelado por líneas para los titulares grandes: cada línea sube desde su propia máscara. Da al hero el arranque de una cortina. */ .js-motion .hero__title .line > span { transform: translateY(105%); transition: transform var(--dur-story) var(--ease-out); transition-delay: calc(var(--line-index, 0) * 90ms + 120ms); } .js-motion .hero.is-ready .hero__title .line > span { transform: translateY(0); } .js-motion .hero__kicker, .js-motion .hero__lead, .js-motion .hero__actions, .js-motion .hero__strip { opacity: 0; transform: translateY(1.25rem); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .js-motion .hero.is-ready .hero__kicker { opacity: 1; transform: none; transition-delay: 80ms; } .js-motion .hero.is-ready .hero__lead { opacity: 1; transform: none; transition-delay: 420ms; } .js-motion .hero.is-ready .hero__actions { opacity: 1; transform: none; transition-delay: 520ms; } .js-motion .hero.is-ready .hero__strip { opacity: 1; transform: none; transition-delay: 620ms; } /* Zoom lentísimo de la imagen del hero. Casi imperceptible, y esa es la idea: da vida sin llamar la atención sobre sí mismo. */ .hero__media img { animation: slow-drift 26s var(--ease-in-out) infinite alternate; } @keyframes slow-drift { from { transform: scale(1); } to { transform: scale(1.07); } } @keyframes scroll-hint { 0%, 100% { transform: scaleY(0.25); opacity: 0.35; } 50% { transform: scaleY(1); opacity: 1; } } .manifesto__media:hover img { transform: scale(1.04); } /* Nada de lo anterior debe imponerse a quien pidió menos movimiento. */ @media (prefers-reduced-motion: reduce) { .js-motion [data-reveal], .js-motion .hero__title .line > span, .js-motion .hero__kicker, .js-motion .hero__lead, .js-motion .hero__actions, .js-motion .hero__strip { opacity: 1 !important; transform: none !important; } .hero__media img { animation: none; } .hero__scroll::after { animation: none; transform: scaleY(1); } .figure-cell::after, .gauge__fill { transform: scaleX(1); } }