/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #4A90E2;
    --secondary-color: #1a1a1a;
    --accent-color: #3a7bc8;
    --text-light: #f8f9fa;
    --text-dark: #2c2c2c;
    --background-light: #fafafa;
    --background-dark: #1a1a1a;
    --gradient-primary: linear-gradient(135deg, #4A90E2 0%, #667eea 100%);
    --gradient-dark: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
    --shadow-blue: 0 10px 30px rgba(74, 144, 226, 0.3);
    --shadow-dark: 0 10px 30px rgba(0, 0, 0, 0.2);
}

body {
    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    overflow-x: hidden;
    background: var(--background-light);
}

html {
    scroll-behavior: smooth;
}

/* Offset in-page anchors for fixed navbar so native anchor jumps land correctly */
section {
    scroll-margin-top: 90px;
}

/* Increase offset specifically for Audio section to reveal studios/equipment cards fully */
#audio {
    scroll-margin-top: -250px;
}

@media (max-width: 768px) {
    section {
        scroll-margin-top: 70px; /* mobile navbar height */
    }

    /* Larger offset for Audio section on mobile */
    #audio {
        scroll-margin-top: 120px;
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: translateY(-50px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% { box-shadow: 0 2px 10px rgba(255, 71, 87, 0.3); }
    50% { box-shadow: 0 2px 20px rgba(255, 71, 87, 0.6); }
    100% { box-shadow: 0 2px 10px rgba(255, 71, 87, 0.3); }
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

@keyframes visualizer {
    0%, 100% { height: 4px; }
    50% { height: 20px; }
}

@keyframes miniVisualize {
    0%, 100% { height: 8px; }
    50% { height: 16px; }
}

@keyframes visualizerPulse {
    0% {
        height: 4px;
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}