/** * ═══════════════════════════════════════════════════════════════ * SITE ANIMATIONS — CSS * * CRITICAL: The .sa-loading rule on is what prevents FOUC. * It must be loaded BEFORE any page content renders. * The PHP enqueue file handles this by injecting it inline in . * * This file contains the remaining non-critical styles. * ═══════════════════════════════════════════════════════════════ */ /* ─── FOUC PREVENTION ───────────────────────────────────────── */ /* The .sa-loading class is added inline in via PHP. */ /* This hides animated elements BEFORE JS loads, preventing the */ /* flash-then-animate problem. */ /* Page-level: hide main content until JS animates it in */ html.sa-loading #brx-content, html.sa-loading main, html.sa-loading > body > .brxe-container { opacity: 0; } /* Element-level: hide anything with an sa- animation class */ html.sa-loading [class*="sa-fade"], html.sa-loading [class*="sa-slide"], html.sa-loading [class*="sa-text-"], html.sa-loading [class*="sa-scale"], html.sa-loading [class*="sa-rotate"], html.sa-loading [class*="sa-flip"], html.sa-loading [class*="sa-blur"], html.sa-loading [class*="sa-reveal"], html.sa-loading [class*="sa-image"], html.sa-loading [class*="sa-counter"], html.sa-loading .sa-draw, html.sa-loading .sa-stagger > * { opacity: 0; } /* Once JS is ready, it removes sa-loading and adds sa-ready */ /* Elements are then controlled by GSAP, not CSS opacity */ html.sa-ready [data-sa-animated="true"] { /* GSAP handles everything from here */ } /* ─── PAGE TRANSITION ───────────────────────────────────────── */ /* Smooth page exit/enter via GSAP inline styles. */ /* The JS sets opacity/transform directly - no CSS needed. */ /* But we add a safety net for the initial load: */ html.sa-loading body { /* Prevent scroll during initial page-enter animation */ overflow-x: hidden; } /* ─── REDUCED MOTION ────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html.sa-loading #brx-content, html.sa-loading main, html.sa-loading [class*="sa-"] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; } /* Skip page transitions too */ #brx-content, main { transition: none !important; } } /* ─── SPLIT TEXT BASE ───────────────────────────────────────── */ .sa-char, .sa-word { display: inline-block; will-change: transform, opacity; } .sa-line { display: block; overflow: hidden; } .sa-line-inner { display: block; will-change: transform; } /* ─── PERFORMANCE HINTS ─────────────────────────────────────── */ [class*="sa-fade"], [class*="sa-scale"], .sa-rotate-in, .sa-flip, .sa-blur-in { will-change: transform, opacity; } [class*="sa-slide"] { will-change: clip-path; } .sa-reveal-overlay { will-change: transform; pointer-events: none; } [class*="sa-marquee"] { overflow: hidden; white-space: nowrap; } /* ─── VIEW TRANSITIONS (progressive enhancement) ────────────── */ /* These kick in only for browsers supporting the API */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: sa-vt-out 0.3s ease-in both; } ::view-transition-new(root) { animation: sa-vt-in 0.3s ease-out both; } @keyframes sa-vt-out { to { opacity: 0; transform: translateY(-10px); } } @keyframes sa-vt-in { from { opacity: 0; transform: translateY(10px); } } /* ─── BRICKS EDITOR: disable animations while editing ────────── */ .brx-body.editing [class*="sa-"] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }