/* ───────────────────────────────────────────────────────────────────────── LA Sol – Page Animations v1.4 ───────────────────────────────────────────────────────────────────────── */ /* ── 0. Prevent horizontal page scroll ──────────────────────────────────── */ /* Some Elementor boxed containers at desktop computed widths extend a few pixels past 100vw. Clip on only (NOT ) so vertical document scrolling stays intact. `clip` preserves position:sticky descendants; `hidden` is the fallback for older Safari (<16). */ body { overflow-x: hidden; overflow-x: clip; } /* ── 1. Sun burst — clean, two elements only ────────────────────────────── */ .ls-sun-burst { position: fixed; inset: 0; z-index: 99998; pointer-events: none; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* Radial glow — the sun core expanding */ .ls-sun-core { position: absolute; width: 100vmax; height: 70vmax; border-radius: 50%; background: radial-gradient( ellipse at center, rgba(148, 223, 255, 0.18) 0%, rgba(148, 223, 255, 0.06) 35%, transparent 70% ); transform: scale(0); opacity: 0; animation: ls-core 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards; } /* Ray lines rotating out */ .ls-sun-rays { position: absolute; width: 160vmax; height: 160vmax; opacity: 0; transform: scale(0.2) rotate(0deg); animation: ls-rays 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards; background: conic-gradient( from 0deg, transparent 0deg, rgba(148,223,255,0.05) 2deg, transparent 7deg, transparent 20deg, rgba(148,223,255,0.04) 22deg, transparent 27deg, transparent 40deg, rgba(148,223,255,0.05) 42deg, transparent 47deg, transparent 60deg, rgba(148,223,255,0.04) 62deg, transparent 67deg, transparent 80deg, rgba(148,223,255,0.05) 82deg, transparent 87deg, transparent 100deg, rgba(148,223,255,0.04) 102deg, transparent 107deg, transparent 120deg, rgba(148,223,255,0.05) 122deg, transparent 127deg, transparent 140deg, rgba(148,223,255,0.04) 142deg, transparent 147deg, transparent 160deg, rgba(148,223,255,0.05) 162deg, transparent 167deg, transparent 180deg, rgba(148,223,255,0.04) 182deg, transparent 187deg, transparent 200deg, rgba(148,223,255,0.05) 202deg, transparent 207deg, transparent 220deg, rgba(148,223,255,0.04) 222deg, transparent 227deg, transparent 240deg, rgba(148,223,255,0.05) 242deg, transparent 247deg, transparent 260deg, rgba(148,223,255,0.04) 262deg, transparent 267deg, transparent 280deg, rgba(148,223,255,0.05) 282deg, transparent 287deg, transparent 300deg, rgba(148,223,255,0.04) 302deg, transparent 307deg, transparent 320deg, rgba(148,223,255,0.05) 322deg, transparent 327deg, transparent 340deg, rgba(148,223,255,0.04) 342deg, transparent 347deg, transparent 360deg ); } @keyframes ls-core { 0% { transform: scale(0); opacity: 0; } 10% { opacity: 1; } 60% { opacity: 0.8; } 100% { transform: scale(2.4); opacity: 0; } } @keyframes ls-rays { 0% { transform: scale(0.2) rotate(0deg); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: scale(1.2) rotate(16deg); opacity: 0; } } /* ── 2. Scroll-reveal — never inside Elementor editor ───────────────────── */ body:not(.elementor-editor-active) .ls-reveal, body:not(.elementor-editor-active) .ls-reveal-left, body:not(.elementor-editor-active) .ls-reveal-right, body:not(.elementor-editor-active) .ls-reveal-scale { opacity: 0; will-change: opacity, transform; transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94); } body:not(.elementor-editor-active) .ls-reveal { transform: translateY(48px); } body:not(.elementor-editor-active) .ls-reveal-left { transform: translateX(-56px); } body:not(.elementor-editor-active) .ls-reveal-right { transform: translateX(56px); } body:not(.elementor-editor-active) .ls-reveal-scale { transform: scale(0.94); } body:not(.elementor-editor-active) .ls-reveal.is-revealed, body:not(.elementor-editor-active) .ls-reveal-left.is-revealed, body:not(.elementor-editor-active) .ls-reveal-right.is-revealed, body:not(.elementor-editor-active) .ls-reveal-scale.is-revealed { opacity: 1; transform: none; } /* ── 3. Stagger ─────────────────────────────────────────────────────────── */ body:not(.elementor-editor-active) .ls-stagger > .e-con, body:not(.elementor-editor-active) .ls-stagger > .elementor-widget { opacity: 0; transform: translateY(32px); transition: opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-delay: calc(var(--ls-i, 0) * 0.12s); } body:not(.elementor-editor-active) .ls-stagger.is-revealed > .e-con, body:not(.elementor-editor-active) .ls-stagger.is-revealed > .elementor-widget { opacity: 1; transform: none; } /* ── 4. Mobile — simplified animations, no sun, no horizontal overflow ───── */ @media (max-width: 767px) { /* Skip sun burst entirely on mobile — avoids covering hero content */ .ls-sun-burst { display: none !important; } /* Replace left/right slide-in with simple fade-up to prevent horizontal scroll */ body:not(.elementor-editor-active) .ls-reveal-left:not(.is-revealed), body:not(.elementor-editor-active) .ls-reveal-right:not(.is-revealed) { transform: translateY(32px) !important; } } /* ── 5. Reduced motion ──────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .ls-sun-burst { display: none !important; } body:not(.elementor-editor-active) .ls-reveal, body:not(.elementor-editor-active) .ls-reveal-left, body:not(.elementor-editor-active) .ls-reveal-right, body:not(.elementor-editor-active) .ls-reveal-scale, body:not(.elementor-editor-active) .ls-stagger > .e-con, body:not(.elementor-editor-active) .ls-stagger > .elementor-widget { opacity: 1 !important; transform: none !important; transition: none !important; } }