/* Butterfly Animations */

@keyframes butterfly-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(5deg);
    }
    50% {
        transform: translateY(0) rotate(0deg);
    }
    75% {
        transform: translateY(-10px) rotate(-5deg);
    }
}

@keyframes butterfly-fly {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 1;
        transform: translateX(70vw) translateY(30vh) rotate(0deg);
    }
}

@keyframes butterfly-fly-rtl {
    0% {
        transform: translateX(0) translateY(0) rotate(180deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(-100vw) translateY(-100vh) rotate(180deg);
        opacity: 0;
    }
}

@keyframes flutter {
    0%, 100% {
        transform: skewX(0deg);
    }
    25% {
        transform: skewX(10deg);
    }
    50% {
        transform: skewX(0deg);
    }
    75% {
        transform: skewX(-10deg);
    }
}

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

/* Butterfly wings - no animation, static display */
.perching-butterfly .butterfly-wing {
    /* Static wings only */
}

/* NEW: Butterfly landing and perching animation */
@keyframes butterfly-landing {
    0% {
        opacity: 0;
        transform: translateY(-100px) translateX(0px) rotate(0deg);
    }
    15% {
        opacity: 1;
        transform: translateY(0) translateX(0px) rotate(0deg);
    }
    20%, 90% {
        opacity: 1;
        transform: translateY(0) translateX(0px) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100px) translateX(200px) rotate(180deg);
    }
}

/* Butterfly Logo Animation */
.butterfly-logo {
    animation: butterfly-float 3s ease-in-out infinite;
}

/* Floating Butterflies (background) */
.floating-butterfly {
    position: fixed;
    width: 60px;
    height: 60px;
    pointer-events: none;
    z-index: 1;
}

.floating-butterfly svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* FLYING BUTTERFLIES (interactive, animated) */
.flying-butterfly {
    position: fixed;
    width: 80px;
    height: 60px;
    z-index: 999;
    cursor: pointer;
}

.flying-butterfly svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* NEW: Perching butterfly (sits and flutters wings) */
.perching-butterfly {
    position: fixed;
    width: 120px;
    height: 120px;
    pointer-events: none;
    z-index: 10;
}

.perching-butterfly svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}



.perching-butterfly.perch-1 {
    animation: butterfly-landing 18s ease-in-out infinite;
    bottom: 15%;
    right: 5%;
}

.perching-butterfly.perch-2 {
    animation: butterfly-landing 20s ease-in-out infinite;
    bottom: 25%;
    left: 10%;
    animation-delay: 4s;
}

.perching-butterfly.perch-3 {
    animation: butterfly-landing 22s ease-in-out infinite;
    top: 30%;
    right: 15%;
    animation-delay: 8s;
}

.flying-butterfly-1 {
    position: fixed;
    z-index: 998;
    animation: butterfly-fly 25s ease-in-out forwards;
    animation-play-state: running;
    pointer-events: auto;
}

.flying-butterfly-1.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    animation-play-state: paused !important;
}

@keyframes butterfly-fly-blue {
    0% {
        transform: translateX(0) translateY(30vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateX(50vw) translateY(50vh) rotate(0deg);
    }
}

@keyframes butterfly-fly-yellow {
    0% {
        transform: translateX(70vw) translateY(100px) rotate(180deg);
        opacity: 1;
    }
    85% {
        opacity: 1;
        transform: translateX(5vw) translateY(30vh) rotate(180deg);
    }
    100% {
        opacity: 1;
        transform: translateX(5vw) translateY(30vh) rotate(180deg);
    }
}

.flying-butterfly-2 {
    position: fixed;
    z-index: 999;
    animation: butterfly-fly-blue 25s ease-in-out forwards;
    animation-play-state: paused;
    pointer-events: auto;
    opacity: 0 !important;
    pointer-events: none !important;
}

.flying-butterfly-2[style*="opacity: 1"] {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.flying-butterfly-2.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    animation-play-state: paused !important;
}

.flying-butterfly-3 {
    position: fixed;
    z-index: 1000;
    animation: butterfly-fly-yellow 25s ease-in-out forwards;
    animation-play-state: paused;
    pointer-events: auto;
    opacity: 0 !important;
    pointer-events: none !important;
}

.flying-butterfly-3[style*="opacity: 1"] {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.flying-butterfly-3.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    animation-play-state: paused !important;
}

.floating-butterfly.fly-2 {
    display: none;
}

.floating-butterfly.fly-3 {
    display: none;
}

.floating-butterfly.fly-4 {
    display: none;
}

.floating-butterfly.fly-5 {
    display: none;
}

/* Decorative Butterfly Elements */
.butterfly-decoration {
    display: inline-block;
    animation: flutter 1.5s ease-in-out infinite;
}

/* Homepage Butterfly Cluster */
.butterfly-cluster {
    position: relative;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.butterfly-cluster svg {
    width: 80px;
    height: 80px;
    animation: flutter 1.5s ease-in-out infinite;
}

.butterfly-cluster svg:nth-child(1) {
    animation-delay: 0s;
}

.butterfly-cluster svg:nth-child(2) {
    animation-delay: 0.3s;
}

.butterfly-cluster svg:nth-child(3) {
    animation-delay: 0.6s;
}

/* Responsive */
@media (max-width: 768px) {
    .floating-butterfly {
        display: none;
    }

    .butterfly-cluster {
        height: 200px;
    }

    .butterfly-cluster svg {
        width: 60px;
        height: 60px;
    }
}