/* Custom Smooth Scroll & Selection */
        ::selection { background: #6366F1; color: #fff; }
        
        /* Modern Cinematic Cover Exit Transition */
        .cover-hidden { 
            transform: translateY(-100%) scale(1.05); 
            opacity: 0;
            filter: blur(15px);
            pointer-events: none;
            transition: transform 1.4s cubic-bezier(0.85, 0, 0.15, 1), opacity 1.2s ease-in-out, filter 1.2s ease-in-out; 
        }

        /* Scroll Text Reveal Animation Base */
        .reveal-text {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-text.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Dynamic Starry Background */
        body {
            background-color: #050714;
            overflow-x: hidden;
        }

        #particles-canvas {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1;
            pointer-events: none;
        }

        /* Glowing Moon & Planet Floating Effect */
        @keyframes floatSlow {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(3deg); }
        }
        .floating-element {
            animation: floatSlow 6s ease-in-out infinite;
        }

        @keyframes pulseGlow {
            0%, 100% { opacity: 0.4; filter: drop-shadow(0 0 15px rgba(240,214,138,0.3)); }
            50% { opacity: 0.8; filter: drop-shadow(0 0 30px rgba(240,214,138,0.7)); }
        }
        .pulse-glow {
            animation: pulseGlow 4s ease-in-out infinite;
        }

        /* Glassmorphism Advanced */
        .glass-card {
            background: rgba(22, 30, 69, 0.45);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .glass-button {
            background: linear-gradient(135deg, rgba(240, 214, 138, 0.9) 0%, rgba(212, 175, 55, 0.8) 100%);
            box-shadow: 0 8px 32px 0 rgba(240, 214, 138, 0.25);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .glass-button:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 12px 40px 0 rgba(240, 214, 138, 0.4);
        }

        /* Radar Ring Animation */
        @keyframes radarScan {
            0% { transform: scale(0.8); opacity: 0.8; }
            100% { transform: scale(2.2); opacity: 0; }
        }
        .radar-ring {
            animation: radarScan 3s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
        }
    
        .section-bg{position:relative;overflow:hidden;background-size:cover!important;background-position:center!important;background-attachment:fixed!important;}
        .section-bg::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(5,7,20,.45),rgba(5,7,20,.75)),var(--section-bg);background-size:cover;background-position:center;z-index:0;}
        .section-bg>*{position:relative;z-index:2;}
        
        
        /*======================================== animasi our story ========================================*/
           @keyframes twinkle {
            0% { transform: scale(1); opacity: 0.3; }
            50% { transform: scale(1.1); opacity: 0.5; }
            100% { transform: scale(1); opacity: 0.3; }
        }
        .animate-twinkle {
            animation: twinkle 6s infinite linear;
        }

        @keyframes shine {
            100% { left: 125%; }
        }
        .animate-shine {
            animation: shine 0.75s;
        }

        @keyframes pulse-subtle {
            0% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.4); }
            70% { box-shadow: 0 0 0 8px rgba(var(--color-primary-rgb), 0); }
            100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0); }
        }
        .animate-pulse-subtle {
            animation: pulse-subtle 2s infinite;
        }

        @keyframes pulse-slow {
            0%, 100% { opacity: 0.8; }
            50% { opacity: 0.4; }
        }
        .animate-pulse-slow {
            animation: pulse-slow 4s infinite;
        }

        :root {
            --color-primary: #a78bfa;
            --color-primary-rgb: 167, 139, 250;
            --color-cosmic-dark: #0f172a;
        }

        [x-cloak] { display: none !important; }
                /*======================================== animasi our story ========================================*/