/* --- BASE LAYOUT --- */
body { 
    background: #020617; 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
}

.viewer-container { 
    flex: 1; 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
}

model-viewer {
    width: 100%;
    height: 100%;
    background-color: transparent;
}

/* --- UI ELEMENTS & TRANSITIONS --- */
.transition-all { transition: all 0.5s ease-in-out; }

#volume-slider::-webkit-slider-runnable-track {
    background: #1e293b;
    border-radius: 4px;
    height: 4px;
}

#volume-slider::-webkit-slider-thumb {
    margin-top: -6px;
}

.vignette {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: radial-gradient(circle, transparent 20%, rgba(2, 6, 23, 0.8) 100%);
    pointer-events: none;
}

nav { z-index: 60; }

/* --- CINEMA MODE LOGIC --- */
.cinema-active nav, 
.cinema-active #display-box { 
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.8s ease-in-out; 
}

.cinema-active model-viewer {
    height: 100vh !important;
    transition: height 0.8s ease-in-out;
}

#cinema-exit-hint {
    position: fixed;
    top: 20px;
    right: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
    z-index: 100;
}

.cinema-active #cinema-exit-hint {
    opacity: 0.5;
}

/* --- EFFECTS & LOADING STATES --- */
#scene-flash {
    background-color: rgba(2, 6, 23, 0.6); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#scene-flash.bg-white { background-color: #ffffff; }
#scene-flash.bg-black { background-color: #020617; }

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}