/* Butterfly Animation Styles */

/* Floating Butterfly Animation */
@keyframes butterfly-float {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
    }
    25% { 
        transform: translateY(-10px) rotate(-2deg); 
    }
    50% { 
        transform: translateY(-5px) rotate(1deg); 
    }
    75% { 
        transform: translateY(-15px) rotate(-1deg); 
    }
}

@keyframes butterfly-wings {
    0%, 100% { 
        transform: scaleX(1); 
    }
    50% { 
        transform: scaleX(1.1); 
    }
}

@keyframes butterfly-glow {
    0%, 100% { 
        filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.3)); 
    }
    50% { 
        filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.6)); 
    }
}

/* Butterfly Scatter Animation */
@keyframes butterfly-scatter-1 {
    0% { 
        transform: translate(0, 0) rotate(0deg) scale(0.8); 
        opacity: 0.7;
    }
    25% { 
        transform: translate(100px, -50px) rotate(45deg) scale(1); 
        opacity: 1;
    }
    50% { 
        transform: translate(200px, -20px) rotate(90deg) scale(0.9); 
        opacity: 0.8;
    }
    75% { 
        transform: translate(150px, -80px) rotate(135deg) scale(1.1); 
        opacity: 0.6;
    }
    100% { 
        transform: translate(300px, -100px) rotate(180deg) scale(0.7); 
        opacity: 0.3;
    }
}

@keyframes butterfly-scatter-2 {
    0% { 
        transform: translate(0, 0) rotate(0deg) scale(0.6); 
        opacity: 0.5;
    }
    30% { 
        transform: translate(-80px, -60px) rotate(-30deg) scale(1.2); 
        opacity: 0.9;
    }
    60% { 
        transform: translate(-150px, -30px) rotate(-60deg) scale(0.8); 
        opacity: 0.7;
    }
    100% { 
        transform: translate(-250px, -120px) rotate(-90deg) scale(0.5); 
        opacity: 0.2;
    }
}

@keyframes butterfly-scatter-3 {
    0% { 
        transform: translate(0, 0) rotate(0deg) scale(0.9); 
        opacity: 0.6;
    }
    40% { 
        transform: translate(50px, -100px) rotate(60deg) scale(1.3); 
        opacity: 1;
    }
    70% { 
        transform: translate(120px, -150px) rotate(120deg) scale(0.7); 
        opacity: 0.5;
    }
    100% { 
        transform: translate(200px, -200px) rotate(180deg) scale(0.4); 
        opacity: 0.1;
    }
}

/* Butterfly Classes */
.butterfly-animated {
    animation: butterfly-float 4s ease-in-out infinite, 
               butterfly-wings 2s ease-in-out infinite,
               butterfly-glow 3s ease-in-out infinite;
    transition: all 0.3s ease;
}

.butterfly-animated:hover {
    animation-duration: 2s, 1s, 1.5s;
    transform: scale(1.1);
}

.butterfly-scatter {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
}

.butterfly-scatter-1 {
    animation: butterfly-scatter-1 8s ease-in-out infinite;
    animation-delay: 0s;
}

.butterfly-scatter-2 {
    animation: butterfly-scatter-2 10s ease-in-out infinite;
    animation-delay: 2s;
}

.butterfly-scatter-3 {
    animation: butterfly-scatter-3 12s ease-in-out infinite;
    animation-delay: 4s;
}

/* Butterfly Trail Effect */
@keyframes butterfly-trail {
    0% { 
        opacity: 1; 
        transform: scale(1); 
    }
    100% { 
        opacity: 0; 
        transform: scale(0.3) rotate(360deg); 
    }
}

.butterfly-trail {
    position: absolute;
    pointer-events: none;
    animation: butterfly-trail 1.5s ease-out forwards;
}

/* Header Butterfly Enhancement */
.flutter-badge {
    animation: butterfly-float 5s ease-in-out infinite;
}

/* Butterfly Background Pattern */
.butterfly-background {
    position: relative;
    overflow: hidden;
}

.butterfly-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
    animation: butterfly-glow 6s ease-in-out infinite;
    z-index: -1;
}

/* Responsive Butterfly Adjustments */
@media (max-width: 768px) {
    .butterfly-scatter {
        display: none;
    }
    
    .butterfly-animated {
        animation-duration: 6s, 3s, 4s;
    }
    
    @keyframes butterfly-scatter-mobile {
        0%, 100% { 
            transform: translateX(-20px) scale(0.8); 
            opacity: 0.5;
        }
        50% { 
            transform: translateX(20px) scale(1.1); 
            opacity: 0.8;
        }
    }
    
    .flutter-badge {
        animation: butterfly-scatter-mobile 4s ease-in-out infinite;
    }
}

/* Interactive Butterfly on Click */
.butterfly-interactive {
    cursor: pointer;
    transition: all 0.3s ease;
}

.butterfly-interactive:active {
    animation: butterfly-wings 0.5s ease-in-out 3;
    transform: scale(1.2);
}

/* Butterfly Loading Animation */
@keyframes butterfly-loading {
    0% { 
        transform: rotate(0deg) scale(1); 
        opacity: 1;
    }
    25% { 
        transform: rotate(90deg) scale(1.2); 
        opacity: 0.8;
    }
    50% { 
        transform: rotate(180deg) scale(0.8); 
        opacity: 0.6;
    }
    75% { 
        transform: rotate(270deg) scale(1.1); 
        opacity: 0.9;
    }
    100% { 
        transform: rotate(360deg) scale(1); 
        opacity: 1;
    }
}

.butterfly-loading {
    animation: butterfly-loading 2s linear infinite;
}

/* Butterfly Entrance Animation */
@keyframes butterfly-entrance {
    0% { 
        transform: translate(-100px, 100px) rotate(-45deg) scale(0); 
        opacity: 0;
    }
    50% { 
        transform: translate(-20px, 20px) rotate(0deg) scale(1.2); 
        opacity: 0.8;
    }
    100% { 
        transform: translate(0, 0) rotate(0deg) scale(1); 
        opacity: 1;
    }
}

.butterfly-entrance {
    animation: butterfly-entrance 1.5s ease-out forwards;
}