* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        ::selection {
            background: transparent;
            color: inherit;
        }

        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #000;
            font-family: system-ui, -apple-system, sans-serif;
            cursor: pointer;
        }

        /* 3D Stage & Camera Frame */
        #parallax-stage {
            position: relative;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            perspective: 900px;
        }

        #parallax-container {
            position: absolute;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            will-change: transform;
        }

        .layer {
            position: absolute;
            pointer-events: none;
            will-change: transform;
        }

        /* Fullscreen layers */
        .layer-full {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 1. Sharp Geometric Studio Wall Background Plane */
        #layer-bg {
            object-fit: cover;
            z-index: 1;
            transform-origin: center center;
            will-change: transform, filter;
            transform: translateZ(0px) scale(1.35);
            filter: brightness(0.95) contrast(1.1);
            -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 75%, rgba(0,0,0,0.5) 100%);
            mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 75%, rgba(0,0,0,0.5) 100%);
        }

        /* Background Smoke Fume Canvas Layer */
        #smoke-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
            mix-blend-mode: screen;
            opacity: 0.85;
        }

        /* Soft Amber Ceiling Spotlight Glow with Flicker Animation */
        @keyframes ceilingFlicker {
            0% { opacity: 0.45; filter: blur(25px); }
            5% { opacity: 0.20; filter: blur(27px); }
            10% { opacity: 0.48; filter: blur(24px); }
            15% { opacity: 0.12; filter: blur(30px); }
            20% { opacity: 0.45; filter: blur(25px); }
            40% { opacity: 0.42; filter: blur(26px); }
            43% { opacity: 0.52; filter: blur(23px); }
            45% { opacity: 0.18; filter: blur(28px); }
            48% { opacity: 0.45; filter: blur(25px); }
            70% { opacity: 0.40; filter: blur(26px); }
            72% { opacity: 0.25; filter: blur(29px); }
            75% { opacity: 0.46; filter: blur(24px); }
            90% { opacity: 0.44; filter: blur(25px); }
            92% { opacity: 0.15; filter: blur(31px); }
            95% { opacity: 0.48; filter: blur(23px); }
            100% { opacity: 0.45; filter: blur(25px); }
        }

        #glow-ceiling {
            position: absolute;
            top: -15%;
            left: 50%;
            width: 84vw;
            height: 47.25vh;
            transform: translateX(-50%);
            border-radius: 50%;
            z-index: 3;
            pointer-events: none;
            mix-blend-mode: screen;
            opacity: 0.45;
            background: radial-gradient(
                ellipse at center, 
                rgba(255, 175, 90, 0.45) 0%, 
                rgba(230, 140, 50, 0.18) 40%, 
                rgba(180, 90, 20, 0.05) 70%, 
                transparent 85%
            );
            filter: blur(25px);
            will-change: transform, opacity, filter;
            animation: ceilingFlicker 4.5s infinite steps(1, end);
        }

        /* Dynamic Wall Shadow/Glow Overlay */
        .wall-lighting {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 3;
            pointer-events: none;
            background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.25) 100%);
            mix-blend-mode: overlay;
            will-change: transform;
        }

        /* Hero Ground Contact Shadow */
        .floor-shadow {
            position: absolute;
            bottom: 4%;
            left: 50%;
            width: 630px;
            height: 105px;
            transform: translateX(-50%);
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.98) 0%, transparent 70%);
            z-index: 3;
            pointer-events: none;
            filter: blur(14px);
            will-change: transform, filter, opacity;
        }

        /* Softbox Ground Shadows */
        .floor-contact-shadow {
            position: absolute;
            bottom: 3%;
            height: 63px;
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 80%);
            z-index: 3;
            pointer-events: none;
            filter: blur(15px);
            will-change: transform;
        }

        #shadow-left {
            left: 14vw;
            width: 367.5px;
        }

        #shadow-right {
            right: 14vw;
            width: 367.5px;
        }

        /* MIDGROUND SOFTBOXES */
        #layer-mid-left {
            position: absolute;
            z-index: 5;
            top: 25%;
            left: 4vw;
            width: 42vw;
            max-width: 600px;
            height: auto;
            pointer-events: none;
            -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%),
                                linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%),
                        linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
            -webkit-mask-composite: source-in;
            mask-composite: intersect;
            filter: drop-shadow(-20px 30px 30px rgba(0, 0, 0, 0.95)) 
                    drop-shadow(0 0 40px rgba(255, 215, 160, 0.35));
        }

        #layer-mid-right {
            position: absolute;
            z-index: 5;
            top: 19%;
            left: 60vw;
            right: auto;
            width: 47.124vw;
            max-width: 665.28px;
            height: auto;
            transform: none;
            pointer-events: none;
            will-change: transform;
            -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%),
                                linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%),
                        linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
            -webkit-mask-composite: source-in;
            mask-composite: intersect;
            filter: drop-shadow(20px 30px 30px rgba(0, 0, 0, 0.95)) 
                    drop-shadow(0 0 25px rgba(255, 215, 160, 0.2));
        }

        /* Add this CSS rule to your parallax stylesheet */
