/* ============================================================ EVARA SCROLL-FX CSS (v32) — companion to assets/scroll-fx.js. Loaded AFTER design-tokens.css + motion.css so it is authoritative. Two jobs: 1) Guarantee content is VISIBLE by default (defeats any lingering per-page inline `.reveal{opacity:0.01}` hidden state). scroll-fx.js then hides only below-the-fold elements, via inline style, after init. 2) Once `.fx-ready` is on (libs initialised), turn OFF CSS transitions on GSAP-driven elements so a stylesheet transition never "chases" GSAP's per-frame writes (jank). transform + opacity only. ============================================================ */ /* ── 1. Visible-by-default safety (overrides any inline hidden state) ──────── */ .reveal, .reveal-stagger > *, .fade-in, .slide-up, .scale-in, .reveal-left, .reveal-right { opacity: 1; transform: none; } .line-draw { width: min(200px, 40vw); } /* ── 2. fx-ready: GSAP owns these props; drop CSS transitions on them ──────── */ html.fx-ready .reveal, html.fx-ready .reveal-stagger > *, html.fx-ready .fade-in, html.fx-ready .slide-up, html.fx-ready .scale-in, html.fx-ready .reveal-left, html.fx-ready .reveal-right, html.fx-ready .line-draw { transition: none !important; } /* SplitText line-mask wrapper: clip the rising line; block layout. The mask div GSAP injects inherits overflow:clip already — this is belt-and-braces. */ html.fx-ready .fx-line { display: block; will-change: auto; } /* ── 3. Restrained-luxury desktop hover micro-states (pointer:fine only) ──── Editorial lift + a quiet gold top-edge on the premium cards. No tilt/rotate (too playful for premium matrimony). Touch devices never get stuck :hover. */ @media (hover: hover) and (pointer: fine) { html.fx-ready .pkg, html.fx-ready .pkg2, html.fx-ready .gc, html.fx-ready .wc, html.fx-ready .diff-card, html.fx-ready .tc, html.fx-ready .step, html.fx-ready .tf-item, html.fx-ready .testimonial-card { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1); will-change: auto; } html.fx-ready .pkg:hover, html.fx-ready .pkg2:hover, html.fx-ready .gc:hover, html.fx-ready .wc:hover, html.fx-ready .diff-card:hover, html.fx-ready .tc:hover, html.fx-ready .step:hover, html.fx-ready .tf-item:hover, html.fx-ready .testimonial-card:hover { transform: translateY(-6px); } /* quiet gold top-edge on the premium package cards */ html.fx-ready .pkg:hover, html.fx-ready .pkg2:hover { box-shadow: inset 0 2px 0 0 var(--gold, #C9A96E), 0 18px 50px rgba(61, 26, 92, 0.18); } /* buttons: intentional, quiet lift (refines existing micro-interaction) */ html.fx-ready .bg:hover, html.fx-ready .ba:hover { transform: translateY(-2px); } } /* ── 3b. Soft gold sheen on the headline accent word (.h2 em) ─────────────── Whisper-subtle gilt-lettering shimmer — gold→gold-l→gold, never white, slow. Gated behind .fx-ready AND @supports(background-clip:text): no-JS or unsupported browsers keep the solid-gold word (never transparent text). The global reduced-motion rule collapses the animation to a static gradient. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { html.fx-ready .h2 em { background: linear-gradient(110deg, var(--gold, #C9A96E) 36%, var(--gold-l, #E2C99A) 50%, var(--gold, #C9A96E) 64%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: emSheen 7s ease-in-out infinite; } } @keyframes emSheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } } /* ── 4. Reduced motion: belt-and-braces (scroll-fx.js already stands down) ── */ @media (prefers-reduced-motion: reduce) { html.fx-ready .reveal, html.fx-ready .reveal-stagger > *, html.fx-ready .fade-in, html.fx-ready .slide-up, html.fx-ready .scale-in, html.fx-ready .reveal-left, html.fx-ready .reveal-right, html.fx-ready .line-draw, html.fx-ready .h2 { opacity: 1 !important; transform: none !important; } html.fx-ready .pkg:hover, html.fx-ready .pkg2:hover, html.fx-ready .gc:hover, html.fx-ready .bg:hover, html.fx-ready .ba:hover { transform: none !important; } }