/* --- RESET & CORE --- */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            background-color: #010103;
            color: #ffffff;
            font-family: 'Montserrat', sans-serif;
            overflow: hidden; 
            height: 100vh;
            touch-action: none;
        }
        
        #webgl-container {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1;
        }

        /* --- TYPOGRAPHY --- */
        .serif-deco { font-family: 'Cinzel Decorative', serif; }
        .sans { font-family: 'Montserrat', sans-serif; letter-spacing: 0.3em; text-transform: uppercase; }

        .gold-foil {
            background: linear-gradient(to bottom, #bf953f 0%, #fcf6ba 50%, #b38728 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 15px rgba(252, 246, 186, 0.3));
        }

        /* --- LAYOUT --- */
        .viewport {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        .section {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 2rem;
            opacity: 0;
            pointer-events: none;
            will-change: transform, opacity;
        }

        /* Section 1: Intro */
        .intro-main { font-size: clamp(2.5rem, 7vw, 5rem); margin-top: 10px; font-weight: 700; }

        /* Section 2: Journey */
        .journey-text { font-size: clamp(1.5rem, 4vw, 2.5rem); max-width: 850px; line-height: 1.6; font-weight: 300; }

        /* Section 3: Final Reveal */
        .reveal-pre { font-size: 0.8rem; margin-bottom: 10px; opacity: 0.8; }
        .reveal-main { 
            font-size: clamp(4rem, 14vw, 9rem); 
            line-height: 0.9; 
            margin: 15px 0; 
            font-weight: 900;
        }
        .reveal-details { 
            font-size: 1rem; 
            display: flex; 
            gap: 1.5rem; 
            color: #fcf6ba; 
            font-weight: 600;
            margin-top: 10px;
        }
        .rsvp-btn {
            margin-top: 4rem;
            font-size: 0.75rem;
            font-weight: 600;
            transition: transform 0.3s ease;
            text-decoration: underline;
            text-underline-offset: 8px;
        }
        .rsvp-btn:hover { transform: scale(1.1); }

        /* --- UI ELEMENTS --- */
        .hint {
            position: fixed;
            bottom: 40px; left: 50%; transform: translateX(-50%);
            font-size: 0.6rem; color: #b38728; opacity: 0.6;
            z-index: 20; letter-spacing: 0.6em;
        }

        .vignette {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at center, transparent 0%, #010103 100%);
            z-index: 1; pointer-events: none;
        }