@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes floatArrow1 {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
    }
    25% { 
        transform: translate(10px, -10px) rotate(5deg); 
    }
    50% { 
        transform: translate(20px, 5px) rotate(-3deg); 
    }
    75% { 
        transform: translate(5px, 10px) rotate(3deg); 
    }
}

@keyframes floatArrow2 {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
    }
    33% { 
        transform: translate(-15px, -15px) rotate(-5deg); 
    }
    66% { 
        transform: translate(-5px, 10px) rotate(5deg);
    }
}

@keyframes floatCircle1 {
    0%, 100% { 
        transform: translate(0, 0) scale(1); opacity: 0.2; 
    }
    50% { 
        transform: translate(20px, -20px) scale(1.2); opacity: 0.3; 
    }
}

@keyframes floatCircle2 {
    0%, 100% { 
        transform: translate(0, 0) scale(1); opacity: 0.15; 
    }
    50% { 
        transform: translate(-25px, 25px) scale(1.3); opacity: 0.25; 
    }
}

@keyframes floatCircle3 {
    0%, 100% { 
        transform: translate(0, 0) scale(1); opacity: 0.2; 
    }
    50% { 
        transform: translate(15px, -30px) scale(1.1); opacity: 0.3; 
    }
}

@keyframes leafFloat1 {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
    }
    25% { 
        transform: translateY(-15px) rotate(10deg); 
    }
    75% { 
        transform: translateY(15px) rotate(-10deg); 
    }
}

@keyframes leafFloat2 {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
    }
    33% { 
        transform: translateY(20px) rotate(-15deg); 
    }
    66% { 
        transform: translateY(-10px) rotate(15deg); 
    }
}

@keyframes leafFall {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

@keyframes sparkle {
    0%, 100% { 
        opacity: 0; transform: scale(0); 
    }
    50% { 
        opacity: 1; transform: scale(1.5); 
    }
}

@keyframes waterDrop1 {
    0%, 100% { 
        transform: translateY(0); opacity: 0.4; 
    }
    50% { 
        transform: translateY(20px); opacity: 0.6;
    }
}

@keyframes waterDrop2 {
    0%, 100% { 
        transform: translateY(0); opacity: 0.35; 
    }
    50% { 
        transform: translateY(25px); opacity: 0.55; 
    }
}

@keyframes floatIcon {
    0%, 100% { 
        transform: translateY(0); 
    }
    50% { 
        transform: translateY(-10px); 
    }
}

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

@keyframes drawLine {
    0% { 
        stroke-dasharray: 0, 100; 
    }
    100% { 
        stroke-dasharray: 100, 0; 
    }
}

@keyframes pulseNode {
    0%, 100% { 
        opacity: 0.3; transform: scale(1); 
    }
    50% { 
        opacity: 0.7; transform: scale(1.5); 
    }
}

@keyframes recycleRotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.2);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

.animate-fadeInUp { 
    animation: fadeInUp 0.8s ease-out; 
}

.animate-fadeInLeft { 
    animation: fadeInLeft 0.8s ease-out; 
}

.animate-fadeInRight { 
    animation: fadeInRight 0.8s ease-out; 
}

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

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

.animate-float-arrow-2 { 
    animation: floatArrow2 7s ease-in-out infinite;
}

.animate-float-circle-1 { 
    animation: floatCircle1 8s ease-in-out infinite;
}

.animate-float-circle-2 { 
    animation: floatCircle2 10s ease-in-out infinite;
}

.animate-float-circle-3 { 
    animation: floatCircle3 9s ease-in-out infinite;
}

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

.animate-leaf-float-2 { 
    animation: leafFloat2 7s ease-in-out infinite;
}

.animate-leaf-fall {
    animation: leafFall 15s linear infinite;
}

.animate-sparkle-1 { 
    animation: sparkle 3s ease-in-out infinite; 
}

.animate-sparkle-2 { 
    animation: sparkle 4s ease-in-out infinite 0.5s;
}

.animate-sparkle-3 { 
    animation: sparkle 3.5s ease-in-out infinite 1s; 
}

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

.animate-water-drop-1 { 
    animation: waterDrop1 3s ease-in-out infinite;
}

.animate-water-drop-2 { 
    animation: waterDrop2 3.5s ease-in-out infinite 0.5s; 
}

.animate-float-icon { 
    animation: floatIcon 2s ease-in-out infinite; 
}

.animate-spin-slow { 
    animation: spin 8s linear infinite; 
}

.animate-recycle {
    animation: recycleRotate 8s ease-in-out infinite;
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

#mobile-menu {
    transition: transform 0.3s ease-out;
}

#menu-overlay {
    transition: opacity 0.3s ease-out;
}

.leaf {
    animation-delay: var(--delay);
}
@keyframes spin-smooth {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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