/* ═══════════════════════════════════════════════════════════════════════════ scroll-fx.css — class-driven scroll effects (pairs with scroll-fx.js) Add classes to any Elementor element via Advanced → CSS Classes. ═══════════════════════════════════════════════════════════════════════════ */ html { scroll-behavior: auto !important; } /* ── Pre-hide everything that will animate, until JS takes over ─────────── */ /* .sfx-ready is added to by scroll-fx.js. If JS/GSAP fails to load, .sfx-nojs is added instead so content is never left invisible. */ html:not(.sfx-ready):not(.sfx-nojs) :is( .sfx-up, .sfx-down, .sfx-left, .sfx-right, .sfx-fade, .sfx-pop, .sfx-zoom, .sfx-spin, .sfx-words, .sfx-unfold ), html:not(.sfx-ready):not(.sfx-nojs) .sfx-stagger > * { opacity: 0; } /* ── Word-clip wrapper produced by .sfx-words ─────────────────────────────── */ .sfx-word { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.1; } .sfx-word > span { display: inline-block; will-change: transform, opacity; } /* ── Pinned sections ──────────────────────────────────────────────────────── */ /* Wrapper inserted around each .sfx-pin so GSAP's pin-spacer never shows the body background. --sfx-pin-bg is set by JS from the section's own colour. */ .sfx-pin-wrap, .pin-spacer:has(> .sfx-pin-wrap) { position: relative; background: var(--sfx-pin-bg, transparent); } /* .sfx-fill makes a pinned section fill the viewport on desktop */ @media (min-width: 769px) { .sfx-pin.sfx-fill, .sfx-pin-wrap:has(> .sfx-fill), .pin-spacer:has(.sfx-fill) { min-height: 100vh !important; --min-height: 100vh !important; } } /* ── .sfx-bg-pan — pans the section's background image horizontally ─────── */ .sfx-bg-pan::before { transform: translateX(var(--sfx-bg-x, 0%)) scale(1.06); will-change: transform; } /* ── Gold sweep divider (auto-inserted before .sfx-divider sections) ─────── */ .sfx-gold-divider { height: 1px; background: linear-gradient(90deg, transparent, #c8a84b 35%, #f5d680 50%, #c8a84b 65%, transparent); transform-origin: left center; transform: scaleX(0); opacity: 0; pointer-events: none; } /* ── CTA button hover glow ────────────────────────────────────────────────── */ .elementor-button { transition: box-shadow 0.25s ease, transform 0.18s ease !important; } .elementor-button:hover { box-shadow: 0 0 30px rgba(200,168,75,0.5) !important; }