/** * Entrance reveals — GPU-friendly (opacity + transform only). * Hidden state applies only when has .js (see reveal-animations.js / header). */ .reveal { opacity: 1; transform: none; } .js .reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1), transform 650ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); } .js .reveal--fade { transform: none; transition-duration: 550ms; } .js .reveal--left { transform: translate3d(-24px, 0, 0); } .js .reveal--right { transform: translate3d(24px, 0, 0); } .js .reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } @media (max-width: 767px) { .js .reveal { transform: translate3d(0, 16px, 0); transition-duration: 500ms; transition-delay: 0ms; } .js .reveal--fade { transform: none; transition-duration: 450ms; } .js .reveal--left, .js .reveal--right { transform: translate3d(0, 16px, 0); } } @media (prefers-reduced-motion: reduce) { .js .reveal, .js .reveal--fade, .js .reveal--left, .js .reveal--right { opacity: 1 !important; transform: none !important; transition: none !important; } }