/* ========================================================================== Animaciones al hacer scroll solo se activa si ppo-motion.js marcó , así que sin JavaScript o con "reducir movimiento" todo se ve normal, sin animación. ========================================================================== */ html.ppo-motion { --ppo-dist: 50px; --ppo-dur: .8s; --ppo-ease: ease-in-out; } @media (min-width: 768px) { html.ppo-motion { --ppo-dist: 100px; } } html.ppo-motion [data-ppo-anim] { opacity: 0; transition: opacity var(--ppo-dur) var(--ppo-ease) var(--ppo-delay, 0ms), transform var(--ppo-dur) var(--ppo-ease) var(--ppo-delay, 0ms); } html.ppo-motion [data-ppo-anim="fade-up"] { transform: translate3d(0, var(--ppo-dist), 0); } html.ppo-motion [data-ppo-anim="fade-down"] { transform: translate3d(0, calc(var(--ppo-dist) * -1), 0); } /* Bloques de color grandes: no se mueven, solo se encienden (10 % → 100 %) */ html.ppo-motion [data-ppo-anim="fade"] { opacity: .1; } /* Estado final. "none" (y no una traslación a 0) para que, al terminar, el elemento no siga creando un contexto propio: el menú móvil del header es position:fixed y necesita que su contenedor no tenga transform. */ html.ppo-motion [data-ppo-anim].is-in { opacity: 1; transform: none; }