/* ============================================================ KINGDOM — luxe-plus : additive motion layer Adds: scroll progress bar · hero staged entrance · hero eyebrow gold sheen · price count-up smoothing · magnetic CTA · ambient floating gold bokeh in emerald sections. Same performance contract as luxe.css: • animates ONLY transform / opacity / background-position • every hidden/animated state gated behind html.luxe (added by the inline snippet ONLY when JS runs AND reduced-motion is off) • hero entrance is pure-CSS with animation-fill `both` → never leaves content stuck hidden even if scripts fail • no libraries, no new network assets ============================================================ */ /* ---------- 1 · Scroll progress bar ---------- */ .luxe-progress{ position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60; pointer-events: none; background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft)); box-shadow: 0 0 10px rgba(200, 161, 90, .45); } /* ---------- 2 · Hero staged entrance (pure CSS, fail-safe) ---------- */ @media (prefers-reduced-motion: no-preference){ html.luxe .hero-copy > .eyebrow, html.luxe .hero-copy > h1, html.luxe .hero-copy > .sub, html.luxe .hero-copy > .hero-card{ animation: lpRise .95s cubic-bezier(.16, 1, .3, 1) both; } html.luxe .hero-copy > h1 { animation-delay: .10s; } html.luxe .hero-copy > .sub { animation-delay: .22s; } html.luxe .hero-copy > .hero-card{ animation-delay: .34s; } } @keyframes lpRise{ from{ opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* ---------- 3 · Hero eyebrow — continuous gentle gold sheen ---------- */ @media (prefers-reduced-motion: no-preference){ html.luxe .hero .eyebrow{ background: linear-gradient(100deg, var(--gold-deep) 36%, #f0d9a6 50%, var(--gold-deep) 64%); background-size: 230% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: lpSheen 6.5s linear infinite; } } @keyframes lpSheen{ to{ background-position: -230% 0; } } /* ---------- 4 · Magnetic CTA smoothing ---------- */ .luxe-mag{ transition: transform .4s cubic-bezier(.16, 1, .3, 1); will-change: transform; } /* ---------- 5 · Ambient floating gold bokeh (emerald sections) ---------- */ .luxe-bokeh-host{ position: relative; overflow: hidden; } .luxe-bokeh-host > .wrap{ position: relative; z-index: 1; } .luxe-bokeh{ position: absolute; inset: 0; z-index: 0; pointer-events: none; } .luxe-bokeh i{ position: absolute; bottom: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(227, 200, 146, .85), rgba(227, 200, 146, 0) 70%); filter: blur(.5px); animation: lpFloat linear infinite; } @keyframes lpFloat{ 0% { transform: translateY(24px); opacity: 0; } 18% { opacity: .85; } 82% { opacity: .85; } 100%{ transform: translateY(-240px); opacity: 0; } } /* ---------- 6 · Soft lift — calm hover for product imagery (replaces glint) ---------- */ html.luxe .col-card image-slot, html.luxe .ex-card image-slot, html.luxe .gem-card image-slot{ position: relative; transition: transform .8s cubic-bezier(.22, .61, .36, 1), filter .5s ease; } /* a soft studio light from above — no sweep, just a gentle gleam on hover */ html.luxe .col-card image-slot::after, html.luxe .ex-card image-slot::after, html.luxe .gem-card image-slot::after{ content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 46%); opacity: 0; transition: opacity .5s ease; } html.luxe .col-card:hover image-slot, html.luxe .ex-card:hover image-slot, html.luxe .gem-card:hover image-slot{ filter: brightness(1.045); } html.luxe .col-card:hover image-slot::after, html.luxe .ex-card:hover image-slot::after, html.luxe .gem-card:hover image-slot::after{ opacity: 1; } /* warm, premium shadow as the card lifts (light-ground cards) */ html.luxe .col-card, html.luxe .ex-card{ transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease; } html.luxe .col-card:hover, html.luxe .ex-card:hover{ box-shadow: 0 20px 44px -24px rgba(200, 161, 90, .5); } /* ---------- 8 · Editorial word-by-word headline reveal (#3) ---------- */ html.luxe .section-head .lp-word{ display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; } html.luxe .section-head .lp-word i{ display: inline-block; font-style: normal; transform: translateY(118%); } @media (prefers-reduced-motion: no-preference){ html.luxe .section-head.is-in .lp-word i{ transform: none; transition: transform .82s cubic-bezier(.16, 1, .3, 1); } html.luxe .section-head.is-in .lp-word:nth-child(1) i{ transition-delay: .02s; } html.luxe .section-head.is-in .lp-word:nth-child(2) i{ transition-delay: .08s; } html.luxe .section-head.is-in .lp-word:nth-child(3) i{ transition-delay: .14s; } html.luxe .section-head.is-in .lp-word:nth-child(4) i{ transition-delay: .20s; } html.luxe .section-head.is-in .lp-word:nth-child(5) i{ transition-delay: .26s; } html.luxe .section-head.is-in .lp-word:nth-child(6) i{ transition-delay: .32s; } html.luxe .section-head.is-in .lp-word:nth-child(7) i{ transition-delay: .38s; } html.luxe .section-head.is-in .lp-word:nth-child(8) i{ transition-delay: .44s; } html.luxe .section-head.is-in .lp-word:nth-child(n+9) i{ transition-delay: .50s; } } /* bulletproof: once JS marks a headline revealed, words are visible no matter what (covers frozen/inactive compositors and reduced-motion edge cases) */ html.luxe .section-head h2.lp-revealed .lp-word i{ transform: none !important; transition: none !important; } /* ---------- Reduced motion — belt & braces ---------- */ @media (prefers-reduced-motion: reduce){ .luxe-bokeh, .luxe-progress{ display: none; } .luxe-mag{ transition: none; } }