/* ============================================
   URBÁLI 360 - ANIMATED GRADIENT TEXT
   Ported from React Bits for Vanilla CSS
   ============================================ */

.gradient-text {
    /* Base text styling */
    display: inline-block;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Gradient Configuration */
    /* Colors: #acfe40, #679df3, #0071db */
    /* We repeat the first color at the end for seamless looping */
    background-image: linear-gradient(to right,
            #acfe40,
            #679df3,
            #0071db,
            #acfe40);

    /* Size must be larger than 100% to allow movement */
    background-size: 300% 100%;

    /* Animation */
    animation: gradient-flow 10s linear infinite;

    /* Optional: maintain weight/readability */
    font-weight: inherit;
}

@keyframes gradient-flow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}