/* Custom Animations */
@keyframes float-y {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-50px);
    }
}

@keyframes float-x {
    0%, 100% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(40px);
    }
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes sway {
    0%, 100% {
        transform: rotate(-10deg) translate(0, 0);
    }
    50% {
        transform: rotate(10deg) translate(20px, -20px);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
        filter: brightness(1.5);
    }
}

@keyframes float-particle {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        transform: translate(var(--tx), var(--ty));
        opacity: 0.8;
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: translate(0, 0);
        opacity: 0;
    }
}

/* Valid Complex Movements */
@keyframes wander-1 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -30px) rotate(10deg);
    }
    66% {
        transform: translate(-20px, 20px) rotate(-5deg);
    }
}

@keyframes wander-2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-40px, 20px) scale(1.1);
    }
}

@keyframes wander-3 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(25px, 25px) rotate(-15deg);
    }
}

.animate-sway {
    animation: sway 10s ease-in-out infinite;
}

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

.animate-float-y-fast {
    animation: float-y 5s ease-in-out infinite;
}

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

.animate-wander-1 {
    animation: wander-1 12s ease-in-out infinite;
}

.animate-wander-2 {
    animation: wander-2 15s ease-in-out infinite;
}

.animate-wander-3 {
    animation: wander-3 18s ease-in-out infinite;
}

.particle {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0;
    animation: float-particle var(--d) ease-in-out infinite;
    animation-delay: var(--delay);
}

/* Wave Animations */
@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

.parallax > use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}