/* ========================================================================== LobbyVPN — entrance animations Each landing-page section is a single Elementor widget, so Elementor's own Motion Effects can only move the whole block. Widgets instead tag their inner elements with `data-lvpn-anim`, and those slide in individually as the section scrolls into view. NO-JS SAFETY: the hidden state applies only under `html.lvpn-anim`, and that class is added by a tiny blocking script in . If JavaScript is off — or the visitor prefers reduced motion — the class is never added and every element renders in its final state. Never hide these elements unconditionally. ========================================================================== */ .lvpn-anim [data-lvpn-anim] { opacity: 0; /* No `will-change`: a landing page tags ~40 elements and promoting every one to its own compositor layer costs more than it saves. opacity/transform transitions are already compositor-friendly. */ transition: opacity var(--lvpn-anim-duration, 650ms) cubic-bezier(0.22, 0.61, 0.36, 1) var(--lvpn-anim-delay, 0ms), transform var(--lvpn-anim-duration, 650ms) cubic-bezier(0.22, 0.61, 0.36, 1) var(--lvpn-anim-delay, 0ms); } .lvpn-anim [data-lvpn-anim='up'] { transform: translate3d(0, var(--lvpn-anim-distance, 28px), 0); } .lvpn-anim [data-lvpn-anim='down'] { transform: translate3d(0, calc(var(--lvpn-anim-distance, 28px) * -1), 0); } .lvpn-anim [data-lvpn-anim='left'] { transform: translate3d(calc(var(--lvpn-anim-distance, 28px) * -1), 0, 0); } .lvpn-anim [data-lvpn-anim='right'] { transform: translate3d(var(--lvpn-anim-distance, 28px), 0, 0); } .lvpn-anim [data-lvpn-anim='zoom'] { transform: scale(0.94); } .lvpn-anim [data-lvpn-anim='fade'] { transform: none; } /* Revealed by the IntersectionObserver in frontend.js. */ .lvpn-anim [data-lvpn-anim].is-inview { opacity: 1; transform: none; } /* * Belt and braces: even with the class present, a visitor who turns on reduced * motion after load gets everything immediately. */ @media (prefers-reduced-motion: reduce) { .lvpn-anim [data-lvpn-anim] { opacity: 1; transform: none; transition: none; } }