@theme {
    --animate-bounce-slow: bounce-slow 2s infinite alternate;
    --animate-text-color: text-color 16s linear infinite;

    @keyframes bounce-slow {
        0% {
            transform: translateY(0);
        }
        to {
            transform: translateY(-12px);
        }
    }

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

    @keyframes shimmer {
        0% {
            left: -100%;
        }
        100% {
            left: 100%;
        }
    }
}

.animated-text {
    @apply animate-text-color;
    background-size: 500% 500%;
    background-clip: text;
    color: transparent;
}

.shimmer-loading {
    position: relative;
    overflow: hidden;
}

.shimmer-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    );
    animation: shimmer 1.5s infinite;
    z-index: 1;
    pointer-events: none;
}