body {
    background-color: #2b2b2b;
}
.content {
    padding: 0 !important;
    background-color: #000000;
    overflow: hidden;
}

.video-hero-container {
    position: relative;
    width: 100%;
    height: 84vh;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 預設完全透明，等待 JS 載入完成後淡入 */
.bg-video-blur, .main-video-front {
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* 當 JS 注入 video-ready 類名後，優雅淡入 */
.video-hero-container.video-ready .bg-video-blur { opacity: 0.6; }
.video-hero-container.video-ready .main-video-front { opacity: 1; }

.bg-video-blur {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
    filter: blur(40px) brightness(0.6);
    transform: scale(1.1);
    pointer-events: none;
}

.main-video-front {
    position: relative;
    width: 100%; height: 100%;
    object-fit: contain;
    z-index: 2;
}

.volume-toggle-btn {
    position: absolute;
    bottom: 30px; right: 30px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 44px; height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.3s ease;
    pointer-events: auto;
    opacity: 0;
}

.video-hero-container.video-ready .volume-toggle-btn { opacity: 1; }
.volume-toggle-btn:hover { background: rgba(162, 155, 254, 0.8); transform: scale(1.05); }
.volume-icon { width: 22px; height: 22px; fill: #ffffff; transition: transform 0.2s ease; }
.volume-toggle-btn:active .volume-icon { transform: scale(0.9); }