/* hadiah.css */

/* Gaya untuk gambar bergoyang */
.shake-img {
    position: absolute;
    width: 70%;
    height: auto;
    top: 0%; 
    left: 15%;
    z-index: 5;
    opacity: 0; /* Sembunyikan pada awalnya */
    display: none; /* Sembunyikan pada awalnya */
}

/* Gaya untuk gambar petir */
.lightning-img {
    position: absolute;
    top: 60%; 
    left: 10%;
    transform: translateY(-50%);
    z-index: 6; 
    opacity: 0; /* Sembunyikan pada awalnya */
    display: none; /* Sembunyikan pada awalnya */
}

.lightning-img1 {
    position: absolute;
    top: 70%; 
    left: 70%;
    transform: translateY(-50%);
    z-index: 7;
    opacity: 0; /* Sembunyikan pada awalnya */
    display: none; /* Sembunyikan pada awalnya */
}

.lightning-img2 {
    position: absolute;
    top: 10%; 
    left: 5%;
    transform: translateY(-50%);
    z-index: 8; 
    opacity: 0; /* Sembunyikan pada awalnya */
    display: none; /* Sembunyikan pada awalnya */
}

.face {
    position: absolute;
    top: 60%; 
    left: 80%;
    transform: translateY(-50%);
    z-index: 30; 
    opacity: 0; /* Sembunyikan pada awalnya */
    display: none; /* Sembunyikan pada awalnya */
}

.hadiah1 {
    position: absolute;
    width: 99%; /* Atur lebar sesuai kebutuhan */
    height: auto; /* Atur tinggi otomatis sesuai proporsi */
    max-width: 750px; /* Atur lebar maksimum untuk elemen */
    top: 50%; /* Posisi vertikal 40% dari atas */
    left: 14%; /* Posisikan elemen di tengah horizontal */
    transform: translate(-50%, -50%); /* Pusatkan elemen */
    z-index: 31;
    opacity: 0; /* Sembunyikan pada awalnya */
    display: none; /* Sembunyikan pada awalnya */
}

@keyframes zoomOutFade {
    0% {
        transform: scale(5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.zoom-out {
    animation: zoomOutFade 0.6s ease-out forwards;
    transform-origin: center center; /* Pastikan transformasi berasal dari tengah */
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1; }
/* Tambahkan lebih banyak delay sesuai kebutuhan */


/* Gaya untuk tombol */ 
.toggle-button { 
    position: absolute; 
    top: 90%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background: none; 
    border: none; 
    cursor: pointer; 
    z-index: 100; 
} 
    
.toggle-button img { 
    width: 100%; /* Atur ukuran sesuai kebutuhan */ 
    height: auto; 
    transition: transform 0.3s ease; /* Animasi transisi saat hover */ 
    z-index: 101;
} 
.toggle-button:hover img { 
    transform: scale(1.5); /* Membesarkan gambar 10% saat hover */ }