/** * Devders Smart Effects — reveal engine CSS. * * Effects only hide content while is present * (added by the plugin when enabled). Every other context — no-JS, * reduced motion, Divi Visual Builder, Elementor editor — sees content * in its final state immediately. * * Effect classes are enumerated explicitly (via :is()) so that modifier * classes such as dse-slow or dse-delay-3 never hide an element on * their own. */ :root { --dse-duration: .6s; --dse-easing: cubic-bezier(.22, .61, .36, 1); --dse-distance: 28px; } /* ------------------------------------------------------------------ Base hidden states (only when the engine is on) ------------------------------------------------------------------ */ html.dse-js body.dse-on :is( .dse-fade, .dse-fade-up, .dse-fade-down, .dse-fade-left, .dse-fade-right, .dse-fade-up-left, .dse-fade-up-right, .dse-fade-down-left, .dse-fade-down-right, .dse-zoom-in, .dse-zoom-out, .dse-flip-up, .dse-flip-down, .dse-flip-left, .dse-flip-right, .dse-slide-up, .dse-slide-down, .dse-slide-left, .dse-slide-right, .dse-blur-up, .dse-rotate-left, .dse-rotate-right, .dse-tilt-up, .dse-tilt-down ) { opacity: 0; transition-property: opacity, transform, filter; transition-duration: var(--dse-duration); transition-timing-function: var(--dse-easing); } /* Revealed state — the engine adds .dse-in once, when in view. */ html.dse-js body.dse-on :is( .dse-fade, .dse-fade-up, .dse-fade-down, .dse-fade-left, .dse-fade-right, .dse-fade-up-left, .dse-fade-up-right, .dse-fade-down-left, .dse-fade-down-right, .dse-zoom-in, .dse-zoom-out, .dse-flip-up, .dse-flip-down, .dse-flip-left, .dse-flip-right, .dse-slide-up, .dse-slide-down, .dse-slide-left, .dse-slide-right, .dse-blur-up, .dse-rotate-left, .dse-rotate-right, .dse-tilt-up, .dse-tilt-down ).dse-in { opacity: 1; transform: none; filter: none; } /* ------------------------------------------------------------------ Entrance transforms ------------------------------------------------------------------ */ /* Fade family */ .dse-fade { transform: none; } html.dse-js body.dse-on .dse-fade-up { transform: translate3d(0, var(--dse-distance), 0); } html.dse-js body.dse-on .dse-fade-down { transform: translate3d(0, calc(-1 * var(--dse-distance)), 0); } html.dse-js body.dse-on .dse-fade-left { transform: translate3d(var(--dse-distance), 0, 0); } html.dse-js body.dse-on .dse-fade-right { transform: translate3d(calc(-1 * var(--dse-distance)), 0, 0); } html.dse-js body.dse-on .dse-fade-up-left { transform: translate3d(var(--dse-distance), var(--dse-distance), 0); } html.dse-js body.dse-on .dse-fade-up-right { transform: translate3d(calc(-1 * var(--dse-distance)), var(--dse-distance), 0); } html.dse-js body.dse-on .dse-fade-down-left { transform: translate3d(var(--dse-distance), calc(-1 * var(--dse-distance)), 0); } html.dse-js body.dse-on .dse-fade-down-right { transform: translate3d(calc(-1 * var(--dse-distance)), calc(-1 * var(--dse-distance)), 0); } /* Zoom family */ html.dse-js body.dse-on .dse-zoom-in { transform: scale(.85); } html.dse-js body.dse-on .dse-zoom-out { transform: scale(1.15); } /* Flip family (3D) */ html.dse-js body.dse-on .dse-flip-up { transform: perspective(900px) rotateX(-90deg); transform-origin: center bottom; } html.dse-js body.dse-on .dse-flip-down { transform: perspective(900px) rotateX(90deg); transform-origin: center top; } html.dse-js body.dse-on .dse-flip-left { transform: perspective(900px) rotateY(-90deg); transform-origin: left center; } html.dse-js body.dse-on .dse-flip-right { transform: perspective(900px) rotateY(90deg); transform-origin: right center; } /* Slide family (moves without fading feel — larger distance) */ html.dse-js body.dse-on .dse-slide-up { transform: translate3d(0, calc(var(--dse-distance) * 3), 0); } html.dse-js body.dse-on .dse-slide-down { transform: translate3d(0, calc(var(--dse-distance) * -3), 0); } html.dse-js body.dse-on .dse-slide-left { transform: translate3d(calc(var(--dse-distance) * 3), 0, 0); } html.dse-js body.dse-on .dse-slide-right { transform: translate3d(calc(var(--dse-distance) * -3), 0, 0); } /* Blur (modern fade-up + defocus) */ html.dse-js body.dse-on .dse-blur-up { transform: translate3d(0, var(--dse-distance), 0); filter: blur(10px); } /* Rotate 3D family */ html.dse-js body.dse-on .dse-rotate-left { transform: perspective(1000px) rotateY(-70deg); } html.dse-js body.dse-on .dse-rotate-right { transform: perspective(1000px) rotateY(70deg); } html.dse-js body.dse-on .dse-tilt-up { transform: perspective(1000px) rotateX(55deg); } html.dse-js body.dse-on .dse-tilt-down { transform: perspective(1000px) rotateX(-55deg); } /* ------------------------------------------------------------------ Modifiers (combine with any effect class) ------------------------------------------------------------------ */ html.dse-js body.dse-on .dse-fast { transition-duration: .32s; } html.dse-js body.dse-on .dse-slow { transition-duration: .95s; } html.dse-js body.dse-on .dse-delay-1 { transition-delay: .1s; } html.dse-js body.dse-on .dse-delay-2 { transition-delay: .2s; } html.dse-js body.dse-on .dse-delay-3 { transition-delay: .3s; } html.dse-js body.dse-on .dse-delay-4 { transition-delay: .4s; } html.dse-js body.dse-on .dse-delay-5 { transition-delay: .5s; } /* ------------------------------------------------------------------ Safety guards — content is never hidden in these contexts ------------------------------------------------------------------ */ /* Divi Visual Builder / front-end builder contexts. body.* keeps specificity at or above the base rule, and these rules come later in the file, so builders always win. */ html.dse-js body.dse-on.et-fb :is([class*="dse-"]), html.dse-js body.dse-on.et-bfb :is([class*="dse-"]), html.dse-js body.et-fb :is([class*="dse-"]), html.dse-js body.et-bfb :is([class*="dse-"]), body.et-fb :is([class*="dse-"]), body.et-bfb :is([class*="dse-"]) { opacity: 1; transform: none; filter: none; } /* Elementor editor (editing mode only; the preview animates normally). */ html.dse-js body.elementor-editor-active :is([class*="dse-"]), html.dse-js body.dse-on.elementor-editor-active :is([class*="dse-"]), body.elementor-editor-active :is([class*="dse-"]) { opacity: 1; transform: none; filter: none; } /* Visitors who ask the OS for less motion. */ @media (prefers-reduced-motion: reduce) { html.dse-js body.dse-on :is([class*="dse-"]), [class*="dse-"] { opacity: 1; transform: none; filter: none; transition: none; } }