/* ── Reset body during load ── */
        body { margin: 0; background: #080808; }

        /* ═══════════════════════════════════════
           LOADER BASE — 3D perspective container
        ═══════════════════════════════════════ */
        #site-loader {
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: #080808;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            perspective: 1200px;
        }
        #site-loader.l-done { display: none; }
        #site-loader.l-fadeout {
            opacity: 0;
            transition: opacity 1.0s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* ═══════════════════════════════════════
           3D SCENE DEPTH — layered parallax container
        ═══════════════════════════════════════ */
        .loader-scene {
            position: absolute;
            inset: 0;
            transform-style: preserve-3d;
            will-change: transform;
        }

        /* ═══════════════════════════════════════
           CURTAIN PANELS — stay behind sketch, fade on exit
        ═══════════════════════════════════════ */
        .loader-panel {
            position: absolute;
            left: 0;
            width: 100%;
            background: #0a0a0a;
            z-index: 10;
            will-change: transform, opacity;
            transition: opacity 1.2s ease 0.8s;
        }
        .loader-panel-top { top: 0; height: 51%; }
        .loader-panel-bot { bottom: 0; height: 51%; }
        #site-loader.l-reveal .loader-panel-top,
        #site-loader.l-reveal .loader-panel-bot { opacity: 0; }

        /* ═══════════════════════════════════════
           DOOR LEAVES — open outwards on l-reveal
           Left door hinges at left edge, right door at right edge
        ═══════════════════════════════════════ */
        .sk-door-left {
            transform-origin: 348px 488px;
            transition: transform 1.4s cubic-bezier(0.4, 0, 0.0, 1);
        }
        .sk-door-right {
            transform-origin: 452px 488px;
            transition: transform 1.4s cubic-bezier(0.4, 0, 0.0, 1);
        }
        #site-loader.l-reveal .sk-door-left {
            transform: scaleX(0);
        }
        #site-loader.l-reveal .sk-door-right {
            transform: scaleX(0);
        }

        /* ═══════════════════════════════════════
           DOORLIGHT — warm gold light floods through opening doors
        ═══════════════════════════════════════ */
        .loader-doorlight {
            position: absolute;
            top: 62%; left: 50%;
            width: 0; height: 0;
            transform: translate(-50%, -20%);
            border-radius: 50%;
            background: radial-gradient(ellipse at center,
                rgba(245,232,184,0.6) 0%,
                rgba(201,165,90,0.4) 20%,
                rgba(201,165,90,0.2) 40%,
                transparent 70%
            );
            pointer-events: none;
            z-index: 3;
            opacity: 0;
        }
        #site-loader.l-reveal .loader-doorlight {
            animation: doorlightFlood 3.0s cubic-bezier(0.4, 0, 0.0, 1) 0.2s forwards;
        }
        @keyframes doorlightFlood {
            0%   { width: 0; height: 0; opacity: 0; }
            25%  { width: 20vw; height: 25vh; opacity: 0.7; }
            55%  { width: 80vw; height: 80vh; opacity: 0.6; }
            100% { width: 250vw; height: 250vh; opacity: 0; }
        }

        /* ═══════════════════════════════════════
           CENTRE STAGE — 3D zoom-forward exit
        ═══════════════════════════════════════ */
        .loader-center {
            position: relative;
            z-index: 5;
            display: flex;
            flex-direction: column;
            align-items: center;
            transform-style: preserve-3d;
            transition: opacity 0.7s ease, transform 1.0s cubic-bezier(0.4, 0, 0, 1), filter 0.7s ease;
            will-change: opacity, transform, filter;
        }
        #site-loader.l-reveal .loader-center {
            opacity: 0;
            transform: translateY(-20px) scale(1.05);
            filter: blur(6px);
            transition: opacity 0.8s ease, transform 1.0s cubic-bezier(0.4, 0, 0.2, 1), filter 0.8s ease;
        }

        /* ═══════════════════════════════════════
           GOLD HAIRLINES
        ═══════════════════════════════════════ */
        .loader-hairline {
            width: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(201,165,90,0.3) 10%, #C9A55A 30%, #f5e8b8 50%, #C9A55A 70%, rgba(201,165,90,0.3) 90%, transparent 100%);
        }
        .loader-hairline-top { animation: hairlineGrow 0.6s cubic-bezier(0.4,0,0.2,1) 0.15s forwards; margin-bottom: 30px; }
        .loader-hairline-bot { animation: hairlineGrow 0.5s cubic-bezier(0.4,0,0.2,1) 1.58s forwards; margin-top: 26px; }
        @keyframes hairlineGrow { to { width: clamp(240px, 45vw, 380px); } }

        /* ═══════════════════════════════════════
           LOGO MARK + GOLD BEAMS
        ═══════════════════════════════════════ */
        .loader-mark-wrap {
            position: relative;
            margin-bottom: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .loader-beams {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100vw;
            height: 1px;
            pointer-events: none;
            z-index: -1;
        }
        .loader-beam-left, .loader-beam-right {
            position: absolute;
            top: 0;
            height: 1px;
            width: 48%;
            transform: scaleX(0);
            animation: beamShoot 0.9s cubic-bezier(0.22,1,0.36,1) 0.72s forwards;
            will-change: transform;
        }
        .loader-beam-left { right: 50%; transform-origin: right center; background: linear-gradient(to left, rgba(201,165,90,0.75), transparent); }
        .loader-beam-right { left: 50%; transform-origin: left center; background: linear-gradient(to right, rgba(201,165,90,0.75), transparent); }
        @keyframes beamShoot { to { transform: scaleX(1); } }

        /* ═══════════════════════════════════════
           LOGO IMAGE — 3D drop + glow
        ═══════════════════════════════════════ */
        .loader-logo-img {
            height: clamp(48px, 7.5vw, 78px);
            width: auto;
            opacity: 0;
            filter: brightness(1.1);
            transform: perspective(1000px) rotateX(58deg) scale(0.6) translateY(-8px);
            animation: logoReveal 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) 0.40s forwards, logoPulse 2.6s ease-in-out 1.5s infinite alternate;
            will-change: transform, opacity, filter;
        }
        @keyframes logoReveal {
            0%   { opacity: 0; transform: perspective(1000px) rotateX(58deg) scale(0.6) translateY(-8px); filter: drop-shadow(0 0 0 rgba(201,165,90,0)); }
            50%  { opacity: 1; filter: drop-shadow(0 0 50px rgba(201,165,90,1)) drop-shadow(0 0 100px rgba(201,165,90,0.5)); }
            100% { opacity: 1; transform: perspective(1000px) rotateX(0deg) scale(1) translateY(0); filter: drop-shadow(0 0 20px rgba(201,165,90,0.6)) drop-shadow(0 0 60px rgba(201,165,90,0.2)); }
        }
        @keyframes logoPulse {
            0%   { filter: drop-shadow(0 0 12px rgba(201,165,90,0.3)) drop-shadow(0 0 40px rgba(201,165,90,0.1)); }
            100% { filter: drop-shadow(0 0 40px rgba(201,165,90,0.9)) drop-shadow(0 0 80px rgba(201,165,90,0.3)); }
        }

        /* ═══════════════════════════════════════
           TAGLINE + DIVIDER + LOCATION
        ═══════════════════════════════════════ */
        .loader-tagline {
            font-family: 'Montserrat', 'Arial', sans-serif;
            font-size: clamp(0.52rem, 1vw, 0.66rem);
            font-weight: 400;
            letter-spacing: 0.34em;
            text-transform: uppercase;
            color: rgba(201,165,90,0.78);
            margin: 0;
            opacity: 0;
            transform: translateY(8px);
            animation: slideUpFade 0.7s ease 1.15s forwards;
            white-space: nowrap;
        }
        .loader-divider-line { width: 0; height: 1px; background: rgba(201,165,90,0.3); margin: 11px auto; animation: hairlineGrow 0.5s ease 1.30s forwards; }
        .loader-location {
            font-family: 'Montserrat', 'Arial', sans-serif;
            font-size: clamp(0.47rem, 0.9vw, 0.58rem);
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.28);
            margin: 0;
            opacity: 0;
            transform: translateY(6px);
            animation: slideUpFade 0.65s ease 1.44s forwards;
            white-space: nowrap;
        }
        @keyframes slideUpFade { to { opacity: 1; transform: translateY(0); } }

        /* ═══════════════════════════════════════
           SONAR PING RINGS — bigger, more dramatic
        ═══════════════════════════════════════ */
        .loader-pings { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
        .l-ping {
            position: absolute;
            top: 50%; left: 50%;
            width: 72px; height: 72px;
            border: 1px solid rgba(201,165,90,0.7);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            opacity: 0;
            animation: pingExpand 2s cubic-bezier(0, 0, 0.2, 1) forwards;
        }
        .l-ping:nth-child(1) { animation-delay: 3.40s; border-color: rgba(201,165,90,0.7); border-width: 2px; }
        .l-ping:nth-child(2) { animation-delay: 3.55s; border-color: rgba(201,165,90,0.5); }
        .l-ping:nth-child(3) { animation-delay: 3.70s; border-color: rgba(201,165,90,0.3); }
        .l-ping:nth-child(4) { animation-delay: 3.85s; border-color: rgba(201,165,90,0.15); }
        @keyframes pingExpand {
            0%  { opacity: 1; transform: translate(-50%,-50%) scale(0.1); }
            60% { opacity: 0.08; }
            100%{ opacity: 0; transform: translate(-50%,-50%) scale(8); }
        }

        /* ═══════════════════════════════════════
           GOLD PARTICLES
        ═══════════════════════════════════════ */
        .l-particles { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
        .l-particle {
            position: absolute;
            bottom: 50%;
            width: 2px; height: 2px;
            border-radius: 50%;
            background: #C9A55A;
            opacity: 0;
            animation: floatUp var(--dur, 2.2s) ease-out var(--delay, 3.3s) forwards;
        }
        @keyframes floatUp {
            0%   { opacity: 0; transform: translateY(0) scale(0); }
            15%  { opacity: 0.9; transform: translateY(-18px) scale(1); }
            100% { opacity: 0; transform: translateY(-130px) scale(0.3); }
        }

        /* ═══════════════════════════════════════
           GOLD EXPLOSION — radial burst from center
        ═══════════════════════════════════════ */
        .loader-explosion { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
        .l-ember {
            position: absolute;
            top: 50%; left: 50%;
            width: var(--sz, 3px); height: var(--sz, 3px);
            border-radius: 50%;
            background: var(--clr, #C9A55A);
            opacity: 0;
            animation: emberBurst var(--dur, 1.8s) cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 3.4s) forwards;
            --tx: 0px; --ty: 0px;
        }
        @keyframes emberBurst {
            0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
            12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
            35%  { opacity: 0.8; }
            100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.2); }
        }

        /* ═══════════════════════════════════════
           FLYING CHARCOAL EMBERS — dark glowing bits
        ═══════════════════════════════════════ */
        .loader-embers { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
        .l-charcoal {
            position: absolute;
            width: var(--sz, 2px); height: var(--sz, 2px);
            border-radius: 40%;
            background: var(--clr, rgba(80,60,20,0.8));
            box-shadow: 0 0 var(--glow, 4px) var(--glowclr, rgba(201,165,90,0.4));
            opacity: 0;
            animation: charcoalFloat var(--dur, 3s) ease-in-out var(--delay, 0.5s) forwards;
        }
        @keyframes charcoalFloat {
            0%   { opacity: 0; transform: translate(var(--sx, 0px), var(--sy, 0px)) rotate(0deg) scale(0); }
            10%  { opacity: 0.7; transform: translate(var(--sx, 0px), var(--sy, 0px)) rotate(20deg) scale(1); }
            50%  { opacity: 0.5; }
            100% { opacity: 0; transform: translate(var(--ex, 0px), var(--ey, -200px)) rotate(var(--rot, 180deg)) scale(0.3); }
        }

        /* ═══════════════════════════════════════
           CORNER ORNAMENTS — 3D feel
        ═══════════════════════════════════════ */
        .loader-corner { position: absolute; width: 32px; height: 32px; opacity: 0; animation: cornerFade 0.5s ease 0.8s forwards; }
        .loader-corner-tl { top: 24px; left: 24px; border-top: 1px solid rgba(201,165,90,0.5); border-left: 1px solid rgba(201,165,90,0.5); }
        .loader-corner-tr { top: 24px; right: 24px; border-top: 1px solid rgba(201,165,90,0.5); border-right: 1px solid rgba(201,165,90,0.5); }
        .loader-corner-bl { bottom: 24px; left: 24px; border-bottom: 1px solid rgba(201,165,90,0.5); border-left: 1px solid rgba(201,165,90,0.5); }
        .loader-corner-br { bottom: 24px; right: 24px; border-bottom: 1px solid rgba(201,165,90,0.5); border-right: 1px solid rgba(201,165,90,0.5); }
        @keyframes cornerFade { to { opacity: 1; } }
        #site-loader.l-reveal .loader-corner { opacity: 0; transition: opacity 0.3s ease; }

        /* ═══════════════════════════════════════
           LOADING BAR — positioned below centre stage
        ═══════════════════════════════════════ */
        .loader-bar-wrap {
            margin-top: 28px;
            width: clamp(200px, 28vw, 300px);
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 12;
        }
        .loader-bar-label {
            font-family: 'Montserrat', 'Arial', sans-serif;
            font-size: clamp(0.48rem, 0.8vw, 0.55rem);
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: rgba(201,165,90,0.45);
            margin-bottom: 10px;
            opacity: 0;
            animation: slideUpFade 0.5s ease 1.6s forwards;
            white-space: nowrap;
        }
        .loader-bar-track {
            width: 100%;
            height: 1px;
            background: rgba(201,165,90,0.12);
            border-radius: 1px;
            overflow: visible;
            position: relative;
        }
        .loader-bar-fill {
            position: absolute;
            top: 0; left: 0;
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, rgba(201,165,90,0.2), #C9A55A 30%, #f5e8b8 50%, #C9A55A 70%, rgba(201,165,90,0.2));
            border-radius: 1px;
            animation: barFill 4.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
            box-shadow: 0 0 10px 2px rgba(201,165,90,0.35), 0 0 25px 4px rgba(201,165,90,0.12);
        }
        .loader-bar-fill::after {
            content: '';
            position: absolute;
            right: -3px; top: 50%;
            width: 6px; height: 6px;
            border-radius: 50%;
            background: #f5e8b8;
            transform: translateY(-50%);
            box-shadow: 0 0 8px 3px rgba(245,232,184,0.9), 0 0 18px 6px rgba(201,165,90,0.4);
        }
        @keyframes barFill {
            0%   { width: 0; }
            12%  { width: 15%; }
            35%  { width: 42%; }
            60%  { width: 68%; }
            80%  { width: 88%; }
            95%  { width: 97%; }
            100% { width: 100%; }
        }
        /* Fade bar with rest of centre content on reveal */
        #site-loader.l-reveal .loader-bar-wrap {
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        /* ═══════════════════════════════════════
           BUILDING SKETCH — PROMINENT gold on black
        ═══════════════════════════════════════ */
        .loader-sketch-wrap {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -54%);
            transform-origin: 50% 89%;
            width: min(1100px, 98vw);
            pointer-events: none;
            z-index: 2;
            opacity: 0;
            animation: sketchWrapFade 1.2s ease 0.5s forwards;
            filter: drop-shadow(0 0 30px rgba(201,165,90,0.15));
            will-change: transform, opacity;
        }
        @keyframes sketchWrapFade { to { opacity: 1; } }
        .loader-sketch { width: 100%; height: auto; display: block; }

        /* Visible gold strokes — NOT ghostly, PROMINENT */
        .sk-outline *, .sk-bands *,
        .sk-top-floor *, .sk-mid-floor *,
        .sk-shop *, .sk-door *, .sk-details * {
            stroke: rgba(201,165,90,0.28);
            stroke-width: 0.6;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: sketchDraw 1.0s ease-out forwards;
        }
        .sk-outline   * { animation-delay: 0.60s; stroke-width: 1.0; stroke: rgba(201,165,90,0.4); }
        .sk-bands     * { animation-delay: 1.00s; stroke: rgba(201,165,90,0.3); }
        .sk-top-floor * { animation-delay: 1.40s; stroke: rgba(201,165,90,0.28); }
        .sk-mid-floor * { animation-delay: 1.80s; stroke: rgba(201,165,90,0.28); }
        .sk-shop      * { animation-delay: 2.30s; stroke: rgba(201,165,90,0.32); }
        .sk-door      * { animation-delay: 2.80s; stroke: rgba(201,165,90,0.38); }
        .sk-door-left *, .sk-door-right * { animation-delay: 2.80s; stroke: rgba(201,165,90,0.38); }
        .sk-details   * { animation-delay: 3.10s; stroke-width: 0.4; stroke: rgba(201,165,90,0.22); }

        @keyframes sketchDraw { to { stroke-dashoffset: 0; } }

        /* Sketch glow — kept simple for GPU perf */
        .loader-sketch-wrap {
            animation: sketchWrapFade 1.2s ease 0.5s forwards;
        }

        /* ═══════════════════════════════════════
           GOLD WAVE — black bg with sketch revealed
        ═══════════════════════════════════════ */
        /* Gold wave — warm interior light as we pass through doors */
        .loader-gold-wave {
            position: absolute; inset: 0;
            pointer-events: none; z-index: 9;
            opacity: 0;
            background: radial-gradient(ellipse 80% 60% at 50% 55%,
                rgba(245,232,184,0.4) 0%,
                rgba(201,165,90,0.5) 15%,
                rgba(201,165,90,0.3) 30%,
                rgba(10,8,4,0.9) 60%,
                #080808 100%
            );
        }
        #site-loader.l-reveal .loader-gold-wave {
            animation: goldWaveReveal 3.2s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
        }
        @keyframes goldWaveReveal {
            0%   { opacity: 0; }
            25%  { opacity: 0.9; }
            50%  { opacity: 1; }
            75%  { opacity: 0.6; }
            100% { opacity: 0; }
        }

        /* ═══════════════════════════════════════
           3D ORBITAL RINGS
        ═══════════════════════════════════════ */
        .loader-orbit {
            position: absolute; top: 50%; left: 50%;
            border-radius: 50%;
            border: 1px solid rgba(201,165,90,0.1);
            pointer-events: none; z-index: 4;
            will-change: transform;
        }
        .loader-orbit::after { content: ''; position: absolute; border-radius: 50%; background: #C9A55A; }
        .loader-orbit-1 {
            width: clamp(180px, 28vw, 260px); height: clamp(180px, 28vw, 260px);
            transform: translate(-50%, -50%) rotateX(72deg) rotateZ(0deg);
            animation: orbitSpin1 7s linear 0.6s infinite;
        }
        .loader-orbit-1::after { width: 5px; height: 5px; top: -2px; left: 50%; transform: translateX(-50%); box-shadow: 0 0 14px 5px rgba(201,165,90,0.7), 0 0 40px 10px rgba(201,165,90,0.3); }
        @keyframes orbitSpin1 { to { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(360deg); } }
        .loader-orbit-2 {
            width: clamp(240px, 38vw, 340px); height: clamp(240px, 38vw, 340px);
            border-color: rgba(201,165,90,0.06);
            transform: translate(-50%, -50%) rotateX(62deg) rotateY(18deg) rotateZ(0deg);
            animation: orbitSpin2 11s linear 1.0s infinite;
        }
        .loader-orbit-2::after { width: 3px; height: 3px; top: -1px; left: 50%; transform: translateX(-50%); background: #f5e8b8; box-shadow: 0 0 8px 3px rgba(245,232,184,0.6), 0 0 20px 6px rgba(201,165,90,0.2); }
        @keyframes orbitSpin2 { to { transform: translate(-50%, -50%) rotateX(62deg) rotateY(18deg) rotateZ(-360deg); } }
        .loader-orbit-3 {
            width: clamp(130px, 20vw, 180px); height: clamp(130px, 20vw, 180px);
            border-color: rgba(201,165,90,0.07);
            transform: translate(-50%, -50%) rotateX(78deg) rotateY(-10deg) rotateZ(0deg);
            animation: orbitSpin3 5s linear 0.3s infinite;
        }
        .loader-orbit-3::after { width: 2px; height: 2px; top: -1px; left: 50%; transform: translateX(-50%); box-shadow: 0 0 6px 2px rgba(201,165,90,0.5); }
        @keyframes orbitSpin3 { to { transform: translate(-50%, -50%) rotateX(78deg) rotateY(-10deg) rotateZ(360deg); } }
        .loader-orbit-4 {
            width: clamp(300px, 48vw, 420px); height: clamp(300px, 48vw, 420px);
            border-color: rgba(201,165,90,0.04);
            transform: translate(-50%, -50%) rotateX(55deg) rotateY(-25deg) rotateZ(0deg);
            animation: orbitSpin4 15s linear 0.8s infinite;
        }
        .loader-orbit-4::after { width: 2px; height: 2px; top: -1px; left: 50%; transform: translateX(-50%); background: #f5e8b8; box-shadow: 0 0 4px 2px rgba(245,232,184,0.3); }
        @keyframes orbitSpin4 { to { transform: translate(-50%, -50%) rotateX(55deg) rotateY(-25deg) rotateZ(-360deg); } }
        #site-loader.l-reveal .loader-orbit { opacity: 0; transition: opacity 0.3s ease; animation: none; }

        /* ═══════════════════════════════════════
           RADIAL GLOW PULSE — multiple layers for depth
        ═══════════════════════════════════════ */
        .loader-glow {
            position: absolute; top: 50%; left: 50%;
            width: clamp(320px, 55vw, 500px); height: clamp(320px, 55vw, 500px);
            transform: translate(-50%, -50%) scale(0.8);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(201,165,90,0.15) 0%, rgba(201,165,90,0.05) 35%, transparent 65%);
            pointer-events: none; z-index: 1;
            opacity: 0;
            animation: glowPulse 2.4s ease-in-out 0.4s infinite alternate;
            will-change: transform, opacity;
        }
        @keyframes glowPulse {
            0%   { opacity: 0.3; transform: translate(-50%, -50%) scale(0.82); }
            100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.25); }
        }
        #site-loader.l-reveal .loader-glow { opacity: 0; transition: opacity 0.3s ease; animation: none; }

        /* Secondary glow — deeper, wider */
        .loader-glow-deep {
            position: absolute; top: 50%; left: 50%;
            width: clamp(500px, 80vw, 800px); height: clamp(500px, 80vw, 800px);
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(201,165,90,0.06) 0%, rgba(201,165,90,0.02) 40%, transparent 70%);
            pointer-events: none; z-index: 0;
            animation: glowDeepPulse 4s ease-in-out 0.6s infinite alternate;
        }
        @keyframes glowDeepPulse {
            0%   { opacity: 0.4; transform: translate(-50%, -50%) scale(0.9); }
            100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.3); }
        }
        #site-loader.l-reveal .loader-glow-deep { opacity: 0; transition: opacity 0.3s ease; animation: none; }

        /* ═══════════════════════════════════════
           DIAGONAL GOLD LIGHT SWEEP — brighter
        ═══════════════════════════════════════ */
        .loader-lightsweep { position: absolute; inset: 0; pointer-events: none; z-index: 7; overflow: hidden; }
        .loader-lightsweep::before {
            content: '';
            position: absolute; top: -50%; left: -80%; width: 40%; height: 250%;
            background: linear-gradient(105deg, transparent 30%, rgba(201,165,90,0.08) 42%, rgba(245,232,184,0.2) 49%, rgba(245,232,184,0.25) 50%, rgba(245,232,184,0.2) 51%, rgba(201,165,90,0.08) 58%, transparent 70%);
            transform: rotate(20deg);
            animation: lightSweepMove 2.2s cubic-bezier(0.4, 0, 0.2, 1) 2.2s forwards;
        }
        /* Second sweep from opposite side */
        .loader-lightsweep::after {
            content: '';
            position: absolute; top: -50%; right: -80%; width: 30%; height: 250%;
            background: linear-gradient(-105deg, transparent 30%, rgba(201,165,90,0.04) 42%, rgba(245,232,184,0.12) 50%, rgba(201,165,90,0.04) 58%, transparent 70%);
            transform: rotate(-20deg);
            animation: lightSweepMove2 1.8s cubic-bezier(0.4, 0, 0.2, 1) 3.0s forwards;
        }
        @keyframes lightSweepMove {
            0%   { left: -80%; opacity: 0; }
            10%  { opacity: 1; }
            90%  { opacity: 1; }
            100% { left: 140%; opacity: 0; }
        }
        @keyframes lightSweepMove2 {
            0%   { right: -80%; opacity: 0; }
            10%  { opacity: 1; }
            90%  { opacity: 1; }
            100% { right: 140%; opacity: 0; }
        }

        /* ═══════════════════════════════════════
           DEPTH PARTICLE LAYERS
        ═══════════════════════════════════════ */
        .l-particles-far { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
        .l-particles-far .l-particle { bottom: 25%; filter: blur(1px); animation: floatUpSlow var(--dur, 3.5s) ease-out var(--delay, 1.0s) forwards; }
        @keyframes floatUpSlow {
            0%   { opacity: 0; transform: translateY(0) scale(0.3); }
            12%  { opacity: 0.35; transform: translateY(-14px) scale(0.5); }
            100% { opacity: 0; transform: translateY(-250px) scale(0.15); }
        }
        .l-particles-near { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
        .l-particles-near .l-particle { bottom: 55%; width: 4px; height: 4px; animation: floatUpNear var(--dur, 1.6s) ease-out var(--delay, 2.8s) forwards; }
        @keyframes floatUpNear {
            0%   { opacity: 0; transform: translateY(0) scale(0); }
            18%  { opacity: 1; transform: translateY(-6px) scale(1.3); }
            100% { opacity: 0; transform: translateY(-90px) scale(0.4); }
        }

        /* ═══════════════════════════════════════
           SKETCH SHIMMER + 3D EXIT
        ═══════════════════════════════════════ */
        .loader-sketch-wrap::after {
            content: '';
            position: absolute; top: 0; left: -120%; width: 80%; height: 100%;
            background: linear-gradient(108deg, transparent 25%, rgba(245,232,184,0.15) 46%, rgba(245,232,184,0.3) 50%, rgba(245,232,184,0.15) 54%, transparent 75%);
            pointer-events: none;
            animation: shimmerPass 1.6s ease 3.2s forwards;
        }
        @keyframes shimmerPass {
            0%   { left: -120%; opacity: 0; }
            12%  { opacity: 1; }
            88%  { opacity: 1; }
            100% { left: 140%; opacity: 0; }
        }
        /* On reveal: float smoothly INTO the doorway
           Single continuous motion — no stepping or jumping.
           transform-origin 50% 89% keeps doors as focal point.
           Only two properties animated (transform + opacity) for GPU compositing. */
        #site-loader.l-reveal .loader-sketch-wrap {
            animation: buildingApproach 3.6s cubic-bezier(0.4, 0, 0.0, 1) 0.2s forwards;
            filter: none;
        }
        @keyframes buildingApproach {
            0%   { opacity: 1; transform: translate(-50%, -54%) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -54%) scale(28); }
        }

        /* ═══════════════════════════════════════
           INTERIOR VIDEO — plays through open doors (set via Customizer)
        ═══════════════════════════════════════ */
        .loader-interior-video-wrap {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -42%) scale(0.5);
            width: min(800px, 90vw);
            pointer-events: none;
            z-index: 1;
            opacity: 0;
            will-change: transform, opacity;
            overflow: hidden;
            border-radius: 4px;
        }
        .loader-interior-video-wrap video {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
        }
        #site-loader.l-reveal .loader-interior-video-wrap {
            animation: interiorVideoGrow 3.8s cubic-bezier(0.4, 0, 0.0, 1) 0.4s forwards,
                       interiorVideoFade 3.8s ease 0.4s forwards;
        }
        @keyframes interiorVideoGrow {
            0%   { transform: translate(-50%, -42%) scale(0.5); }
            100% { transform: translate(-50%, -50%) scale(1.6); }
        }
        @keyframes interiorVideoFade {
            0%   { opacity: 0; }
            12%  { opacity: 0.5; }
            35%  { opacity: 1; }
            70%  { opacity: 0.85; }
            90%  { opacity: 0.3; }
            100% { opacity: 0; }
        }

        /* ═══════════════════════════════════════
           LOADER ↔ HOMEPAGE CROSSFADE
        ═══════════════════════════════════════ */
        /* Homepage reveals underneath with upward motion */
        body:not(.loader-complete) .site-main {
            opacity: 0;
            transform: translateY(0);
            transition: opacity 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            will-change: opacity;
        }
        body:not(.loader-complete) .site-main.page-revealed {
            opacity: 1;
        }

        /* ═══════════════════════════════════════
           GOLDEN GRAIN TEXTURE
        ═══════════════════════════════════════ */
        .loader-grain {
            position: absolute; inset: 0; pointer-events: none; z-index: 8;
            opacity: 0.04;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size: 150px 150px;
            mix-blend-mode: overlay;
        }

        /* ═══════════════════════════════════════
           VOLUMETRIC LIGHT RAYS — radial god-rays
        ═══════════════════════════════════════ */
        .loader-rays {
            position: absolute; top: 50%; left: 50%;
            width: 200vmax; height: 200vmax;
            transform: translate(-50%, -50%);
            pointer-events: none; z-index: 1;
            opacity: 0;
            animation: raysReveal 2s ease 1.0s forwards;
            background: conic-gradient(
                from 0deg,
                transparent 0deg, rgba(201,165,90,0.03) 8deg, transparent 16deg,
                transparent 30deg, rgba(201,165,90,0.04) 38deg, transparent 46deg,
                transparent 60deg, rgba(201,165,90,0.03) 68deg, transparent 76deg,
                transparent 90deg, rgba(201,165,90,0.05) 98deg, transparent 106deg,
                transparent 120deg, rgba(201,165,90,0.03) 128deg, transparent 136deg,
                transparent 150deg, rgba(201,165,90,0.04) 158deg, transparent 166deg,
                transparent 180deg, rgba(201,165,90,0.03) 188deg, transparent 196deg,
                transparent 210deg, rgba(201,165,90,0.04) 218deg, transparent 226deg,
                transparent 240deg, rgba(201,165,90,0.03) 248deg, transparent 256deg,
                transparent 270deg, rgba(201,165,90,0.05) 278deg, transparent 286deg,
                transparent 300deg, rgba(201,165,90,0.03) 308deg, transparent 316deg,
                transparent 330deg, rgba(201,165,90,0.04) 338deg, transparent 346deg,
                transparent 360deg
            );
            animation: raysReveal 2s ease 1.0s forwards, raysSpin 30s linear 1.0s infinite;
        }
        @keyframes raysReveal { 0% { opacity: 0; } 100% { opacity: 1; } }
        @keyframes raysSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
        #site-loader.l-reveal .loader-rays { opacity: 0; transition: opacity 0.3s ease; animation: none; }

        /* ─── Accessibility ─── */
        #site-loader[aria-hidden="true"] { pointer-events: none; }

