/* Landthor — movimiento. Depende de assets/tokens.css. Hasta ahora las animaciones existian solo en la home: servicios.html, nosotros.html y el caso de exito tenian cero @keyframes, cero transition y cero reveals. Este fichero las comparte entre las 8 paginas. El bloque prefers-reduced-motion del final cubre TODO. El que habia antes desactivaba dos animaciones de ocho y no tocaba el scroll suave. */ @keyframes lt-wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes lt-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes lt-area-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } @keyframes lt-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 138, 42, 0.32); } 50% { box-shadow: 0 0 0 12px rgba(246, 138, 42, 0); } } @keyframes lt-dash { to { stroke-dashoffset: -24; } } @keyframes lt-pulse { 0%, 100% { opacity: 0.14; } 50% { opacity: 0.4; } } /* Trazo que se dibuja: la grafica del hero. */ /* De 1400 a 0, no al reves. El trazo debe estar DIBUJADO por defecto y la animacion ser solo la entrada: si no llega a correr -- pestana en segundo plano al cargar, JS caido, un motor que ignore la animacion -- la grafica se ve igual. Antes el estado base era invisible. */ @keyframes lt-draw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } } @keyframes lt-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes lt-marquee { to { transform: translateX(-50%); } } /* Estado inicial del revelado. Se declara en CSS y no en JS para que no haya un fotograma con el contenido ya colocado antes de que corra el script. El propio JS anade .lt-motion al solo si va a animar, asi que sin JS o con movimiento reducido el contenido se ve directamente. */ .lt-motion [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .lt-motion [data-reveal="2"] { transition-delay: 0.07s; } .lt-motion [data-reveal="3"] { transition-delay: 0.14s; } .lt-motion [data-reveal="4"] { transition-delay: 0.21s; } .lt-motion [data-reveal="5"] { transition-delay: 0.28s; } .lt-motion [data-reveal="6"] { transition-delay: 0.35s; } .lt-motion [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; /* El retardo negativo es imprescindible, no adorno. Sin el, una animacion declarada como `lt-wipe 1.1s 0.7s both` conserva su retardo: con fill backwards el elemento se queda en el estado `from` -- escala 0, opacidad 0 -- durante esos 0,7 s. Es decir, justo a quien pide menos movimiento se le oculta contenido. Con -1ms la animacion nace ya terminada. */ animation-delay: -1ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .lt-motion [data-reveal] { opacity: 1; transform: none; } } /* Filete que se dibuja al entrar en pantalla. Reutiliza el gesto de lt-rule, que estaba definido y sin usar desde el export original. El elemento no se desvanece: solo su regla superior crece de izquierda a derecha, que es un movimiento con intencion y no decoracion. */ .lt-motion [data-reveal="rule"] { opacity: 1; transform: none; } .lt-motion [data-reveal="rule"]::before { transform: scaleX(0); } .lt-motion [data-reveal="rule"].is-in::before { transform: scaleX(1); } .lt-draw-rule { position: relative; border-top: 0 !important; } .lt-draw-rule::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: currentColor; opacity: 0.22; transform-origin: left; transition: transform 0.9s var(--ease) 0.05s; }