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

@keyframes wave {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 16px rgba(37, 99, 235, 0.5); }
    50%      { box-shadow: 0 0 16px rgba(37, 99, 235, 0.7), 0 0 16px rgba(37, 99, 235, 0.3); }
}

@keyframes shimmer {
    0%, 15%   { left: -75%; }
    85%, 100% { left: 150%; }
}


.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 1s ease, transform 1s ease;
    transition-delay: 0.3s;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-show-1 { animation: fadeUp 1s ease 0.1s both; }
.animate-show-2 { animation: fadeUp 1s ease 0.3s both; }
.animate-show-3 { animation: fadeUp 1s ease 0.5s both; }
.animate-show-4 { animation: fadeUp 1s ease 0.7s both; }
.animate-show-5 { animation: fadeUp 1s ease 0.9s both; }

.animate-wave-text {
    animation: wave 5s linear infinite;
    background-image: linear-gradient(to right, var(--color-yellow-300), var(--color-yellow-500), var(--color-yellow-300));
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.animate-wave-bg {
    animation: wave 5s linear infinite;
    background-image: linear-gradient(to right, var(--color-yellow-300), var(--color-yellow-500), var(--color-yellow-300));
    background-size: 300% 300%;
}

.animate-shimmer {
    position: relative;
    overflow: hidden;
    animation: glow 3s ease-in-out infinite;
}

.animate-shimmer::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 3s ease-in-out infinite;
    transform: skewX(-15deg);
    pointer-events: none;
}