/* ══════════════════════════════════════════════════════════════
   NEXT BUILD — DE-JANK OVERRIDES (perf)
   Keep the door fly-through choreography; disable the layers that
   caused lag: the 51-element particle/ember swarm, the mix-blend
   film grain, the light rays, and the logo's INFINITE drop-shadow
   pulse (continuous full-repaint).
   ══════════════════════════════════════════════════════════════ */
.l-particles, .l-particles-far, .l-particles-near,
.loader-embers, .loader-explosion, .loader-pings, .loader-ping,
.loader-grain, .loader-rays, .loader-ray,
.l-particle, .l-ember, .l-charcoal, .l-ping { display: none !important; }

/* Logo: keep the entrance reveal, drop the infinite logoPulse (it animated
   filter: drop-shadow every frame). A static soft glow stays via the CSS gradient. */
.loader-logo-img {
  animation: logoReveal 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) 0.40s forwards !important;
}

/* Door-light flood: animate via transform:scale (GPU) instead of width/height (paint every frame). */
.loader-doorlight {
  width: 42vmax !important;
  height: 42vmax !important;
  transform: translate(-50%, -20%) scale(0) !important;
}
#site-loader.l-reveal .loader-doorlight {
  animation: doorlightFloodT 3.0s cubic-bezier(0.4, 0, 0.0, 1) 0.2s forwards !important;
}
@keyframes doorlightFloodT {
  0%   { transform: translate(-50%, -20%) scale(0);   opacity: 0; }
  25%  { transform: translate(-50%, -20%) scale(1.1); opacity: 0.7; }
  55%  { transform: translate(-50%, -20%) scale(3);   opacity: 0.6; }
  100% { transform: translate(-50%, -20%) scale(7);   opacity: 0; }
}