@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes moveRight {
    0% {
        left: 0%;
    }

    100% {
        left: 100%;
    }
}

@keyframes floatUp {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes growWidth {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/* Custom Utilities that might not be in default Tailwind or need specific handling */
.perspective-1000 {
    perspective: 1000px;
}

/* Animation Utilities */
.animate-shimmer {
    animation: shimmer 3s infinite;
}

.animate-moveRight {
    animation: moveRight 4s linear infinite;
}

.animate-floatUp {
    animation: floatUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.animate-growWidth {
    animation: growWidth 2s ease-out infinite;
}

/* Reveal On Scroll Base State */
.reveal-element {
    transition: all 1000ms;
    transform: translateY(2.5rem);
    /* translate-y-10 */
    opacity: 0;
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Glassmorphism Utilities */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.glass-dark {
    background: rgba(24, 24, 27, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}