/* ===== CSS VARIABLES ===== */
:root {
    --bg-color: #121212;
    --surface-color: #1e1e1e;
    --primary-text-color: #e0e0e0;
    --secondary-text-color: #a0a0a0;
    --accent-color: #007bff;
    --border-color: #333;
}

/* ===== RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Space Grotesk', sans-serif;
    background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #121212 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    color: var(--primary-text-color);
    margin: 0;
    padding: 2rem;
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* ===== ANIMATIONS ===== */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes oceanWave {
    0%, 100% { 
        transform: translateX(-10%) translateY(-5%) rotate(0deg) scale(1);
        opacity: 0.4;
    }
    25% {
        transform: translateX(0%) translateY(-8%) rotate(1deg) scale(1.05);
        opacity: 0.6;
    }
    50% { 
        transform: translateX(5%) translateY(-3%) rotate(0deg) scale(1.02);
        opacity: 0.3;
    }
    75% {
        transform: translateX(-5%) translateY(-10%) rotate(-1deg) scale(1.03);
        opacity: 0.5;
    }
}

@keyframes particleFlow {
    0% { transform: translateX(0%) translateY(0%); }
    25% { transform: translateX(-2%) translateY(-3%); }
    50% { transform: translateX(3%) translateY(-1%); }
    75% { transform: translateX(-1%) translateY(-4%); }
    100% { transform: translateX(0%) translateY(0%); }
}

@keyframes containerFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes oceanGlow {
    0% { 
        opacity: 0.4;
        transform: scale(1);
    }
    100% { 
        opacity: 0.8;
        transform: scale(1.02);
    }
}

@keyframes innerWave {
    0%, 100% {
        transform: translate(0%, 0%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-2%, -1%) scale(1.05);
        opacity: 0.1;
    }
}

@keyframes glowText {
    from {
        text-shadow: 
            0 0 5px rgba(135, 206, 235, 0.5), 
            0 0 10px rgba(0, 191, 255, 0.3), 
            0 0 15px rgba(173, 216, 230, 0.2),
            0 0 20px rgba(135, 206, 235, 0.1);
    }
    to {
        text-shadow: 
            0 0 8px rgba(135, 206, 235, 0.8), 
            0 0 16px rgba(0, 191, 255, 0.5), 
            0 0 25px rgba(173, 216, 230, 0.3),
            0 0 35px rgba(135, 206, 235, 0.2);
    }
}