<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YINDONG - IN GOD WE ARE</title>
    <meta name="description" content="Music visionary, 2036 Presidential candidate, civilization builder.">

    <link rel="preload"
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&family=Orbitron:wght@400;700;900&display=swap"
        as="style">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&family=Orbitron:wght@400;700;900&display=swap">

    <style>
        :root {
            --bg-dark: #030303;
            --bg-light: #f4f4f5;
            --text-dark: #18181b;
            --text-light: #f4f4f5;
            --accent-electric: #3b82f6;
            --accent-neon: #ec4899;
            --accent-gold: #fbbf24;
            --accent-purple: #8b5cf6;
            --zima-blue: #60a5fa;
            --glass-dark: rgba(10, 10, 10, 0.7);
            --glass-light: rgba(255, 255, 255, 0.8);
            --border-dark: rgba(255, 255, 255, 0.08);
            --border-light: rgba(0, 0, 0, 0.06);
            --section-dark: rgba(3, 3, 3, 0.98);
            --section-light: rgba(244, 244, 245, 0.98);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            font-family: 'Inter', -apple-system, sans-serif;
            background: var(--bg-dark);
            color: var(--text-light);
            cursor: none;
        }

        body.light-mode {
            background: var(--bg-light);
            color: var(--text-dark);
        }

        /* --- INTRO DOOR OVERLAY --- */
        #intro-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 5000;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #intro-overlay.hidden {
            opacity: 0;
            pointer-events: none;
            transform: scale(1.5);
        }

        /* --- MAIN SITE WRAPPER (HIDDEN INITIALLY) --- */
        #main-site-wrapper {
            opacity: 0;
            transition: opacity 2s ease 0.5s;
            filter: blur(10px);
            pointer-events: none;
            height: 100%;
        }

        #main-site-wrapper.active {
            opacity: 1;
            filter: blur(0);
            pointer-events: auto;
        }

        /* --- GLOBAL GALAXY BACKGROUND (index2.html style) --- */
        #hero-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 0;
            pointer-events: none;
        }

        /* Cursor */
        .cursor {
            position: fixed;
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            mix-blend-mode: difference;
            transition: transform 0.15s ease, width 0.3s, height 0.3s, opacity 0.3s;
        }

        .cursor.hover {
            width: 60px;
            height: 60px;
            background: #fff;
            opacity: 0.1;
        }

        /* Navigation */
        .nav-container {
            position: fixed;
            top: 2rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .nav-menu {
            display: flex;
            gap: 4px;
            background: var(--glass-dark);
            border: 1px solid var(--border-dark);
            border-radius: 100px;
            padding: 6px;
            backdrop-filter: blur(24px);
        }

        .nav-link {
            color: inherit;
            text-decoration: none;
            font-weight: 500;
            font-size: 12px;
            padding: 10px 20px;
            border-radius: 100px;
            transition: 0.3s;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            opacity: 0.6;
        }

        .nav-link:hover {
            opacity: 1;
            background: rgba(255, 255, 255, 0.05);
        }

        .nav-link.active {
            background: #fff;
            color: #000;
            opacity: 1;
        }

        /* Social Links */
        .social-links {
            position: fixed;
            left: 24px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 12px;
            z-index: 1000;
        }

        .social-link {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--glass-dark);
            border: 1px solid var(--border-dark);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
            backdrop-filter: blur(20px);
            opacity: 0.5;
        }

        .social-link:hover {
            opacity: 1;
            transform: scale(1.1);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .social-link img {
            width: 24px;
            height: 24px;
        }

        .social-link.twitter img {
            filter: invert(1);
        }

        /* Live Status */
        .live-status-widget {
            position: fixed;
            bottom: 24px;
            left: 24px;
            background: var(--glass-dark);
            backdrop-filter: blur(24px);
            border: 1px solid var(--border-dark);
            padding: 10px 20px;
            border-radius: 100px;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.5px;
            z-index: 1000;
            text-transform: uppercase;
            color: #ffffff !important;
            /* Force White */
        }

        /* Horizontal Layout */
        .horizontal-container {
            display: flex;
            height: 100vh;
            width: 600vw;
            /* Hero, Music, App, Shop, Vision, Citizenship */
            transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
            /* Smoother, longer transition */
        }

        .section {
            width: 100vw;
            height: 100vh;
            flex-shrink: 0;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            z-index: 5;
            pointer-events: auto;
        }

        /* Hero */
        .hero-title {
            font-size: clamp(4rem, 12vw, 10rem);
            font-weight: 900;
            letter-spacing: 0.15em;
            margin-right: -0.15em;
            margin-bottom: 1rem;
            color: currentColor;
            text-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
            text-transform: uppercase;
        }

        .hero-subtitle {
            font-family: 'Inter', monospace;
            font-size: clamp(0.9rem, 1.5vw, 1.2rem);
            font-weight: 500;
            letter-spacing: 0.5em;
            opacity: 0.6;
            text-transform: uppercase;
        }

        /* Vision Section */
        .vision-content {
            text-align: left;
            max-width: 800px;
            padding: 2rem;
        }

        .vision-item {
            margin-bottom: 3rem;
        }

        .vision-item h2 {
            font-family: 'Orbitron', sans-serif;
            font-size: 0.8rem;
            letter-spacing: 4px;
            opacity: 0.5;
            text-transform: uppercase;
            margin-bottom: 0.5rem;
        }

        .vision-item p {
            font-size: 1.8rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.2;
        }

        .vision-highlight {
            font-size: 2.5rem;
            font-weight: 900;
            margin-top: 4rem;
            letter-spacing: -0.05em;
            background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.3));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Music */
        .music-section {
            position: relative;
        }

        .stream-links {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            text-align: center;
        }

        .stream-links a {
            color: #fff;
            text-decoration: none;
            font-size: 3rem;
            /* Grand size */
            font-weight: 900;
            opacity: 0.6;
            transition: 0.3s;
            letter-spacing: -2px;
            position: relative;
        }

        .stream-links a:hover {
            opacity: 1;
            letter-spacing: 0px;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
        }

        /* === ACTUAL GEOMETRIC PYRAMID === */
        /* The container itself forms the strict triangle outline */
        .pyramid-container {
            width: 90vw;
            max-width: 800px;
            height: 75vh;
            min-height: 500px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            background: rgba(255, 255, 255, 0.03);
            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .pyramid-container:hover {
            transform: scale(1.02);
        }

        /* Tiers span the full width of the container */
        .pyramid-tier {
            flex: 1;
            /* evenly divide height */
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            /* Slice lines */
            transition: background 0.3s;
            position: relative;
        }

        .pyramid-tier:last-child {
            border-bottom: none;
        }

        .pyramid-tier:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        /* Top Crystal Slice */
        .crystal-tier {
            flex: 1.5;
            /* slightly taller top section */
            background: linear-gradient(180deg, rgba(200, 220, 255, 0.1), transparent);
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            text-decoration: none;
        }

        .crystal-tier:hover {
            background: linear-gradient(180deg, rgba(200, 220, 255, 0.2), rgba(255, 255, 255, 0.05));
        }

        .prism-label {
            color: #fff;
            font-weight: 900;
            font-size: 1.2rem;
            letter-spacing: 2px;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
        }

        /* Link nodes inside horizontal sections */
        .universe-links {
            display: flex;
            width: 100%;
            height: 100%;
        }

        .universe-node {
            flex: 1;
            /* items split the horizontal slice evenly */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            color: #fff;
            transition: all 0.3s;
            border-right: 1px solid rgba(255, 255, 255, 0.05);
        }

        .universe-node:last-child {
            border-right: none;
        }

        .universe-node:hover {
            background: rgba(255, 255, 255, 0.1);
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

        .universe-node .node-title {
            font-weight: 800;
            font-size: clamp(0.9rem, 1.5vw, 1.2rem);
            letter-spacing: 1px;
        }

        .universe-node .node-sub {
            font-size: clamp(0.5rem, 0.8vw, 0.7rem);
            opacity: 0.5;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-top: 4px;
        }

        /* Audio Control */
        .audio-control {
            position: fixed;
            bottom: 24px;
            right: 24px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--glass-dark);
            border: 1px solid var(--border-dark);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1000;
            backdrop-filter: blur(20px);
            transition: 0.3s;
        }

        .audio-control:hover {
            transform: scale(1.1);
            background: rgba(255, 255, 255, 0.1);
        }

        .audio-icon {
            width: 16px;
            height: 16px;
        }

        /* Shop List */
        .shop-section {
            z-index: 30;
        }

        .shop-list {
            display: flex;
            gap: 2rem;
            overflow-x: auto;
            padding: 2rem;
            max-width: 90vw;
            align-items: center;
            z-index: 100;
            position: relative;
        }

        .product-view {
            width: 260px;
            height: 380px;
            background: #fff;
            border-radius: 4px;
            transition: 0.4s;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            text-decoration: none;
            flex-shrink: 0;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            position: relative;
            pointer-events: auto;
        }

        .product-view:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 60px rgba(255, 255, 255, 0.1);
        }

        .product-view:active {
            transform: scale(0.95);
        }

        .product-image-area {
            flex: 1;
            background: #fff;
            position: relative;
            overflow: hidden;
        }

        .product-info-bottom {
            padding: 20px;
            background: #fff;
            text-align: center;
        }

        .product-name {
            font-size: 14px;
            font-weight: 400;
            color: #000;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        /* Door Styles */
        .door-final {
            width: 200px;
            height: 350px;
            border: 1px solid var(--border-dark);
            position: relative;
            cursor: pointer;
            transition: 0.5s;
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(4px);
        }

        .door-final:hover {
            border-color: #fff;
            transform: scale(1.02);
            background: rgba(255, 255, 255, 0.05);
            box-shadow: 0 0 50px rgba(255, 255, 255, 0.1);
        }

        .knob-final {
            position: absolute;
            right: 20px;
            top: 50%;
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 0 10px #fff;
        }

        /* ARROW POSITIONED AT 50% TOP TO ALIGN WITH KNOB CENTER */
        .knob-arrow {
            position: absolute;
            right: -55px;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            transition: 0.5s;
            pointer-events: none;
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
        }

        .door-final:hover .knob-arrow {
            opacity: 1;
            right: -45px;
            animation: arrow-point 1.5s infinite ease-in-out;
        }

        @keyframes arrow-point {

            0%,
            100% {
                transform: translateY(-50%) translateX(0);
            }

            50% {
                transform: translateY(-50%) translateX(-8px);
            }
        }

        /* Modal - Redesigned as Holographic Terminal */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(20px);
            z-index: 10000;
            opacity: 0;
            pointer-events: none;
            transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-overlay.active {
            opacity: 1;
            pointer-events: all;
        }

        .modal-frame {
            width: 550px;
            height: 700px;
            max-width: 95vw;
            max-height: 95vh;
            background: rgba(10, 10, 10, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 0;
            /* Sharp corners for tech feel */
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 100px rgba(0, 0, 0, 0.8), inset 0 0 2px rgba(255, 255, 255, 0.1);
            opacity: 0;
            transform: scale(0.95) translateY(20px);
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
        }

        /* Tech Deco Corners */
        .modal-frame::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            border-top: 2px solid #fff;
            border-left: 2px solid #fff;
            pointer-events: none;
        }

        .modal-frame::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 20px;
            height: 20px;
            border-bottom: 2px solid #fff;
            border-right: 2px solid #fff;
            pointer-events: none;
        }

        .modal-overlay.active .modal-frame {
            opacity: 1;
            transform: scale(1) translateY(0);
        }

        .modal-close {
            position: absolute;
            top: 30px;
            right: 30px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
            font-family: monospace;
            font-size: 20px;
            cursor: pointer;
            z-index: 10002;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
        }

        .modal-close:hover {
            background: #fff;
            color: #000;
        }

        #modal-iframe {
            width: 100%;
            height: 100%;
            border: none;
            opacity: 0;
            transition: opacity 0.3s;
        }

        #modal-iframe.loaded {
            opacity: 1;
        }

        .modal-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 14px;
            letter-spacing: 2px;
            text-transform: uppercase;
            opacity: 1;
            transition: opacity 0.3s;
        }

        .modal-loading.hidden {
            opacity: 0;
            pointer-events: none;
        }
    </style>
