/* Premium Butterfly Layout Styles */
.butterfly-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 38px;
    perspective: 500px;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

@media (min-width: 768px) {
    .butterfly-container {
        width: 40px;
        height: 48px;
    }
}

@media (min-width: 1024px) {
    .butterfly-container {
        width: 50px;
        height: 60px;
    }
}

.butterfly-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wing {
    position: absolute;
    width: 45%;
    height: 100%;
    top: 0;
    transform-style: preserve-3d;
    will-change: transform;
}

.wing-left {
    right: 50%;
    transform-origin: right center;
    animation: butterfly-flap-left 0.8s ease-in-out infinite alternate;
}

.wing-right {
    left: 50%;
    transform-origin: left center;
    animation: butterfly-flap-right 0.8s ease-in-out infinite alternate;
}

.butterfly-body {
    position: absolute;
    width: 10%;
    height: 100%;
    top: 0;
    left: 45%;
    z-index: 10;
    transform-style: preserve-3d;
}

/* Floating Clouds Animation Styles */
#pause {
    background-color: #a9a8a8 !important;
    /* Slightly darker warm gray/cream to make white clouds pop */
}

.cloud-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 20;
    /* Floating over text (z-10) */
}

.cloud {
    position: absolute;
    pointer-events: none;
    opacity: 0.22;
    /* Subtle opacity so text remains perfectly legible */
    will-change: transform;
}

.cloud-1 {
    height: 220px;
    top: 15%;
    animation: floatCloud1 65s linear infinite;
    animation-delay: -10s;
}

.cloud-2 {
    height: 280px;
    top: 30%;
    animation: floatCloud2 85s linear infinite;
    animation-delay: -35s;
}

.cloud-3 {
    height: 190px;
    top: 48%;
    animation: floatCloud3 75s linear infinite;
    animation-delay: -55s;
}

.cloud-4 {
    height: 240px;
    top: 62%;
    animation: floatCloud4 95s linear infinite;
    animation-delay: -75s;
}

/* Drift animations with horizontal movement and gentle vertical up/down float */
@keyframes floatCloud1 {
    0% {
        transform: translate3d(-350px, 0, 0) scale(1);
    }

    25% {
        transform: translate3d(25vw, 20px, 0) scale(1.02);
    }

    50% {
        transform: translate3d(50vw, -15px, 0) scale(0.98);
    }

    75% {
        transform: translate3d(75vw, 25px, 0) scale(1.01);
    }

    100% {
        transform: translate3d(100vw, 0, 0) scale(1);
    }
}

@keyframes floatCloud2 {
    0% {
        transform: translate3d(-450px, 0, 0) scale(1.1);
    }

    30% {
        transform: translate3d(30vw, -30px, 0) scale(1.08);
    }

    60% {
        transform: translate3d(60vw, 25px, 0) scale(1.12);
    }

    90% {
        transform: translate3d(90vw, -15px, 0) scale(1.09);
    }

    100% {
        transform: translate3d(100vw, 0, 0) scale(1.1);
    }
}

@keyframes floatCloud3 {
    0% {
        transform: translate3d(-300px, -20px, 0) scale(0.9);
    }

    20% {
        transform: translate3d(20vw, 15px, 0) scale(0.93);
    }

    50% {
        transform: translate3d(50vw, -25px, 0) scale(0.88);
    }

    80% {
        transform: translate3d(80vw, 20px, 0) scale(0.92);
    }

    100% {
        transform: translate3d(100vw, -20px, 0) scale(0.9);
    }
}

@keyframes floatCloud4 {
    0% {
        transform: translate3d(-400px, 25px, 0) scale(1.05);
    }

    35% {
        transform: translate3d(35vw, -20px, 0) scale(1.03);
    }

    70% {
        transform: translate3d(70vw, 30px, 0) scale(1.07);
    }

    100% {
        transform: translate3d(100vw, 25px, 0) scale(1.05);
    }
}