/* Mouche Container */
.mouche-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    /* Let clicks pass through */
    z-index: 10;
    /* Above overlay */
}

/* SVG Filters Container */
.mouche-svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* The Fly Wrapper */
.mouche-fly {
    position: absolute;
    /* Responsive size: 5% of the smallest viewport dimension, 
       but clamped to reasonable min/max sizes */
    width: clamp(60px, 12vmin, 120px);
    aspect-ratio: 1 / 1;
    height: auto;
    /* Center the fly on its coordinate */
    top: 0;
    left: 0;
    will-change: transform;
    /* Transformation handled by JS */
}

/* Inner Wrapper for Wobble */
.mouche-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Common styles for layers */
.mouche-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/mouche.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Body - Top Layer */
.mouche-body {
    z-index: 2;
}

/* Wings - Bottom Layer (for blur effect) */
.mouche-wings {
    z-index: 1;
    opacity: 0.8;
    transition: filter 0.2s ease-out;
}

/* Moving State - Blur Logic */
/* We will use an SVG filter for directional blur, 
   but as fallback or enhancement we can use simple blur */
.mouche-fly.moving .mouche-wings {
    /* To be controlled via JS or SVG filter specifically */
    /* filter: blur(4px); Basic fallback */
    filter: url('#mouche-motion-blur');
}

/* Wobble Animation during movement */
@keyframes mouche-wobble {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(12px);
    }

    50% {
        transform: translateX(0);
    }

    75% {
        transform: translateX(-12px);
    }

    100% {
        transform: translateX(0);
    }
}

.mouche-fly.moving .mouche-inner {
    /* Fast random-like oscillation on X axis (which is perpendicular to Up movement) */
    animation: mouche-wobble 0.2s infinite linear;
}

/* --- Final Sequence Styles --- */

.mouche-final-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
    /* Above everything */
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
    /* Center everything */

    /*set the image as guide*/
    /* background-image: url('../DESIGN/logo-with-mouche.svg');
    background-size: initial;
    background-position: top;
    background-repeat: no-repeat; */
}

.mouche-final-container.active {
    display: flex;
}

.hero_final {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 800px;
    margin-bottom: 5%;
}

/* 1. FLY ANIMATION (Top Section) */
.final_logo_image {
    z-index: 2;
}

.final_logo_image img {
    display: block;
    width: 40vh;
    height: 40vh;
    max-width: 90px;
    /* Responsive size */
    max-height: 90px;

    /* Initial placement: Off-screen Bottom Left */
    opacity: 0;
    transform: translate(-100vw, 100vh) rotate(45deg) scale(1.1);
    filter: blur(5px);
}

@media(max-width: 768px) {
    .final_logo_bubble {
        max-width: 86%;
    }

    .final_logo_image img {
        width: 60px;
        height: 60px;
    }

}


.mouche-final-container.active .final_logo_image img {
    animation: flyEnterBottomLeft 1s ease-out forwards;
}

@keyframes flyEnterBottomLeft {
    0% {
        opacity: 0;
        transform: translate(-100vw, 100vh) rotate(45deg) scale(1.1);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(35deg) scale(1);
        filter: blur(0);
    }
}

/* 2. TEXT ANIMATION (Bottom Section) */
.final_logo_text {
    z-index: 1;
}

.final_logo_text img {
    display: block;
    width: auto;
    height: auto;
    max-width: 60vw;

    opacity: 0;
    transform: translateY(30px);
}

.mouche-final-container.active .final_logo_text img {
    animation: textReveal 1s ease-out forwards;
    animation-delay: 1.2s;
    /* Start just as fly arrives */
}

@keyframes textReveal {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. BUBBLE ANIMATION */
.final_logo_bubble {
    z-index: 3;
    margin-bottom: 0px;
}

.final_logo_bubble img {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    filter: blur(4px);

    /* Responsive size can be adjusted here if needed, 
       but img-fluid in HTML limits it usually. 
       We set a max-width to keep it reasonable. */
}

.mouche-final-container.active .final_logo_bubble img {
    animation: bubbleReveal 0.8s ease-out forwards;
    animation-delay: 2.4s;
    /* Starts after text finishes */
}

@keyframes bubbleReveal {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}