/* Styling untuk animasi lilin */
.hidden {
    display: none !important;
}

/* Memastikan container kue tidak bergerak */
.cake-container, .cake, .cake-base, .candles-container {
    transform: none !important;
    transition: none !important;
}

.candle-out {
    opacity: 0 !important;
    /* Hapus transform untuk menghilangkan animasi loncat */
    /* transform: scale(0.2) !important; */
    box-shadow: none !important;
    transition: opacity 0.5s ease-out !important; /* Hanya transisi untuk opacity */
}

.action-section {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 1rem;
}

.elegant-btn {
    margin: 0 5px;
}

/* Efek ketika lilin ditiup */
@keyframes flameOut {
    0% {
        opacity: 1;
        /* Hapus transform untuk mencegah loncat */
        /* transform: scale(1); */
        box-shadow: 
            0 0 8px rgba(255, 215, 0, 0.7),
            0 -3px 6px rgba(255, 140, 0, 0.5);
    }
    100% {
        opacity: 0;
        /* Hapus transform untuk mencegah loncat */
        /* transform: scale(0.2); */
        box-shadow: none;
    }
}

/* Animasi asap setelah lilin mati */
.smoke {
    position: absolute;
    width: 3px;
    height: 10px;
    background-color: rgba(200, 200, 200, 0.7);
    border-radius: 50%;
    opacity: 0;
    transform-origin: bottom;
    animation: smokeRise 2s ease-out forwards;
    z-index: 10; /* Pastikan asap berada di atas elemen lain */
    pointer-events: none; /* Hindari asap mengganggu interaksi mouse */
}

@keyframes smokeRise {
    0% {
        opacity: 0.7;
        transform: translateY(0) scale(1);
    }
    25% {
        opacity: 0.6;
        transform: translateY(-5px) scale(1.5);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-10px) scale(2);
    }
    75% {
        opacity: 0.3;
        transform: translateY(-15px) scale(2.5);
    }
    100% {
        opacity: 0;
        transform: translateY(-25px) scale(3);
    }
}

/* Kelas tambahan untuk api ketika ditiup */
.flame-out {
    animation: none !important; /* Hapus animasi flameOut yang menggunakan transform */
    opacity: 0 !important;
    /* Hapus transform untuk mencegah loncat */
    /* transform: scale(0) !important; */
    transition: opacity 0.5s ease-out !important; /* Gunakan transisi opacity saja */
}