/* === RESET & BASE === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow: hidden; height: 100vh; }
body { overflow: hidden; height: 100vh; background: #0d0f14; color: #c9c3b8; font-family: 'Libre Baskerville', serif; }

/* === FONTS === */
/* Nunito 800 — Display/Titles */
/* Libre Baskerville 400/700/italic — Body */
/* Quicksand 500 — HUD/Instruments */

/* === HUD === */
.hud {
    position: fixed; top: 24px; right: 28px; z-index: 100;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.hud-counter {
    font-family: 'Quicksand', sans-serif; font-weight: 500;
    font-size: clamp(0.65rem, 0.9vw, 0.8rem);
    letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(46, 94, 140, 0.7);
}
.hud-dots { display: flex; gap: 6px; }
.hud-dot {
    width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(46, 94, 140, 0.5);
    background: transparent; cursor: pointer; padding: 0; transition: background 0.3s;
}
.hud-dot.active { background: #2e5e8c; }

/* === JOURNEY (horizontal scroll container) === */
.journey {
    display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    height: 100vh; width: 100vw; scrollbar-width: none;
}
.journey::-webkit-scrollbar { display: none; }

/* === CHAMBER BASE === */
.chamber {
    min-width: 100vw; height: 100vh; flex-shrink: 0;
    scroll-snap-align: start; position: relative; overflow: hidden;
    background: #0d0f14;
}

/* === CANDLE ATMOSPHERIC LIGHTING === */
.candle {
    position: absolute; pointer-events: none; z-index: 1;
    width: 100%; height: 100%;
    animation: flicker 3.5s ease-in-out infinite;
}
.candle-airlock {
    background:
        radial-gradient(circle at 50% 60%, rgba(212,168,67,0.06) 0%, transparent 400px),
        radial-gradient(circle at 50% 60%, rgba(198,85,59,0.04) 0%, transparent 80px);
}
.candle-reading {
    background:
        radial-gradient(circle at 30% 40%, rgba(212,168,67,0.05) 0%, transparent 350px),
        radial-gradient(circle at 30% 40%, rgba(198,85,59,0.03) 0%, transparent 70px);
}
.candle-observatory {
    background:
        radial-gradient(circle at 70% 30%, rgba(212,168,67,0.04) 0%, transparent 300px),
        radial-gradient(circle at 70% 30%, rgba(198,85,59,0.03) 0%, transparent 60px);
}
.candle-archive {
    background:
        radial-gradient(circle at 50% 80%, rgba(212,168,67,0.05) 0%, transparent 350px),
        radial-gradient(circle at 50% 80%, rgba(198,85,59,0.04) 0%, transparent 80px);
}
.candle-instruments {
    background:
        radial-gradient(circle at 40% 50%, rgba(212,168,67,0.04) 0%, transparent 300px),
        radial-gradient(circle at 40% 50%, rgba(198,85,59,0.02) 0%, transparent 60px);
}
.candle-conversation {
    background:
        radial-gradient(circle at 50% 50%, rgba(212,168,67,0.08) 0%, transparent 400px),
        radial-gradient(circle at 50% 50%, rgba(198,85,59,0.05) 0%, transparent 100px);
}
.candle-egress {
    background:
        radial-gradient(circle at 50% 50%, rgba(212,168,67,0.03) 0%, transparent 250px),
        radial-gradient(circle at 50% 50%, rgba(198,85,59,0.02) 0%, transparent 50px);
}
@keyframes flicker {
    0%   { opacity: 1; }
    20%  { opacity: 0.85; }
    40%  { opacity: 0.95; }
    60%  { opacity: 0.8; }
    80%  { opacity: 0.92; }
    100% { opacity: 1; }
}

/* === REVEAL SYSTEM === */
.reveal-child {
    opacity: 0; transform: translateY(12px);
    transition: opacity 700ms ease-out, transform 700ms ease-out;
    transition-delay: calc(var(--index, 0) * 100ms);
}
.chamber.in-view .reveal-child {
    opacity: 1; transform: translateY(0);
}

/* === PROGRESS BAR === */
.progress-bar {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 4px;
    background: rgba(13,15,20,0.8); z-index: 100;
}
.progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #c6553b, #2e5e8c, #d4a843);
    transition: width 0.15s ease-out;
}

/* === CHAMBER 1: THE AIRLOCK === */
.airlock-content {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; text-align: center;
}
.airlock-title {
    font-family: 'Nunito', sans-serif; font-weight: 800;
    font-size: clamp(3rem, 7vw, 6rem); color: #d4a843;
    letter-spacing: 0.02em;
}
.letter {
    display: inline-block;
    opacity: 0; transform: translateY(12px);
    transition: opacity 400ms ease-out, transform 400ms ease-out;
    transition-delay: calc(var(--index) * 120ms);
}
.chamber-airlock.in-view .letter {
    opacity: 1; transform: translateY(0);
}
.airlock-subtitle {
    font-family: 'Libre Baskerville', serif; font-style: italic;
    font-size: 1rem; color: rgba(201,195,184,0.6); margin-top: 1.2rem;
    --index: 8;
}
.chevron-right {
    position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
    z-index: 2; animation: pulseRight 2s ease-in-out infinite;
}
@keyframes pulseRight {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(8px); }
}

/* === CHAMBER 2: THE READING ROOM === */
.reading-grid {
    display: grid; grid-template-columns: 55% 45%;
    height: 100%; position: relative; z-index: 2;
}
.reading-text {
    border-left: 6px solid #c6553b; padding: 3rem 3rem 3rem 3rem;
    display: flex; flex-direction: column; justify-content: center;
    max-width: 580px; margin-left: 0;
}
.reading-text p {
    font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.75;
    margin-bottom: 1.5rem; color: #c9c3b8;
}
.reading-panel {
    background:
        linear-gradient(135deg, #4a3f35 0%, #3d342c 50%, #4a3f35 100%),
        linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 40%);
    display: flex; align-items: center; justify-content: center;
}
.star-chart {
    width: 60%; max-width: 400px; height: auto;
    filter: drop-shadow(1px 1px 0 rgba(255,255,255,0.05));
}

/* === CHAMBER 3: THE OBSERVATORY === */
.starfield { position: absolute; inset: 0; z-index: 0; }
.obs-window {
    position: absolute; z-index: 2;
    width: 300px; padding: 1.5rem;
    border: 1px solid rgba(212,168,67,0.3);
    background: rgba(26,29,38,0.6);
}
.obs-window-1 { top: 12%; left: 8%; }
.obs-window-2 { top: 38%; right: 12%; }
.obs-window-3 { bottom: 14%; left: 35%; }
.obs-label {
    font-family: 'Quicksand', sans-serif; font-weight: 500;
    font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: #2e5e8c; display: block; margin-bottom: 0.8rem;
}
.obs-window p {
    font-size: 0.95rem; line-height: 1.7; color: #c9c3b8;
}

/* === CHAMBER 4: THE ARCHIVE === */
.archive-shelf {
    display: flex; align-items: flex-end; justify-content: center;
    height: 100%; padding: 0 4vw; gap: 3px;
    position: relative; z-index: 2;
}
.book-spine {
    width: var(--w, 48px); height: var(--h, 85%); flex-shrink: 0;
    background:
        linear-gradient(var(--angle, 135deg), #4a3f35 0%, #3d342c 50%, #4a3f35 100%),
        linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 40%);
    box-shadow: inset 2px 0 4px rgba(0,0,0,0.3), inset -1px 0 2px rgba(255,255,255,0.05);
    position: relative; cursor: pointer;
    transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
    display: flex; align-items: center; justify-content: center;
}
.book-spine:hover { transform: translateY(-20px); }
.spine-title {
    font-family: 'Quicksand', sans-serif; font-weight: 500;
    font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(201,195,184,0.5); writing-mode: vertical-rl;
    text-orientation: mixed; white-space: nowrap;
}

/* === CHAMBER 5: THE INSTRUMENT PANEL === */
.chamber-instruments { position: relative; }
.grid-overlay {
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(46,94,140,0.12) 59px, rgba(46,94,140,0.12) 60px),
        repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(46,94,140,0.12) 59px, rgba(46,94,140,0.12) 60px);
}
.readout {
    position: absolute; z-index: 2;
    border: 1px solid rgba(46,94,140,0.3); padding: 1.5rem;
    max-width: 280px; background: rgba(13,15,20,0.7);
}
.readout-1 { top: 10%; left: 8%; }
.readout-2 { top: 15%; right: 15%; }
.readout-3 { top: 48%; left: 25%; }
.readout-4 { top: 55%; right: 8%; }
.readout-5 { bottom: 15%; left: 10%; }
.readout-6 { bottom: 12%; right: 25%; }
.readout-label {
    font-family: 'Quicksand', sans-serif; font-weight: 500;
    font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: #2e5e8c; display: block; margin-bottom: 0.5rem;
}
.readout-value {
    font-family: 'Nunito', sans-serif; font-weight: 800;
    font-size: 1.4rem; color: #d4a843;
}

/* === CHAMBER 6: THE CONVERSATION PIT === */
.chamber-conversation {
    background: rgba(212,168,67,0.03);
}
.conversation-content {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; max-width: 600px; margin: 0 auto; padding: 2rem;
    gap: 2.5rem;
}
.divider-ornament { flex-shrink: 0; }
.quote { text-align: center; }
.quote p {
    font-family: 'Libre Baskerville', serif; font-style: italic;
    font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.8;
    color: #c9c3b8; margin-bottom: 0.8rem;
}
.quote cite {
    font-family: 'Quicksand', sans-serif; font-weight: 500;
    font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(198,85,59,0.7); font-style: normal;
}

/* === CHAMBER 7: THE EGRESS === */
.chamber-egress {
    background: linear-gradient(180deg, #0d0f14 0%, #1a1d26 100%);
    display: flex; align-items: center; justify-content: center;
}
.egress-content {
    position: relative; z-index: 2;
    text-align: center;
}
.egress-coordinates {
    font-family: 'Quicksand', sans-serif; font-weight: 500;
    font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(46,94,140,0.5); margin-bottom: 1.5rem;
}
.egress-signoff {
    font-family: 'Libre Baskerville', serif; font-style: italic;
    font-size: 1.1rem; color: rgba(201,195,184,0.5);
    --index: 1;
}