</head>

<body>
    <div class="cursor"></div>

    <!-- Intro Door -->
    <div id="intro-overlay">
        <div class="door-final" onclick="enterSite()">
            <div class="knob-final"></div>
            <!-- Cute Arrow -->
            <svg class="knob-arrow" width="40" height="40" viewBox="0 0 40 40" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path d="M35 5C35 5 30 25 5 25" stroke="white" stroke-width="2" stroke-linecap="round" />
                <path d="M12 18L5 25L12 32" stroke="white" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
            </svg>
        </div>
    </div>

    <!-- The Universe -->
    <canvas id="hero-canvas"></canvas>

    <!-- Audio Player -->
    <audio id="bg-audio" src="cyber.mp3" loop></audio>
    <div class="audio-control" id="audioToggle">
        <svg class="audio-icon" id="icon-play" viewBox="0 0 24 24" style="display:none;">
            <path d="M8 5v14l11-7z" fill="white" />
        </svg>
        <svg class="audio-icon" id="icon-pause" viewBox="0 0 24 24">
            <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" fill="white" />
        </svg>
    </div>

    <!-- Main Site -->
    <div id="main-site-wrapper">
        <div class="nav-container">
            <nav class="nav-menu">
                <a href="#hero" class="nav-link active" data-section="hero">YINDONG</a>
                <a href="#music" class="nav-link" data-section="music">Music</a>
                <a href="#app" class="nav-link" data-section="app">Universe</a>
                <a href="#shop" class="nav-link" data-section="shop">Shop</a>
                <a href="#vision" class="nav-link" data-section="vision">Vision</a>
                <a href="#citizenship" class="nav-link" data-section="citizenship">Citizenship</a>
            </nav>
        </div>

        <div class="social-links">
            <a href="https://www.youtube.com/@YINDONG4POTUS" target="_blank" class="social-link"><img
                    src="https://cdn.simpleicons.org/youtube/FF0000" alt="YouTube"></a>
            <a href="https://www.instagram.com/yindong4potus/" target="_blank" class="social-link"><img
                    src="https://cdn.simpleicons.org/instagram/E4405F" alt="Instagram"></a>
            <a href="https://x.com/YINDONG4POTUS" target="_blank" class="social-link twitter"><img
                    src="https://cdn.simpleicons.org/x/000000" alt="X"></a>
            <a href="" target="_blank" class="social-link"><img src="assets/tiktok.svg" alt="TikTok"></a>
            <a href="https://www.xiaohongshu.com/user/profile/62083ae40000000010005305" target="_blank"
                class="social-link"><img src="https://cdn.simpleicons.org/xiaohongshu/FF2442" alt="Xiaohongshu"></a>
        </div>

        <div class="live-status-widget">yindong is currently: Making love</div>

        <div class="horizontal-container" id="horizontalContainer">

            <!-- Hero -->
            <section class="section hero-section" id="hero">
                <div class="hero-content">
                    <h1 class="hero-title">YINDONG</h1>
                </div>
            </section>

            <!-- Music -->
            <section class="section music-section" id="music">
                <div class="stream-links">
                    <a href="https://open.spotify.com/artist/5CLBfHyXRgirraVr8iIFyj" target="_blank">SPOTIFY</a>
                    <a href="https://music.apple.com/us/artist/yindong/1758379380" target="_blank">APPLE MUSIC</a>
                    <a href="https://c6.y.qq.com/base/fcgi-bin/u?__=CwY61KC3xts4" target="_blank">QQ MUSIC</a>
                </div>
            </section>

            <!-- App (BUBBLE CLUSTER) -->
            <section class="section app-section" id="app">
                <div class="pyramid-container">
                    <!-- TIER 1: APEX (Triangle Tip) -->
                    <a href="#" class="pyramid-tier crystal-tier">
                        <div class="prism-label">THE ONE</div>
                    </a>

                    <!-- TIER 2: AIOS -->
                    <div class="pyramid-tier">
                        <div class="universe-links">
                            <a href="/aios" class="universe-node">
                                <span class="node-title">AIOS</span>
                                <span class="node-sub">intelligence</span>
                            </a>
                        </div>
                    </div>

                    <!-- TIER 3: MUSIC -->
                    <div class="pyramid-tier">
                        <div class="universe-links">
                            <a href="javascript:void(0)" onclick="scrollToSection('music')" class="universe-node">
                                <span class="node-title">MUSIC</span>
                                <span class="node-sub">sound</span>
                            </a>
                        </div>
                    </div>

                    <!-- TIER 4: 6 APPS -->
                    <div class="pyramid-tier">
                        <div class="universe-links">
                            <a href="/vybe" class="universe-node">
                                <span class="node-title">VYBE</span><span class="node-sub">social</span>
                            </a>
                            <a href="/jobee" class="universe-node">
                                <span class="node-title">JOBEE</span><span class="node-sub">career</span>
                            </a>
                            <a href="/welive" class="universe-node">
                                <span class="node-title">WELIVE</span><span class="node-sub">living</span>
                            </a>
                            <a href="/xuan" class="universe-node">
                                <span class="node-title">XUAN</span><span class="node-sub">wisdom</span>
                            </a>
                            <a href="/pawpal" class="universe-node">
                                <span class="node-title">PAWPAL</span><span class="node-sub">safety</span>
                            </a>
                            <a href="/starex" class="universe-node">
                                <span class="node-title">STAREX</span><span class="node-sub">talent</span>
                            </a>
                        </div>
                    </div>

                    <!-- TIER 5: BASE -->
                    <div class="pyramid-tier">
                        <div class="universe-links">
                            <a href="/wine" class="universe-node">
                                <span class="node-title">银霄</span><span class="node-sub">hospitality</span>
                            </a>
                            <a href="/wallet" class="universe-node">
                                <span class="node-title">WALLET</span><span class="node-sub">finance</span>
                            </a>
                            <a href="#" class="universe-node">
                                <span class="node-title">?</span><span class="node-sub">incoming</span>
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Shop -->
            <section class="section shop-section" id="shop">
                <div class="shop-list">
                    <a href="javascript:void(0)" onclick="purchaseSingle('BON BON', 0.99)" class="product-view">
                        <div class="product-image-area"></div>
                        <div class="product-info-bottom">
                            <div class="product-name">BON BON</div>
                        </div>
                    </a>
                    <a href="javascript:void(0)" onclick="purchaseSingle('BEACH WAVE', 0.99)" class="product-view">
                        <div class="product-image-area"></div>
                        <div class="product-info-bottom">
                            <div class="product-name">BEACH WAVE</div>
                        </div>
                    </a>
                    <a href="javascript:void(0)" onclick="purchaseSingle('FOOL', 0.99)" class="product-view">
                        <div class="product-image-area"></div>
                        <div class="product-info-bottom">
                            <div class="product-name">FOOL</div>
                        </div>
                    </a>
                    <a href="javascript:void(0)" onclick="purchaseSingle('CITYLIGHTS', 0.99)" class="product-view">
                        <div class="product-image-area"></div>
                        <div class="product-info-bottom">
                            <div class="product-name">CITYLIGHTS</div>
                        </div>
                    </a>
                    <a href="javascript:void(0)" onclick="purchaseSingle('SPOOKY', 0.99)" class="product-view">
                        <div class="product-image-area"></div>
                        <div class="product-info-bottom">
                            <div class="product-name">SPOOKY</div>
                        </div>
                    </a>
                </div>
            </section>

            <!-- Vision -->
            <section class="section vision-section" id="vision">
                <div class="vision-content">
                    <div class="vision-item">
                        <h2>One Piece</h2>
                        <p>We all earth citizen</p>
                    </div>
                    <div class="vision-item">
                        <h2>Yindong City</h2>
                        <p>First one on earth, second on moon, third on mars, the list goes on</p>
                    </div>
                    <div class="vision-item">
                        <h2>Star Traveler</h2>
                        <p>Individual can skr skr around the galaxy</p>
                    </div>
                    <div class="vision-item">
                        <h2>GOD</h2>
                        <p>IN GOD, I AM, in god, we are</p>
                    </div>
                    <div class="vision-highlight">
                        The richest in the world by 2027
                    </div>
                </div>
            </section>

            <!-- Citizenship -->
            <section class="section citizenship-section" id="citizenship">
                <div class="door-final" onclick="openModal('citizenship.html')">
                    <div class="knob-final"></div>
                    <svg class="knob-arrow" width="40" height="40" viewBox="0 0 40 40" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M35 5C35 5 30 25 5 25" stroke="white" stroke-width="2" stroke-linecap="round" />
                        <path d="M12 18L5 25L12 32" stroke="white" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                </div>
            </section>

        </div>
    </div>

    <!-- Modal -->
    <div id="void-modal" class="modal-overlay" onclick="closeModal()">
        <div class="modal-frame" onclick="event.stopPropagation()">
            <button class="modal-close" onclick="closeModal()">×</button>
            <div class="modal-loading">Loading...</div>
            <iframe id="modal-iframe" src=""></iframe>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // --- CORE ---
        let scene, camera, renderer, particles;
        let mouseX = 0, mouseY = 0;
        let currentSection = 0;
        let isScrolling = false;
        let starSpeed = 0.05;
        const sections = ['hero', 'music', 'app', 'shop', 'vision', 'citizenship'];
        const audio = document.getElementById('bg-audio');

        document.addEventListener('DOMContentLoaded', () => {
            initCursor();
            initAudio();
            initHero();
            initNavigation();
            initHorizontalScrolling();
            preloadCitizenship();
        });

        // Preload citizenship iframe for instant loading
        function preloadCitizenship() {
            const link = document.createElement('link');
            link.rel = 'prefetch';
            link.href = 'citizenship.html';
            document.head.appendChild(link);
        }

        // --- ENTRY ---
        window.enterSite = function () {
            document.getElementById('intro-overlay').classList.add('hidden');
            document.getElementById('main-site-wrapper').classList.add('active');

            // Start Audio
            audio.volume = 0.17;
            audio.play().catch(console.error);
        }

        function initAudio() {
            const btn = document.getElementById('audioToggle');
            const p = document.getElementById('icon-play');
            const s = document.getElementById('icon-pause');

            const toggle = () => {
                if (audio.paused) {
                    audio.play();
                    p.style.display = 'none';
                    s.style.display = 'block';
                } else {
                    audio.pause();
                    p.style.display = 'block';
                    s.style.display = 'none';
                }
            };

            btn.addEventListener('click', toggle);

            // Spacebar Toggle
            document.addEventListener('keydown', (e) => {
                if (e.code === 'Space' && !document.getElementById('intro-overlay').classList.contains('active')) {
                    e.preventDefault(); // Prevent scrolling
                    toggle();
                }
            });
        }

        // --- UNIVERSE (F1 PHYSICAL STREAMLINES) ---
        function initHero() {
            const canvas = document.getElementById('hero-canvas');
            scene = new THREE.Scene();

            // F1 Camera Angle: Low and fast
            camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 5000);
            camera.position.z = 50;

            renderer = new THREE.WebGLRenderer({ canvas, alpha: false, antialias: true });
            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
            renderer.setSize(window.innerWidth, window.innerHeight);

            // INSTANCED STREAMLINES
            // Instead of points, we use actual 3D geometry for "thick" airflow
            const streamCount = 4000;

            // Base geometry: A long, thin rod (The Streamline)
            // Radius 0.3 (Thick enough to see), Length 10 (Base length)
            const geometry = new THREE.CylinderGeometry(0.2, 0.2, 20, 5);
            geometry.rotateX(Math.PI / 2); // Align with Z-axis

            // Attributes
            const instancedPositions = new Float32Array(streamCount * 3);
            const instancedOffsets = new Float32Array(streamCount); // For random Z offset
            const instancedColors = new Float32Array(streamCount * 3);
            const instancedSpeeds = new Float32Array(streamCount);

            for (let i = 0; i < streamCount; i++) {
                const i3 = i * 3;

                // Tunnel Distribution
                // Clear center (radius 100), max radius 800
                const r = Math.random() * 800 + 100;
                const angle = Math.random() * Math.PI * 2;

                instancedPositions[i3] = Math.cos(angle) * r;
                instancedPositions[i3 + 1] = Math.sin(angle) * r;
                instancedPositions[i3 + 2] = 0; // Z handled by shader/offset

                instancedOffsets[i] = Math.random() * 10000; // Random start Z

                // Aero Palette: Titanium White, Carbon Grey, Electric Cyan
                const colorType = Math.random();
                let color;
                if (colorType > 0.8) color = new THREE.Color('#ffffff'); // White
                else if (colorType > 0.5) color = new THREE.Color('#38bdf8'); // Cyan
                else color = new THREE.Color('#64748b'); // Slate

                instancedColors[i3] = color.r;
                instancedColors[i3 + 1] = color.g;
                instancedColors[i3 + 2] = color.b;

                instancedSpeeds[i] = Math.random() * 0.5 + 0.8; // Speed variance
            }

            const material = new THREE.ShaderMaterial({
                uniforms: {
                    time: { value: 0 },
                    globalSpeed: { value: 0 },
                    curveStrength: { value: 200.0 }
                },
                vertexShader: `
                    attribute vec3 instanceOffset; // x, y, 0
                    attribute float instanceZStart;
                    attribute vec3 instanceColor;
                    attribute float instanceSpeedMult;
                    
                    varying vec3 vColor;
                    
                    uniform float time;
                    uniform float globalSpeed;
                    uniform float curveStrength;

                    void main() {
                        vColor = instanceColor;
                        
                        // Current Z position based on time and speed
                        float zPos = mod(instanceZStart + time * globalSpeed * instanceSpeedMult, 6000.0) - 5000.0;
                        
                        // Position the instance
                        vec3 pos = position;
                        
                        // STRETCH EFFECT
                        // Scale Z based on speed (Airflow elongation)
                        float stretch = 1.0 + globalSpeed * 0.1;
                        pos.z *= stretch; 
                        
                        // Apply Instance Position
                        pos += vec3(instanceOffset.x, instanceOffset.y, zPos);
                        
                        // AERODYNAMIC CURVE
                        // As streams get closer to camera (z > -1000), they flare out
                        // Mimics air flowing over a wing
                        float dist = smoothstep(-2000.0, 500.0, pos.z);
                        vec3 curveDir = normalize(vec3(instanceOffset.x, instanceOffset.y, 0.0));
                        pos += curveDir * dist * curveStrength;

                        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
                    }
                `,
                fragmentShader: `
                    varying vec3 vColor;
                    void main() {
                        // Simple flat color for high visibility "Light Saber" look
                        // Add subtle gradient based on varying? No, keep it solid/sharp.
                        gl_FragColor = vec4(vColor, 1.0);
                    }
                `,
                side: THREE.DoubleSide
            });

            // Create InstancedMesh
            const instancedMesh = new THREE.InstancedMesh(geometry, material, streamCount);

            // We have to fill the standard attributes manually into buffers for ShaderMaterial
            geometry.setAttribute('instanceOffset', new THREE.InstancedBufferAttribute(instancedPositions, 3));
            geometry.setAttribute('instanceZStart', new THREE.InstancedBufferAttribute(instancedOffsets, 1));
            geometry.setAttribute('instanceColor', new THREE.InstancedBufferAttribute(instancedColors, 3));
            geometry.setAttribute('instanceSpeedMult', new THREE.InstancedBufferAttribute(instancedSpeeds, 1));

            scene.add(instancedMesh);
            particles = instancedMesh; // Reference for animation loop

            document.addEventListener('mousemove', (e) => {
                mouseX = (e.clientX / window.innerWidth) * 2 - 1;
                mouseY = -(e.clientY / window.innerHeight) * 2 + 1;
            });

            animate();
        }

        function animate() {
            requestAnimationFrame(animate);
            // Time is handled differently now, we accumulate it for smooth infinite scroll
            const dt = 1.0;

            if (particles) {
                // PHYSICS: Massive acceleration
                // Cruise: 80, Warp: 300
                const targetSpeed = isScrolling ? 300.0 : 60.0;
                starSpeed += (targetSpeed - starSpeed) * 0.04;

                particles.material.uniforms.globalSpeed.value = starSpeed;

                // Accumulate "time" uniform manually for the loop
                particles.material.uniforms.time.value += 1.0;

                // Curve Strength responds to speed (Higher speed = harder air displacement)
                particles.material.uniforms.curveStrength.value = 50.0 + (starSpeed * 0.5);

                // Tilt the whole tunnel slightly based on mouse
                particles.rotation.x = mouseY * 0.05;
                particles.rotation.y = mouseX * 0.05;
            }

            renderer.render(scene, camera);
        }

        // --- NAVIGATION ---
        function initNavigation() {
            document.querySelectorAll('.nav-link').forEach(link => {
                link.addEventListener('click', (e) => {
                    e.preventDefault();
                    scrollToSection(link.dataset.section);
                });
            });
        }

        function scrollToSection(id) {
            const index = sections.indexOf(id);
            if (index === -1) return;
            currentSection = index;
            const container = document.getElementById('horizontalContainer');
            container.style.transform = `translateX(-${index * 100}vw)`;
            document.querySelectorAll('.nav-link').forEach((l, i) => l.classList.toggle('active', i === index));

            isScrolling = true;
            setTimeout(() => isScrolling = false, 1200); // Match transition time
        }

        function initHorizontalScrolling() {
            window.addEventListener('wheel', (e) => {
                if (!document.getElementById('main-site-wrapper').classList.contains('active')) return;
                if (isScrolling) return;

                if (Math.abs(e.deltaY) > 20) {
                    if (e.deltaY > 0 && currentSection < sections.length - 1) {
                        currentSection++; scrollToSection(sections[currentSection]);
                    } else if (e.deltaY < 0 && currentSection > 0) {
                        currentSection--; scrollToSection(sections[currentSection]);
                    }
                }
            });
        }

        // --- CURSOR ---
        function initCursor() {
            const cursor = document.querySelector('.cursor');
            let mX = -100, mY = -100;
            document.addEventListener('mousemove', e => { mX = e.clientX; mY = e.clientY; });
            function loop() {
                cursor.style.left = mX + 'px'; cursor.style.top = mY + 'px';
                requestAnimationFrame(loop);
            }
            loop();
            document.querySelectorAll('a, .door-final, .product-view, .app-node, .audio-control').forEach(el => {
                el.addEventListener('mouseenter', () => cursor.classList.add('hover'));
                el.addEventListener('mouseleave', () => cursor.classList.remove('hover'));
            });
        }

        // --- MODAL ---
        window.openModal = function (url) {
            const modal = document.getElementById('void-modal');
            const iframe = document.getElementById('modal-iframe');
            const loading = document.querySelector('.modal-loading');

            // Show loading
            loading.classList.remove('hidden');
            iframe.classList.remove('loaded');

            // Set iframe source and preload
            iframe.src = url;

            // Hide loading when iframe loads
            iframe.onload = function () {
                loading.classList.add('hidden');
                iframe.classList.add('loaded');
            };

            modal.classList.add('active');
        }

        window.closeModal = function () {
            const modal = document.getElementById('void-modal');
            const iframe = document.getElementById('modal-iframe');
            const loading = document.querySelector('.modal-loading');

            modal.classList.remove('active');
            setTimeout(() => {
                iframe.src = '';
                iframe.classList.remove('loaded');
                loading.classList.remove('hidden');
            }, 400);
        }

        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        async function purchaseSingle(name, price) {
            console.log('Adding to cart:', name, price);
            try {
                // Save to cart logic
                const cartItem = {
                    title: name,
                    price: price,
                    quantity: 1,
                    type: 'digital'
                };

                const cartData = {
                    items: [cartItem],
                    total: price
                };

                localStorage.setItem('cartData', JSON.stringify(cartData));
                window.location.href = 'cart.html';

            } catch (e) {
                console.error('Cart error:', e);
                alert('Error adding to cart.');
            }
        }
    </script>
</body>

</html>