/* === BASE STYLING === */

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #000000; /* Pure black background */
    font-family: 'Inter', sans-serif;
    overflow: hidden; 
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    animation: fadeIn 6.5s ease-in-out forwards; 
}

h1 {
    font-weight: 700; /* Bold */
    font-size: 10vw; 
    text-transform: uppercase;
    letter-spacing: 20px; 
    margin: 0;
    position: relative; 

    /* === EXACT GRADIENT FROM IMAGE === */
    background: linear-gradient(
        to right,
        #00C389 0%,    /* Start with dark green */
        #00D49C 20%,   /* Mid-green */
        #00E5AE 35%,   /* Lighter green before transition */
        #00D0EB 50%,   /* Midnt: bright blue starts */
        #00ACD8 65%,   /* Deeper blue */
        #008EC2 80%,   /* Even deeper blue */
        #0071AE 100%   /* End with darkest blue */
    );
    
    /* Clip the background to the text */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback */

    /* === NEW: GRADIENT ANIMATION === */
    
    /* 1. Make the background gradient larger than the text */
    background-size: 200% 200%;
    
    /* 2. Apply the animation */
    /* It will take 8 seconds, run infinitely, and go back-and-forth */
    animation: gradientFlow 5s ease-in-out infinite;

    /* Optional: Add a subtle glow matching the gradient */
    text-shadow: 0 0 10px rgba(0, 200, 150, 0.2), 
                 0 0 20px rgba(0, 180, 220, 0.2);
}

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

/* === NEW: KEYFRAMES FOR THE GRADIENT === */
/* This rule moves the background-position */
@keyframes gradientFlow {
    0% {
        background-position: 10% 50%; /* Start */
    }
    50% {
        background-position: 90% 50%; /* Move to the end */
    }
    100% {
        background-position: 1% 50%; /* Move back to the start */
    }
}