/* ============================================================ MASALA RAAJ — PREMIUM INTERACTION LAYER (Lenis + GSAP + cursor + magnetic) IMPORTANT: never hide content here. Reveal initial states are applied by JS only after GSAP is confirmed loaded, so no-JS / CDN-fail degrades gracefully. ============================================================ */ /* Lenis smooth scroll (only active when .lenis is added to by JS) */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: clip; } /* ── Page-load curtain ───────────────────────────────────── */ #mr-curtain { position: fixed; inset: 0; z-index: 99999; background: linear-gradient(135deg, #5C1F2B, #1A0F0A); display: flex; align-items: center; justify-content: center; transition: opacity .6s ease, visibility .6s ease; } #mr-curtain img { width: 168px; max-width: 52vw; height: auto; opacity: 0; transform: translateY(8px); animation: mr-curtain-logo .7s ease .15s forwards; filter: brightness(1.15); } #mr-curtain.mr-curtain--gone { opacity: 0; visibility: hidden; pointer-events: none; } @keyframes mr-curtain-logo { to { opacity: 1; transform: translateY(0); } } /* Fallback: if JS never removes it, auto-dismiss so content is never blocked */ #mr-curtain { animation: mr-curtain-fail 0s linear 3.5s forwards; } @keyframes mr-curtain-fail { to { opacity: 0; visibility: hidden; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { #mr-curtain { display: none; } } /* Custom cursor removed (hotfix) — native system cursor everywhere. */ /* ── Reveal helpers ── */ .mr-magnetic { will-change: transform; } /* ============================================================ TEXT-OVER-MEDIA LEGIBILITY (belt-and-braces, guarantees AA on real pixels even where a bright part of the image/gradient shows through) ============================================================ */ /* light (cream/white) text on dark imagery → dark soft shadow */ .mrh-hero h1, .mrh-hero__sub, .mrh-hero__kicker, .mrh-hero__badges span, .mrh-cta h2, .mrh-cta p, .mrh-cta .mrh-kicker, .mr-pagehero h1, .mr-pagehero p, .mr-pagehero .kicker, .mr-pagehero .mr-single-breadcrumb, .mrh-tile__name, .mrh-tile__count, .mrh-tile__go, .mrh-banner__t, .mrh-banner__d, .mrh-banner__chip, .mr-facgal-item figcaption strong, .mr-facgal-item figcaption span, .mr-gallery-overlay, .mr-about-hero h1, .mr-about-hero p { text-shadow: 0 1px 2px rgba(26,12,8,.45), 0 2px 14px rgba(26,12,8,.35); } /* strengthen the scrims a touch so text never sits on a bright photo area */ .mrh-banner__sc { background: linear-gradient(90deg, rgba(34,12,18,.92) 0%, rgba(70,24,34,.74) 46%, rgba(92,31,44,.34) 100%) !important; } @media (max-width: 680px) { /* mobile scrims a bit denser; banners stack so cover full width */ .mrh-banner__sc { background: linear-gradient(180deg, rgba(34,12,18,.6) 0%, rgba(34,12,18,.86) 100%) !important; } .mrh-hero__scrim { background: linear-gradient(180deg, rgba(26,15,10,.7) 0%, rgba(26,15,10,.55) 45%, rgba(60,20,30,.72) 100%) !important; } }