/* Container */
.mi-container-chat {
    position: relative;
    width: 100%; /* Adjust as needed */
    height: 200px;
    overflow: hidden;
}

/* General Flap Styles */
.mi-flap-chat {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("/static/images/cardbg2.0fece6cbaf47.webp");
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease-in-out, visibility 0.8s ease-in-out;
    z-index: 10;
}

/* Flap Animations */
@keyframes flapOpen {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; visibility: hidden; }
}

/* Assign animations with different delays */
.mi-flap-chat1 { animation: flapOpen 0.8s ease-in-out 0.2s forwards; transform-origin: top; }
.mi-flap-chat2 { animation: flapOpen 0.8s ease-in-out 0.4s forwards; transform-origin: bottom; }
.mi-flap-chat3 { animation: flapOpen 0.8s ease-in-out 0.6s forwards; transform-origin: right; }
.mi-flap-chat4 { animation: flapOpen 0.8s ease-in-out 0.8s forwards; transform-origin: left; }
.mi-flap-chat5 { animation: flapOpen 1s ease-in-out 1s forwards; transform-origin: center; }

/* Cover Image Animation - GPU-accelerated (composited) version */
/* Replaced clip-path with transform/opacity for better performance */
@keyframes curtainUnfoldChat {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }
    30% {
        transform: scaleX(0.4);
        opacity: 0.5;
    }
    60% {
        transform: scaleX(0.7);
        opacity: 0.8;
    }
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

.animate-clothing-unfold-chat {
    animation: curtainUnfoldChat 1.5s ease-out forwards;
    transform-origin: center;
    will-change: transform, opacity;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}