/* CNY Decorations CSS */
.cny-decoration-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Ensure clicks pass through */
    z-index: 9999;
    /* Stay on top */
    overflow: hidden;
}

.cny-lantern {
    position: absolute;
    transform-origin: 50% 0;
    /* Pivot from the top center string */
    /* Main lantern sway - gentle breeze */
    /* Main lantern sway - gentle breeze */
    animation: swing-lantern 4s infinite ease-in-out alternate;
    opacity: 0.6;
    /* Slight transparency for the whole lantern */
}

/* Internal body transparency to make it look like paper/fabric */
.lantern-body {
    opacity: 0.85;
}

.cny-lantern.left {
    top: 0;
    left: 20px;
}

.cny-lantern.right {
    top: 0;
    right: 140px;
    /* Switched with right-2 */
    animation-delay: 1.5s;
}

.cny-lantern.left-2 {
    top: 0;
    left: 140px;
    transform: scale(0.7);
    animation-delay: 0.5s;
}

.cny-lantern.right-2 {
    top: 0;
    right: 20px;
    /* Switched with right */
    transform: scale(0.7);
    animation-delay: 2s;
}

/* Secondary physics for the tassel to lag behind */
.cny-tassel-group {
    transform-origin: 50% 120px;
    /* Pivot from where it attaches to the lantern */
    animation: swing-tassel 4s infinite ease-in-out alternate;
}

/* Keyframes */

@keyframes swing-lantern {
    0% {
        transform: rotate(4deg);
    }

    100% {
        transform: rotate(-4deg);
    }
}

/* Tassel swings opposite to the lantern slightly to create drag/gravity feel */
@keyframes swing-tassel {
    0% {
        transform: rotate(-8deg);
        /* Lagging behind */
    }

    100% {
        transform: rotate(8deg);
    }
}


/* Specific scale adjustments for smaller lanterns need nested animation handling or specific keyframes */
/* To simplify, we override the animation for smaller ones to include scale */

.cny-lantern.left-2 {
    animation: swing-lantern-small 4.5s infinite ease-in-out alternate;
}

.cny-lantern.left-2 .cny-tassel-group {
    animation: swing-tassel 4.5s infinite ease-in-out alternate;
}

.cny-lantern.right-2 {
    animation: swing-lantern-small 4.5s infinite ease-in-out alternate-reverse;
}

.cny-lantern.right-2 .cny-tassel-group {
    animation: swing-tassel 4.5s infinite ease-in-out alternate-reverse;
}

@keyframes swing-lantern-small {
    0% {
        transform: scale(0.7) rotate(3deg);
    }

    100% {
        transform: scale(0.7) rotate(-3deg);
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .cny-lantern.left {
        /* Override animation to include new scale */
        animation: swing-lantern-mobile 4s infinite ease-in-out alternate;
        left: -10px;
        top: 0;
    }

    .cny-lantern.right {
        /* Override animation to include new scale */
        animation: swing-lantern-mobile 4s infinite ease-in-out alternate;
        right: 120px;
        top: 0;
    }

    /* Smaller lanterns (already scaled 0.7 normally, so scale 0.4 here) */
    .cny-lantern.left-2 {
        /* Override animation to include new scale */
        animation: swing-lantern-mobile-small 4.5s infinite ease-in-out alternate;
        left: 60px;
        top: 0;
    }

    .cny-lantern.right-2 {
        /* Override animation to include new scale */
        animation: swing-lantern-mobile-small 4.5s infinite ease-in-out alternate-reverse;
        right: -10px;
        top: 0;
    }
}

@keyframes swing-lantern-mobile {
    0% {
        transform: scale(0.6) rotate(4deg);
    }

    100% {
        transform: scale(0.6) rotate(-4deg);
    }
}

@keyframes swing-lantern-mobile-small {
    0% {
        transform: scale(0.4) rotate(3deg);
    }

    100% {
        transform: scale(0.4) rotate(-3deg);
    }
}