/* ============================================================ _animations.css — INITIAL STATES FOR ANIM-* CLASSES How this works: 1. CSS sets elements to their "from" state (invisible, offset) 2. The bee-reveal engine adds [data-anim-ready] to when JS runs 3. CSS only hides elements when [data-anim-ready] is present 4. If JS fails, [data-anim-ready] never gets added → content shows normally = graceful degradation ============================================================ */ /* ============================================ ALL ANIMATIONS — initial states Only apply when JS has marked the page ready ============================================ */ html[data-anim-ready] .anim-fade-up, html[data-anim-ready] .anim-fade-in, html[data-anim-ready] .anim-scale-in, html[data-anim-ready] .anim-slide-left, html[data-anim-ready] .anim-slide-right, html[data-anim-ready] .anim-luxe { opacity: 0; will-change: opacity, transform; } /* fade-up: also offset 30px down */ html[data-anim-ready] .anim-fade-up { transform: translateY(30px); } /* scale-in: slightly shrunk */ html[data-anim-ready] .anim-scale-in { transform: scale(0.95); } /* slide-left: offset 40px to the left */ html[data-anim-ready] .anim-slide-left { transform: translateX(-40px); } /* slide-right: offset 40px to the right */ html[data-anim-ready] .anim-slide-right { transform: translateX(40px); } /* anim-luxe: starts slightly enlarged, scales down to 1 (premium settle) */ html[data-anim-ready] .anim-luxe { transform: scale(1.04); } /* fade-up-children: hide children, not the parent */ html[data-anim-ready] .anim-fade-up-children>* { opacity: 0; transform: translateY(30px); will-change: opacity, transform; } /* count-up: keep visible but reset to 0 (engine animates the text) */ html[data-anim-ready] .anim-count-up { /* No initial transform — number stays in place, just changes value */ } /* ============================================ REDUCED MOTION OVERRIDE When user has prefers-reduced-motion: reduce, force everything visible. This wins over the [data-anim-ready] rules above. ============================================ */ @media (prefers-reduced-motion: reduce) { html[data-anim-ready] .anim-fade-up, html[data-anim-ready] .anim-fade-in, html[data-anim-ready] .anim-scale-in, html[data-anim-ready] .anim-slide-left, html[data-anim-ready] .anim-slide-right, html[data-anim-ready] .anim-luxe, html[data-anim-ready] .anim-fade-up-children>* { opacity: 1; transform: none; } } /* ============================================================ HERO BESPOKE ANIMATION — initial states These activate when bee-hero has [data-anim-ready] attribute, set by hero.js as soon as it runs. If JS fails, [data-anim-ready] is never set and content shows normally (graceful degradation). ============================================================ */ /* Hide all hero animated elements until JS marks ready */ .bee-hero[data-anim-ready] .hero-eyebrow, .bee-hero[data-anim-ready] .hero-sub, .bee-hero[data-anim-ready] .hero-trust, .bee-hero[data-anim-ready] .hero-actions>* { opacity: 0; } /* Eyebrow + subtitle + trust: offset down for fade-up */ .bee-hero[data-anim-ready] .hero-eyebrow, .bee-hero[data-anim-ready] .hero-sub, .bee-hero[data-anim-ready] .hero-trust { transform: translateY(20px); will-change: opacity, transform; } /* Buttons: also offset down */ .bee-hero[data-anim-ready] .hero-actions>* { transform: translateY(20px); will-change: opacity, transform; } /* Title: enable mask + push inner content below the mask */ .bee-hero[data-anim-ready] .hero-title__line { overflow: hidden; } .bee-hero[data-anim-ready] .hero-title__line .line-inner { display: block; transform: translateY(110%); will-change: transform; } /* Underline: collapse to zero width — engine animates it back */ .bee-hero[data-anim-ready] .hero-title__diving { --underline-scale: 0; } /* ============================================================ REDUCED MOTION OVERRIDE FOR HERO ============================================================ */ @media (prefers-reduced-motion: reduce) { .bee-hero[data-anim-ready] .hero-eyebrow, .bee-hero[data-anim-ready] .hero-sub, .bee-hero[data-anim-ready] .hero-trust, .bee-hero[data-anim-ready] .hero-actions>* { opacity: 1; transform: none; } .bee-hero[data-anim-ready] .hero-title__line .line-inner { transform: none; } .bee-hero[data-anim-ready] .hero-title__diving { --underline-scale: 1; } } /* ============================================================ ELEMENTOR EDITOR OVERRIDE When inside the Elementor editor or preview, force all animated elements to be visible. This prevents elements going invisible while the client edits. The animations still work normally on the published front-end. ============================================================ */ /* Elementor edit mode — body gets this class */ body.elementor-editor-active html[data-anim-ready] .anim-fade-up, body.elementor-editor-active html[data-anim-ready] .anim-fade-in, body.elementor-editor-active html[data-anim-ready] .anim-scale-in, body.elementor-editor-active html[data-anim-ready] .anim-slide-left, body.elementor-editor-active html[data-anim-ready] .anim-slide-right, body.elementor-editor-active html[data-anim-ready] .anim-luxe, body.elementor-editor-active html[data-anim-ready] .anim-fade-up-children>* { opacity: 1 !important; transform: none !important; } /* Elementor preview mode */ body.elementor-page html[data-anim-ready] .anim-fade-up, body.elementor-page html[data-anim-ready] .anim-fade-in, body.elementor-page html[data-anim-ready] .anim-scale-in, body.elementor-page html[data-anim-ready] .anim-slide-left, body.elementor-page html[data-anim-ready] .anim-slide-right, body.elementor-page html[data-anim-ready] .anim-luxe, body.elementor-page html[data-anim-ready] .anim-fade-up-children>* { opacity: 1 !important; transform: none !important; } /* Also handle the hero-specific states */ body.elementor-editor-active .bee-hero[data-anim-ready] .hero-eyebrow, body.elementor-editor-active .bee-hero[data-anim-ready] .hero-sub, body.elementor-editor-active .bee-hero[data-anim-ready] .hero-trust, body.elementor-editor-active .bee-hero[data-anim-ready] .hero-actions>* { opacity: 1 !important; transform: none !important; } body.elementor-editor-active .bee-hero[data-anim-ready] .hero-title__line .line-inner { transform: none !important; } body.elementor-editor-active .bee-hero[data-anim-ready] .hero-title__diving { --underline-scale: 1 !important; }