html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

h1, h2, h3, .font-serif {
    font-family: 'Cinzel', serif;
}

/* Fix SVG alignment inside color tags */
.shadow-icon-tint svg {
    transition: fill 0.3s ease;
}

/* ==========================================
   EXCITING CYBER MIDNIGHT THEME (DARK MODE)
   ========================================== */
.dark body {
    background-color: #0A0915; 
    color: #E0E4ED;
}
.dark .bg-shadow { background-color: rgba(10, 9, 21, 0.85); }
.dark .nav-border { border-color: rgba(0, 242, 254, 0.15); } 
.dark .brand-text { color: #FFFFFF; }
.dark .custom-nav-text { color: #A4A2B5; }
.dark .mobile-menu-bg { background-color: #0A0915; }
.dark .hero-gradient-v { background-image: linear-gradient(to top, #0A0915, rgba(10, 9, 21, 0.3), transparent); }
.dark .hero-gradient-h { background-image: linear-gradient(to right, rgba(10, 9, 21, 0.7), transparent, rgba(10, 9, 21, 0.7)); }
.dark .main-title-text { color: #FFFFFF; }
.dark .hero-sub-text { color: #C4C3D4; }
.dark .custom-btn-border { border-color: rgba(255, 255, 255, 0.2); }
.dark .card-bg { background-color: rgba(19, 18, 36, 0.75); } 
.dark .section-border { border-color: rgba(0, 242, 254, 0.12); }
.dark .body-text { color: #A4A2B5; }
.dark .highlighted-text { color: #00F2FE; }
.dark .section-accent-bg { background-color: #0E0D1F; } 
.dark .tab-text-active { color: #00F2FE; }
.dark .tab-text-inactive { color: #7F7E91; }
.dark .video-mute-border { border-color: rgba(255, 255, 255, 0.15); }
.dark .footer-bg { background-color: #06050F; }
.dark .dark-icon { display: none; }
.dark .light-icon { display: block; }

/* ==========================================
   PREMIUM ART CHAMPAGNE THEME (LIGHT MODE)
   ========================================== */
.light body {
    background-color: #FAF6F0; 
    color: #23222B;
}
.light .bg-shadow { background-color: rgba(250, 246, 240, 0.9); }
.light .nav-border { border-color: rgba(13, 148, 136, 0.15); } 
.light .brand-text { color: #16151C; }
.light .custom-nav-text { color: #585563; }
.light .mobile-menu-bg { background-color: #FAF6F0; }
.light .hero-gradient-v { background-image: linear-gradient(to top, #FAF6F0, rgba(250, 246, 240, 0.2), transparent); }
.light .hero-gradient-h { background-image: linear-gradient(to right, rgba(250, 246, 240, 0.6), transparent, rgba(250, 246, 240, 0.6)); }
.light .main-title-text { color: #16151C; }
.light .hero-sub-text { color: #3F3C4A; }
.light .custom-btn-border { border-color: rgba(22, 21, 28, 0.3); }
.light .card-bg { background-color: #FFFFFF; } 
.light .section-border { border-color: rgba(13, 148, 136, 0.15); }
.light .body-text { color: #585563; }
.light .highlighted-text { color: #0D9488; }
.light .section-accent-bg { background-color: #F1E9DE; } 
.light .tab-text-active { color: #0D9488; }
.light .tab-text-inactive { color: #848191; }
.light .video-mute-border { border-color: rgba(0, 0, 0, 0.15); }
.light .footer-bg { background-color: #EAE2D5; }
.light .dark-icon { display: block; }
.light .light-icon { display: none; }

/* Scroll Animation Engine Hooks */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-in-up.visible { opacity: 1; transform: translateY(0); }

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translate(0); }

/* Navigation Underline Hover Tracking */
.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #00F2FE;
    transition: width 0.3s ease;
}
.light .nav-link::after { background-color: #0D9488; }
.nav-link:hover::after { width: 100%; }

@keyframes subtleZoom {
    0% { transform: scale(1.02); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1.02); }
}
.animate-subtle-zoom { animation: subtleZoom 20s infinite ease-in-out; }

/* Track Card Motion Architecture */
.track-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.track-card:hover {
    transform: translateY(-5px);
}
.dark .track-card:hover { 
    border-color: #00F2FE !important;
    box-shadow: 0 15px 35px -10px rgba(0, 242, 254, 0.2); 
}
.light .track-card:hover { 
    border-color: #0D9488 !important;
    box-shadow: 0 15px 35px -10px rgba(13, 148, 136, 0.15); 
}


/* Custom Responsive layout patches */
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
    display: none;
}

/* Fix text breaking layout constraints on small smartphones */
@media (max-width: 380px) {
    h1, h2 {
        word-break: break-word;
        hyphens: auto;
    }
}