/* --- RESET & CORE --- */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            background-color: #010103;
            color: #FFFFFF;
            font-family: 'Montserrat', sans-serif;
            overflow: hidden; /* CRITICAL: We are handling scroll manually */
            height: 100svh;
            width: 100vw;
            user-select: none; /* Prevent text selection while dragging */
        }

        /* --- WEBGL LAYER --- */
        #canvas-container {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1;
        }
        /* Media query for mobile. Bring the canvas in the center of the screen */
        @media (max-width: 600px) {
            #canvas-container {
                width: 100%; /* Increase width for better coverage on mobile */
                height: 100%; /* Increase height for better coverage on mobile */
                top: 50%; left: 50%;
                transform: translate(-50%, -85%) scale(2); /* Center and scale up */
            }
        }

        /* --- TYPOGRAPHY --- */
        .script-font { font-family: 'Cormorant Garamond', serif; font-weight: 400; }
        .sans-font { font-family: 'Montserrat', sans-serif; font-weight: 300; text-transform: uppercase; letter-spacing: 0.2em; }
        
        .text-glow {
            text-shadow: 0 0 20px rgba(255,255,255,0.3), 0 0 50px rgba(100, 200, 255, 0.1);
        }

        /* --- VIRTUAL SLIDES --- */
        /* All slides are fixed in center, we move them with JS transforms */
        .slide {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            opacity: 0; /* Hidden by default */
            pointer-events: none; /* Let scroll events pass through */
            will-change: transform, opacity, filter;
        }

        /* --- CONTENT STYLING --- */
        h1 { font-size: clamp(2.5rem, 6vw, 5rem); font-style: italic; }
        
        .names-group { display: flex; flex-direction: column; gap: 0.5rem; }
        .name { font-size: clamp(3rem, 9vw, 7rem); line-height: 1; }
        .amp { font-size: 2rem; opacity: 0.7; margin: 0.5rem 0; }
        
        .date-main { font-size: clamp(3.5rem, 7vw, 6rem); border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 1rem; margin-bottom: 1rem; }
        .date-sub { font-size: 1rem; display: flex; gap: 1.5rem; justify-content: center; opacity: 0.9; }

        .venue-name { font-size: clamp(2rem, 5vw, 4rem); margin-bottom: 1rem; }
        .venue-addr { font-size: 1rem; opacity: 0.8; line-height: 1.8; }

        /* Scroll Hint */
        .ui-hint {
            position: fixed;
            bottom: 30px; left: 50%; transform: translateX(-50%);
            font-size: 0.7rem; letter-spacing: 0.3em; opacity: 0.5;
            z-index: 10;
        }