#website-heading {
    /* --- Base Text Styling --- */
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.25rem, 8vw, 4rem); /* Make the text large and bold for impact */
    font-weight: 900;
    line-height: 1.2;

    /* 1. Add the Text Color (Must be transparent to see the background) */
    color: transparent;
    
    /* --- The Magic: Gradient Background --- */
    /* Define a very wide gradient to simulate a continuous color wave */
    background: linear-gradient(
        90deg, 
        #461f80, /* Magenta */
        rgb(123, 0, 255), 
        rgb(220, 160, 254), 
        rgb(123, 0, 255),
        rgb(220, 160, 255),
        rgb(123, 0, 255), 
        rgb(220, 160, 255), 
        rgb(123, 0, 255),
        #461f80 /* Repeat Magenta for a seamless loop */
    );
    
    /* Double the size of the background so the animation has room to move */
    background-size: 400% 100%;
    
    /* --- Clip the Background to the Text --- */
    /* Standard property */
    -webkit-background-clip: text; 
    /* Standard property (for Firefox/future compatibility) */
    background-clip: text; 
    
    /* --- Make the Text Itself Transparent --- */
    /* The gradient shows through the letters */
    color: transparent; 
    
    /* --- The Animation --- */
    animation: color-wave 15s ease-in-out infinite; /* Slow, smooth, infinite movement */
}

/* --- Keyframes for the Wave Movement --- */
@keyframes color-wave {
    0% {
        /* Start with the background position at the far left */
        background-position: 0% 50%;
    }
    50% {
        /* Move the background position to the far right */
        background-position: 100% 50%;
    }
    100% {
        /* Return to the start for a seamless loop */
        background-position: 0% 50%;
    }
}