/* 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.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 */
@keyframes curtainUnfold {
    0% {
        transform: perspective(800px) rotateY(0deg);
        clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);
        opacity: 0;
    }
    30% {
        clip-path: polygon(40% 0%, 60% 0%, 60% 100%, 40% 100%);
        opacity: 0.5;
    }
    60% {
        clip-path: polygon(20% 0%, 80% 0%, 80% 100%, 20% 100%);
        opacity: 0.8;
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        transform: perspective(800px) rotateY(0deg);
        opacity: 1;
    }
}

.animate-clothing-unfold-chat {
    animation: curtainUnfold 5s ease-in-out 0.001s forwards; /* Starts after flaps open */
    transform-origin: center;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}