/* Keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(40px) skewY(5deg);
    }

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

@keyframes glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes speedLines {
    0% {
        background-position: 0 0;
    }

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

@keyframes popIn {
    0% {
        transform: scale(0);
    }

    80% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Base Classes */
.anim-pop {
    animation: popIn 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

.anim-slide-up {
    animation: slideUp 0.6s ease-out forwards;
}

.anim-glitch:hover {
    animation: glitch 0.3s infinite;
}

.anim-float {
    animation: float 3s ease-in-out infinite;
}

/* Halftone Pattern Overlay */
.halftone-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, #333 1px, transparent 1px);
    background-size: 10px 10px;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}