#layer-far-right {
    position: absolute;
    z-index: 5;
    top: 4%;
    left: 47vw; /* Moved slightly inward from 72vw so it's guaranteed to be inside the visible viewport */
    right: auto;
    width: 108vw;
    max-width: 939px;
    height: auto;
    pointer-events: none;
    will-change: transform;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%),
                        linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%),
                linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    filter: drop-shadow(25px 35px 35px rgba(0, 0, 0, 0.95)) 
            drop-shadow(0 0 30px rgba(255, 215, 160, 0.25));
}
        /* HERO FOREGROUND LAYER */
        #layer-fg {
            z-index: 6;
            object-position: center;
            transform-origin: center bottom;
            will-change: transform, filter;
        }

        /* Interactive Lens Glint Tracked Element */
        .lens-glint {
            position: absolute;
            top: 48%;
            left: 58%;
            width: 42px;
            height: 42px;
            background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,230,190,0.6) 40%, transparent 75%);
            border-radius: 50%;
            z-index: 7;
            pointer-events: none;
            opacity: 0.35;
            mix-blend-mode: screen;
            box-shadow: 0 0 26.25px rgba(255, 215, 160, 0.7);
            will-change: transform, opacity;
            transition: opacity 0.2s ease;
        }

        /* Volumetric Light Sweep */
        .light-sweep {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 8;
            background: radial-gradient(circle at 50% 50%, rgba(255, 235, 200, 0.2) 0%, transparent 60%);
            mix-blend-mode: overlay;
            will-change: transform;
        }

        /* Foreground Camera Dust Canvas */
        #dust-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9;
            pointer-events: none;
            mix-blend-mode: screen;
        }

        /* Super-Close Extreme Foreground Dust Canvas (Out-of-focus bokeh layer) */
        #fg-dust-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            pointer-events: none;
            mix-blend-mode: screen;
        }

        /* Framing Vignette & Darkening */
        .vignette {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 11;
            background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.65) 100%),
                        linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 20%);
        }

        /* Camera Flash Overlay */
        #strobe-flash {
            position: absolute;
            inset: 0;
            background: #fff;
            opacity: 0;
            pointer-events: none;
            z-index: 999; /* Ensure it sits on top of all visual layers when triggered */
        }

        .click-hint {
            position: absolute;
            bottom: 25px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.6);
            font-size: 12.6px;
            letter-spacing: 2.1px;
            text-transform: uppercase;
            z-index: 13;
            pointer-events: none;
            user-select: none;
            background: rgba(0,0,0,0.5);
            padding: 6.3px 14.7px;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.15);
        }
        #dust-canvas, 
#fg-dust-canvas, 
#smoke-canvas, 
.vignette, 
.hero-depth-vignette {
    pointer-events: none;
}