/* Animations */

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

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

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

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 10px var(--color-primary-glow);
    }

    50% {
        box-shadow: 0 0 30px var(--color-primary-glow), 0 0 10px var(--color-accent);
    }

    100% {
        box-shadow: 0 0 10px var(--color-primary-glow);
    }
}

@keyframes glitch {
    0% {
        text-shadow: 2px 2px var(--color-primary), -2px -2px var(--color-accent);
    }

    25% {
        text-shadow: -2px 2px var(--color-primary), 2px -2px var(--color-accent);
    }

    50% {
        text-shadow: 2px -2px var(--color-primary), -2px 2px var(--color-accent);
    }

    75% {
        text-shadow: -2px -2px var(--color-primary), 2px 2px var(--color-accent);
    }

    100% {
        text-shadow: 2px 2px var(--color-primary), -2px -2px var(--color-accent);
    }
}

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

.animate-pulse {
    animation: pulse-glow 3s infinite;
}

.glitch-text:hover {
    animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
}

/* Fade in on scroll utility */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}