/* =================================================================== */
/* ==                 1. KEYFRAME DEFINITIONS                       == */
/* =================================================================== */

/* Animates a horizontal gradient movement */
@keyframes gradient-x {
    0%, 100% {
        background-position: -100% 0;
    }
    50% {
        background-position: 100% 0;
    }
}

/* A subtle floating effect */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* A more pronounced floating effect */
@keyframes float-delayed {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-25px);
    }
}

/* Fades in content while moving it up */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* A gentle glowing pulse effect, often for highlights */
@keyframes pulse-glow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(20, 184, 166, 0.4);
    }
    50% {
        text-shadow: 0 0 25px rgba(20, 184, 166, 0.8);
    }
}

/* A shimmering effect, often used for loading states */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Shaking animation for incorrect quiz answers */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* Classic spin animation for loading indicators */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Bouncing animation for quiz result emoji */
@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}


/* =================================================================== */
/* ==                 2. ANIMATION UTILITY CLASSES                  == */
/* =================================================================== */

.animate-gradient-x {
    animation: gradient-x 15s ease infinite;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-delayed 8s ease-in-out infinite;
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out;
}

.animate-fade-in-up-delayed {
    animation: fade-in-up 1s ease-out 0.3s both; /* 'both' keeps the final state */
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-bounce {
    animation: bounce 1s infinite;
}