:root { scroll-behavior: smooth; }
        body { 
            background-color: #131010; 
            color: #FFFFFF; 
            font-family: 'Instrument Sans', sans-serif;
            overflow-x: hidden;
        }

        /* Cinematic Background Animation */
        .bg-animate {
            background: linear-gradient(45deg, #131010, #1a1515, #241d1d, #131010);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Page Management */
        .view-section { display: none; }
        .view-section.active { display: block; animation: pageIn 0.8s cubic-bezier(0.16, 1, 0.3, 1); }

        @keyframes pageIn {
            from { opacity: 0; transform: translateY(20px) scale(0.98); filter: blur(10px); }
            to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
        }

        /* Navigation Transitions */
        #navbar.scrolled { background: rgba(19, 16, 16, 0.95); border-bottom: 1px solid #3D3D3D; padding: 1rem 1.5rem; }
        
        /* Card Stacking Effect */
        .stacked-card { transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); cursor: pointer; }
        .stacked-card:hover { transform: translateY(-15px) rotateX(5deg); border-color: #7C444F; z-index: 50; }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: #131010; }
        ::-webkit-scrollbar-thumb { background: #7C444F; }

        /* Mobile Menu */
        #mobile-nav { transition: 0.6s cubic-bezier(0.85, 0, 0.15, 1); clip-path: circle(0% at 100% 0%); }
        #mobile-nav.open { clip-path: circle(150% at 100% 0%); }

        /* Horizontal Scroll Hide */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* Floating Elements Animation */
        .float { animation: floating 6s ease-in-out infinite; }
        @keyframes floating {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }