/*
==============================================================
REVAMED MANSION
PHIRO BASELINE 008 ATMOSPHERE & ACCESSIBILITY STYLES
==============================================================
*/

/* Settings Panel Slide-in Override/Structure */
.settings-panel {
    position: absolute;
    top: 0;
    right: -340px;
    width: 320px;
    height: 100%;
    background: rgba(5, 5, 7, 0.88);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-left: 1px solid rgba(212, 175, 55, 0.25);
    z-index: 1000;
    transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
}

.settings-panel.visible {
    right: 0;
}

/* Settings Controls Styling */
.settings-group {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
}

.settings-label {
    display: flex;
    justify-content: space-between;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.settings-slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-slider {
    flex-grow: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    outline: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.settings-slider:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Custom range inputs */
.settings-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
}

.settings-slider::-webkit-slider-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ffd700;
    border: 1px solid #000;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    transition: transform 0.1s ease, background-color 0.2s ease;
}

.settings-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    background: #ffffff;
}

.settings-slider::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ffd700;
    border: 1px solid #000;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    transition: transform 0.1s ease, background-color 0.2s ease;
}

.settings-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
    background: #ffffff;
}

/* Custom Checkbox Controls */
.settings-group-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    cursor: pointer;
}

.settings-checkbox {
    width: 20px;
    height: 20px;
    accent-color: #ffd700;
    cursor: pointer;
    background: rgba(5, 5, 7, 0.9);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 4px;
}

.settings-checkbox-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #e2e8f0;
    user-select: none;
    cursor: pointer;
}

/* Visual Sound Captions Toast Notifications */
.audio-cues-container {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 1001;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    max-width: 320px;
}

.audio-cue-toast {
    background: rgba(10, 10, 14, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #ffd700;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 8px 16px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    animation: toastFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1), toastFadeOut 0.4s ease 1.7s forwards;
    display: flex;
    align-items: center;
    gap: 8px;
}

@keyframes toastFadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes toastFadeOut {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}

/* Room Ambience Visual Elements */
.dust-particle {
    position: absolute;
    background: rgba(212, 175, 55, 0.18);
    border-radius: 50%;
    pointer-events: none;
    animation: floatDust 10s linear infinite;
    z-index: 10;
}

@keyframes floatDust {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-120px) translateX(25px); opacity: 0; }
}

/* Fireplace & Flame Animation overrides */
.flame {
    animation: flamePulse 0.18s infinite alternate ease-in-out;
}

@keyframes flamePulse {
    0% { transform: scale(0.92) rotate(-2deg); opacity: 0.8; }
    100% { transform: scale(1.08) rotate(2deg); opacity: 1; }
}

.fireplace-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(220, 110, 40, 0.15) 0%, transparent 70%);
    pointer-events: none;
    animation: fireplaceFlicker 0.22s infinite alternate ease-in-out;
    mix-blend-mode: screen;
}

@keyframes fireplaceFlicker {
    0% { opacity: 0.7; }
    100% { opacity: 1.0; }
}

/* Chandelier lamp flickering */
.chandelier-flicker-overlay {
    animation: lampFlicker 5s infinite;
}

@keyframes lampFlicker {
    0%, 100% { opacity: 0.9; }
    48% { opacity: 0.95; }
    50% { opacity: 0.3; } /* quick visual glitch */
    52% { opacity: 0.9; }
    82% { opacity: 0.95; }
    84% { opacity: 0.45; }
    86% { opacity: 0.9; }
}

/* Room color overrides for atmosphere separation */
#scene-foyer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 16, 32, 0.12); /* cold blue tint */
    pointer-events: none;
    z-index: 1;
}

#scene-study::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(220, 110, 40, 0.05); /* warm fire amber tint */
    pointer-events: none;
    z-index: 1;
}

#scene-library::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(45, 10, 50, 0.08); /* dusty violet tint */
    pointer-events: none;
    z-index: 1;
}

#scene-main-hall::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(16, 20, 28, 0.08); /* stately dark slate */
    pointer-events: none;
    z-index: 1;
}

#scene-upstairs-landing::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(30, 8, 45, 0.12); /* obsidian shadow tint */
    pointer-events: none;
    z-index: 1;
}

/* Library Dust Shaft */
.dust-shaft {
    position: absolute;
    top: 0;
    left: 80px;
    width: 140px;
    height: 100%;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.06) 0%, transparent 60%);
    clip-path: polygon(0 0, 100% 0, 30% 100%, 0% 100%);
    pointer-events: none;
    z-index: 2;
}

/* Grand Staircase Window Ambience Overlay */
.landing-window-ambience {
    position: absolute;
    top: 30px;
    left: 210px;
    width: 80px;
    height: 120px;
    background: linear-gradient(180deg, rgba(140, 160, 220, 0.08) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* ============================================================
   ACCESSIBILITY: REDUCED MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    body {
        --reduced-motion-active: 1;
    }
    
    .flame,
    .fireplace-glow,
    .chandelier-flicker-overlay,
    .dust-particle,
    #lightning-flash.flash,
    #room-transition.active,
    #grandfather-clock .pendulum {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    
    .fireplace-glow {
        opacity: 0.85 !important;
    }
    
    #grandfather-clock .pendulum {
        transform: rotate(0deg) !important;
    }
}

/* Manual class toggle overrides */
body.reduced-motion .flame,
body.reduced-motion .fireplace-glow,
body.reduced-motion .chandelier-flicker-overlay,
body.reduced-motion .dust-particle,
body.reduced-motion #lightning-flash.flash,
body.reduced-motion #room-transition.active,
body.reduced-motion #grandfather-clock .pendulum {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

body.reduced-motion .fireplace-glow {
    opacity: 0.85 !important;
}

body.reduced-motion #grandfather-clock .pendulum {
    transform: rotate(0deg) !important;
}