/* ============================================================================ * CE GSAP Scroll Animations & Parallax — Premium Performance CSS * * PHILOSOPHY: * CSS never controls the initial hidden/visible state of animated elements. * Only GSAP does this via gsap.set() inside _buildAnimation(). This prevents * the race condition where CSS hides elements before GSAP initialises — which * causes elements to remain permanently invisible if JS loads late or fails. * * What this file handles: * 1. GPU compositor layer promotion for parallax wrappers * 2. 3D perspective context for flip presets * 3. Anti-flicker font smoothing during GPU-composited transforms * 4. prefers-reduced-motion accessibility override * 5. Elementor editor full-visibility fallback * ============================================================================ */ /* ── 1. GPU COMPOSITING — parallax wrappers ───────────────────────────────── */ /* * Promote parallax containers to their own GPU compositor layer. * This prevents scroll-driven transforms from triggering repaints of * sibling elements. will-change is intentionally narrow (only transform) * because adding opacity here would create a new stacking context and * break z-index on child overlays. */ [data-ce-parallax="true"] { will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; /* Maintain crisp text during GPU-layer compositing */ -webkit-font-smoothing: subpixel-antialiased; } /* * Animated content containers: * NO will-change here. GSAP adds it inline on the actual target elements * immediately before animating, then clears it in onComplete. * This avoids permanent compositor layers on every element (GPU memory leak). */ /* ── 2. 3D PERSPECTIVE — flip presets ────────────────────────────────────── */ /* * Parent perspective container for flip-x / flip-y animations. * GSAP sets transformPerspective on the element itself, but adding * CSS perspective to the parent prevents edge-case rendering artifacts * in older browsers and Safari. */ [data-ce-animate-preset="flip-y"], [data-ce-animate-preset="flip-x"] { perspective: 1000px; } /* ── 3. FONT SMOOTHING during animation ──────────────────────────────────── */ /* * GPU-composited layers sometimes render text slightly differently from the * main layer. These rules maintain consistent font rendering throughout the * animation lifecycle (before, during, and after GSAP runs). */ [data-ce-animate-contents="true"] .elementor-widget, [data-ce-animate-contents="true"] .elementor-widget-container { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── 4. ACCESSIBILITY — prefers-reduced-motion ────────────────────────────── */ /* * Users who prefer reduced motion must see zero animation. * !important overrides GSAP's inline styles which would otherwise win the * cascade. We also reset will-change so no compositor layers remain active. * * Note: We do NOT use display:none or visibility:hidden here because those * affect layout. opacity:1 + transform:none restores the element visually * while keeping the document flow intact. */ @media (prefers-reduced-motion: reduce) { [data-ce-parallax="true"] { transform: none !important; will-change: auto !important; } /* Cover all target selector patterns GSAP uses */ [data-ce-animate-contents="true"] .elementor-widget, [data-ce-animate-contents="true"] .elementor-widget-container, [data-ce-animate-contents="true"] .e-con > .e-con-inner > *, [data-ce-animate-contents="true"] .e-con-inner > *, [data-ce-animate-contents="true"] > * { opacity: 1 !important; transform: none !important; will-change: auto !important; transition: none !important; animation: none !important; } } /* ── 5. ELEMENTOR EDITOR — safety visibility fallback ────────────────────── */ /* * Inside the editor preview iframe, Elementor adds .elementor-editor-active * to . We set visibility:visible so elements are never display-hidden * while editing. We do NOT force opacity or transform here — GSAP controls * those inline, so CSS overrides would fight the animation engine and cause * elements to appear permanently static (no live animation preview). * * The editor re-initialises GSAP on every setting change via * killExistingTriggers() + scheduleRefresh(). This CSS is only the safety * net for the brief window between re-init calls. */ .elementor-editor-active [data-ce-animate-contents="true"] .elementor-widget, .elementor-editor-active [data-ce-animate-contents="true"] .elementor-widget-container, .elementor-editor-active [data-ce-animate-contents="true"] .e-con > .e-con-inner > *, .elementor-editor-active [data-ce-animate-contents="true"] .e-con-inner > *, .elementor-editor-active [data-ce-animate-contents="true"] > * { visibility: visible !important; } .elementor-editor-active [data-ce-parallax="true"] { visibility: visible !important; }