body {
            margin: 0;
            padding: 0;
            /* Large scroll runway for infinite smooth scrolling */
            /* Original value, intentionally disabled:
               height: 20000px;
            */
            min-height: 100dvh;  
            background-color: #f8f4ec;
            font-family: 'Montserrat', sans-serif;
            overflow: hidden;
        }

        /* Original body overflow-x declaration, intentionally disabled:
           overflow-x: hidden;
        */
        #viewport-container {
            touch-action: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            z-index: 10;
        }

         
        /* Soft Watercolor Backdrops */
        .watercolor-blob {
            position: absolute;
            filter: blur(80px);
            opacity: 0.6;
            border-radius: 50%;
            pointer-events: none;
            z-index: 1;
        }
        .blob-green { background: #d4e3d5; width: 500px; height: 500px; top: 10%; left: -100px; }
        .blob-pink { background: #f7dadd; width: 600px; height: 600px; top: -150px; right: 10%; }
        .blob-peach { background: #f5e4cc; width: 450px; height: 450px; bottom: 10%; left: 20%; opacity: 0.4;}

        

        /* Isolated compositing layer so the blurred blobs can never visually
           bleed into (or get combined with) the sharper UI layers above them. */
        #blob-layer {
            position: absolute;
            inset: 0;
            isolation: isolate;
            z-index: 1;
        }

        .flower-wrapper {
            position: absolute;
            z-index: 15;
            width: 180px;
            height: 180px;
            pointer-events: none;
            transform-origin: center center;
            will-change: transform;
        }
        .flower-tl { top: -40px; left: -40px; }
        .flower-bl { bottom: -40px; left: -40px; }
        .flower-br { bottom: -20px; right: 30%; width: 140px; height: 140px; }

        .flower-f1 { top: 10%; right: 20%; width: 100px; height: 100px; opacity: 0.8; }
        .flower-f2 { top: 40%; left: 15%; width: 150px; height: 150px; opacity: 0.6; }
        .flower-f3 { bottom: 20%; left: 30%; width: 80px; height: 80px; opacity: 0.9; }
        .flower-f4 { top: 25%; left: 40%; width: 120px; height: 120px; opacity: 0.7; }
        .flower-f5 { top: 5%; left: 60%; width: 90px; height: 90px; opacity: 0.8; }
        .flower-f6 { bottom: 35%; right: 10%; width: 110px; height: 110px; opacity: 0.5; }
        .flower-f7 { top: 60%; left: -20px; width: 160px; height: 160px; opacity: 0.7; }
        .flower-f8 { top: -20px; right: 40%; width: 130px; height: 130px; opacity: 0.6; }
        .flower-f9 { bottom: 10%; right: 50%; width: 100px; height: 100px; opacity: 0.8; }
        .flower-f10 { top: 50%; right: 30%; width: 140px; height: 140px; opacity: 0.5; }

        .text-container {
            position: absolute;
            top: 8%;
            left: 6%;
            width: 380px;
            height: 380px;
            z-index: 20;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            



            /* Its own compositing layer: keeps the animated blur on the ring
               (below) from ever being combined with the backdrop-filter on
               .subheadline, which is what caused the whole screen to look
               blurred on mobile browsers. */
            isolation: isolate;
        }

        .circular-text-svg {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            /* Original property from the blur-based version, disabled:
               will-change: filter;
            */
            will-change: transform, opacity;
            transform-origin: center center;
        }

        .headline-text {
            font-family: 'Montserrat', sans-serif;
            font-weight: 900;
            font-style: italic;
            font-size: 24px;
            fill: #000;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .subheadline {
            position: relative;
            z-index: 2;
            text-align: center;
            font-size: 0.85rem;
            font-weight: 900;
            font-style: italic;
            color: #111;
            letter-spacing: 1px;
            line-height: 1.3;
            max-width: 240px;
            background: rgba(255, 255, 255, 0.4);
            padding: 12px 18px;
            border-radius: 16px;
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        }

        #wheel-wrapper {
            position: absolute;
            bottom: -280px;
            right: -280px;
            width: 850px;
            height: 850px;
            z-index: 25;
            will-change: transform;
            border-radius: 50%;
        }

        .social-icon {
            position: absolute;
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(25px) saturate(200%);
            -webkit-backdrop-filter: blur(25px) saturate(200%);
            border: 1px solid rgba(255, 255, 255, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            text-decoration: none;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
            transform-origin: center center;
            /* Original property from the blur-based version, disabled:
               will-change: transform, filter;
            */
            will-change: transform, opacity;
            transition: background 0.3s ease, border 0.3s ease;
            cursor: pointer;
            pointer-events: auto;
        }

        .social-icon:hover {
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.9);
            z-index: 100;
        }

         
        /* Brand Colors */
        .reddit-icon { color: #ff5722; }
        .youtube-icon { color: #ff3b3b; }
        .x-icon { color: #000000; }
        .tiktok-icon { color: #000000; text-shadow: 2px 2px 0px #00f2fe, -2px -2px 0px #fe0979;}
        .discord-icon { color: #7289da; }
        .instagram-icon { 
            background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .facebook-icon { color: #3b5998; }
        .spotify-icon { color: #1db954; }
        .soundcloud-icon { color: #ff5500; }

        


        /* Music player — same frosted-glass treatment as the social icons.
           Fixed to the viewport (not inside #viewport-container) so it sits
           on top of everything and stays put while the page "scrolls". */
        #music-player {
            position: fixed;
            top: 24px;
            right: 24px;
            z-index: 999;
            display: flex;
            align-items: center;
            gap: 10px;
            max-width: 220px;
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(25px) saturate(200%);
            -webkit-backdrop-filter: blur(25px) saturate(200%);
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 999px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
            padding: 8px 14px 8px 8px;
        }
        #play-toggle {
            flex-shrink: 0;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: none;
            background: rgba(255, 255, 255, 0.6);
            color: #111;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        #play-toggle:hover { background: rgba(255, 255, 255, 0.85); }
        .player-info {
            min-width: 0;
            line-height: 1.2;
        }
        .track-title {
            font-size: 0.7rem;
            font-weight: 900;
            font-style: italic;
            color: #111;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .track-artist {
            font-size: 0.6rem;
            font-weight: 700;
            color: #555;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        @media (max-width: 768px) {
            .watercolor-blob { filter: blur(45px); }
            .blob-green { width: 320px; height: 320px; }
            .blob-pink { width: 380px; height: 380px; }
            .blob-peach { width: 300px; height: 300px; }

            .text-container {
                width: 300px;
                height: 300px;
                top: 5%;
                left: 50%;
                transform: translateX(-50%);
            }
            .headline-text { font-size: 18px; }
            .subheadline {
                font-size: 0.75rem;
                max-width: 200px;
                

                /* Lighter than desktop so it stays legible over the (also
                   tamed-down) animated ring blur behind it. */
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }
            #wheel-wrapper {
                /* Original fixed mobile wheel measurements, disabled:
                   width: 650px;
                   height: 650px;
                   bottom: -200px;
                   right: -200px;
                */
                width: min(650px, 140vw);
                height: min(650px, 140vw);
                bottom: clamp(-220px, -28vw, -100px);
                right: clamp(-240px, -35vw, -120px);
            }
            .social-icon {
                width: 76px;
                height: 76px;
                font-size: 32px;
                backdrop-filter: blur(14px) saturate(200%);
                -webkit-backdrop-filter: blur(14px) saturate(200%);
            }
            #music-player {
                max-width: 190px;
                right: 12px;
                top: 12px;
                padding: 6px 12px 6px 6px;
            }
            #play-toggle { width: 30px; height: 30px; font-size: 11px; }
        }

         
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        a:focus-visible, button:focus-visible {
            outline: 3px solid #161616;
            outline-offset: 4px;
        }
        @media (prefers-reduced-motion: reduce) {
            .social-icon, #play-toggle { transition: none; }
            .circular-text-svg, .flower-wrapper, #wheel-wrapper, .social-icon {
                animation: none !important;
            }
        }


         
        .social-icon .icon-fallback {
            position: absolute;
            font: 900 16px/1 Arial, sans-serif;
            color: #333;
            letter-spacing: -0.03em;
        }
        .fa-loaded .social-icon .icon-fallback { display: none; }

         
        /* Click-to-reveal splash overlay — fixed above everything
           (including the music player) with a blurred view of the
           live site behind it until the visitor clicks through. */
        #enter-overlay {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
            background: rgba(248, 244, 236, 0.25);
            backdrop-filter: blur(18px) saturate(150%);
            -webkit-backdrop-filter: blur(18px) saturate(150%);
            cursor: pointer;
            transition: opacity 0.6s ease, visibility 0.6s ease;
        }
        #enter-overlay.enter-dismissed {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .enter-text {
            font-family: 'Montserrat', sans-serif;
            font-weight: 900;
            font-style: italic;
            font-size: clamp(1.4rem, 5vw, 2.6rem);
            letter-spacing: 2px;
            text-align: center;
            color: #111;
            background: rgba(255, 255, 255, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 999px;
            padding: 16px 34px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
            user-select: none;
            -webkit-user-select: none;
            animation: enter-pulse 2.2s ease-in-out infinite;
        }
        @keyframes enter-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        @media (max-width: 768px) {
            .enter-text { padding: 12px 24px; letter-spacing: 1px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .enter-text { animation: none; }
            #enter-overlay { transition: none; }
        }