/* File: css/style_intro.css */

/* Kontainer untuk video agar menutupi seluruh BINGKAI */
#video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 100% dari #game-frame */
    height: 100%; /* 100% dari #game-frame */
    z-index: 1;
}

/* Styling video agar pas dengan BINGKAI (cover) */
#intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Styling untuk tombol "Mulai" di dalam BINGKAI */
#start-button {
    position: absolute; /* Relatif terhadap #game-frame */
    bottom: 15%; /* Posisi di dalam bingkai */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;

    padding: 12px 35px;
    font-size: 18px; /* Ukuran font tetap */
    color: white;
    background: linear-gradient(45deg, #f7a072, #ff7e5f);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

    opacity: 0;
    pointer-events: none;
    
    transition: opacity 0.5s ease-in-out, transform 0.3s ease;
}

#start-button:hover {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

#start-button.hidden {
    opacity: 0;
    pointer-events: none;
}

#start-button.visible {
    opacity: 1;
    pointer-events: auto;
    animation: bounce-in 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes bounce-in {
    0%   { transform: translateX(-50%) scale(0.5); opacity: 0; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
/* File: css/style_intro.css */

/* ... (semua style lain yang sudah ada biarkan di atas) ... */


/* ============================================= */
/* --- STYLING TOMBOL KONTROL AUDIO --- */
/* ============================================= */
#audio-control {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3; /* Di atas video dan tombol start */
    
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

#audio-control:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

#audio-control img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* Logika untuk menampilkan ikon yang benar berdasarkan status */
/* Saat TIDAK muted, tampilkan ikon "sound on" dan sembunyikan "sound off" */
#audio-control:not(.muted) .icon-sound-off {
    display: none;
}
#audio-control:not(.muted) .icon-sound-on {
    display: block;
}

/* Saat MUTED, tampilkan ikon "sound off" dan sembunyikan "sound on" */
#audio-control.muted .icon-sound-on {
    display: none;
}
#audio-control.muted .icon-sound-off {
    display: block;
}