/* Character Layer */
.ganesha-container {
    --base-tx: -50%;
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(var(--base-tx));
    width: 40%;
    /* Unified width */
    z-index: 5;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease;
}

/* Specific sizing removed as requested */

.ganesha-container img {
    width: 100%;
    display: block;
    will-change: transform, opacity;
}

.mooshak-container {
    --base-tx: 0%;
    position: absolute;
    bottom: 15%;
    left: -3%;
    width: 25%;
    z-index: 6;
    transition: transform 0.5s ease;
}

.mooshak-container img {
    width: 100%;
}

/* Character Clouds */
.character-cloud {
    --base-tx: 0%;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
}

#ganesha-cloud {
    --base-tx: -50%;
    bottom: 0%;
    left: 50%;
    width: 30%;
}

#mooshak-cloud {
    bottom: 6%;
    left: 2.5%;
    width: 15%;
    z-index: 5;
}

.static-cloud {
    transition: opacity 1.2s ease;
}

@keyframes cloudEntry {
    from {
        opacity: 0;
        transform: translate(var(--base-tx), 100px);
    }

    to {
        opacity: 0.9;
        transform: translate(var(--base-tx), 0);
    }
}

@keyframes idleFloat {

    0%,
    100% {
        transform: translate(var(--base-tx), 0) scale(1);
    }

    50% {
        transform: translate(var(--base-tx), 15px) scale(1.05);
    }
}

.character-cloud.visible {
    opacity: 0.9;
    animation: cloudEntry 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sync-float {
    animation: idleFloat 4s ease-in-out infinite !important;
}

.village-mode .character-cloud {
    display: none;
}

.village-mode .ganesha-container {
    width: 25%;
    bottom: 5%;
}