/* ============================================
   lurch.dev — styles.css
   Gold-black luxury descent
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: #0a0a0a;
    color: #a69070;
    overflow-x: hidden;
    scroll-behavior: auto;
}

body {
    background: #0a0a0a;
    color: #a69070;
    overflow-x: hidden;
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    line-height: 1.85;
    letter-spacing: 0.015em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Gold Ceiling Line --- */
.ceiling-line {
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    height: 1px;
    background: #c9a84c;
    opacity: 0.4;
    z-index: 100;
    pointer-events: none;
}

/* --- Shimmer Bands --- */
.shimmer-band {
    position: absolute;
    left: 0;
    right: 0;
    height: 200px;
    background: #c9a84c;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
    animation: shimmer-float 15s ease-in-out infinite alternate;
}

.shimmer-band-1 {
    top: 120vh;
}

.shimmer-band-2 {
    top: 320vh;
}

.shimmer-band-3 {
    top: 520vh;
}

@keyframes shimmer-float {
    0% { transform: translateY(0); }
    100% { transform: translateY(20px); }
}

/* --- Main Column with Gold Rails --- */
.column {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.column::before,
.column::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #c9a84c;
    z-index: 99;
    pointer-events: none;
}

.column::before {
    left: calc(50% - 340px);
}

.column::after {
    right: calc(50% - 340px);
}

@media (max-width: 720px) {
    .column::before {
        left: 16px;
    }
    .column::after {
        right: 16px;
    }
    .column {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* --- Section Gaps --- */
.section-gap {
    height: 200px;
}

/* --- Shake Animation --- */
@keyframes lurch-shake {
    0% { transform: translate(0, 0) rotate(0deg); }
    15% { transform: translate(-4px, 2px) rotate(-1.5deg); }
    30% { transform: translate(3px, -1px) rotate(1deg); }
    45% { transform: translate(-2px, -3px) rotate(-0.5deg); }
    60% { transform: translate(4px, 1px) rotate(1.5deg); }
    75% { transform: translate(-1px, 3px) rotate(-1deg); }
    85% { transform: translate(2px, -2px) rotate(0.5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.shakeable {
    cursor: default;
    transition: color 200ms ease;
}

.shakeable.shaking {
    animation: lurch-shake 300ms cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

.shakeable.shaken {
    color: #f5edd6;
}

/* ============================================
   SECTION 1: THE LOBBY
   ============================================ */
.section-lobby {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 0 24px;
}

.lobby-spacer {
    height: 40vh;
}

.lobby-title {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 4.5rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.1;
    color: #f5edd6;
}

.lobby-subtitle {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.6rem, 0.8vw, 0.72rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5c4f3a;
    margin-top: 32px;
}

.lobby-silence {
    height: 300px;
}

/* ============================================
   SECTION 2: THE DIRECTORY
   ============================================ */
.section-directory {
    padding: 80px 24px;
}

.directory-entry {
    display: flex;
    align-items: baseline;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(201, 168, 76, 0.07);
}

.directory-entry:last-child {
    border-bottom: none;
}

.directory-label {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.6rem, 0.8vw, 0.72rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5c4f3a;
    flex-shrink: 0;
    width: 48px;
}

.directory-name {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
    color: #c9a84c;
}

/* ============================================
   SECTION 3: THE ELEVATOR
   ============================================ */
.section-elevator {
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.elevator-shaft {
    position: relative;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.elevator-square {
    position: absolute;
    border: 1px solid #c9a84c;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.elevator-sq-1 {
    width: 64px;
    height: 64px;
    background: #c9a84c;
    border-color: #c9a84c;
    opacity: 1;
}

.elevator-sq-2 {
    width: 120px;
    height: 120px;
    opacity: 0.6;
}

.elevator-sq-3 {
    width: 176px;
    height: 176px;
    opacity: 0.3;
}

.elevator-sq-4 {
    width: 232px;
    height: 232px;
    opacity: 0.15;
}

.elevator-sq-5 {
    width: 280px;
    height: 280px;
    opacity: 0.07;
}

/* ============================================
   SECTION 4: THE FLOOR
   ============================================ */
.section-floor {
    padding: 80px 24px;
}

.floor-content {
    border-left: 3px solid #c9a84c;
    padding-left: 24px;
}

.floor-heading {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
    color: #e8dcc8;
    margin-bottom: 48px;
}

.floor-text {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    line-height: 1.85;
    letter-spacing: 0.015em;
    color: #a69070;
    text-align: justify;
    margin-bottom: 32px;
}

.floor-text:last-child {
    margin-bottom: 0;
}

/* ============================================
   SECTION 5: THE BASEMENT
   ============================================ */
.section-basement {
    padding: 80px 24px;
}

.basement-heading {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
    color: #e8dcc8;
    margin-bottom: 48px;
    text-align: center;
}

.basement-grid {
    display: grid;
    grid-template-columns: repeat(3, 120px);
    gap: 24px;
    justify-content: center;
}

.basement-cell {
    width: 120px;
    height: 120px;
    background: #111111;
    position: relative;
    overflow: hidden;
}

/* Solid gold cell */
.cell-solid {
    background: #c9a84c;
}

/* Gold frame cell */
.cell-frame {
    background: #0a0a0a;
    border: 1px solid #c9a84c;
}

/* Diagonal line cell */
.cell-diagonal {
    background: linear-gradient(45deg, transparent 49%, #c9a84c 49%, #c9a84c 51%, transparent 51%);
}

/* Text cell */
.cell-text {
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cell-text span {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5c4f3a;
}

/* Crosshatch cell */
.cell-crosshatch {
    background:
        linear-gradient(45deg, transparent 49%, #c9a84c 49%, #c9a84c 51%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, #c9a84c 49%, #c9a84c 51%, transparent 51%);
    background-size: 16px 16px;
    opacity: 0.5;
}

/* Half-fill cell */
.cell-half {
    background: linear-gradient(to top, #c9a84c 50%, #0a0a0a 50%);
}

/* ============================================
   SECTION 6: THE SUB-BASEMENT
   ============================================ */
.section-subbasement {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 24px 80px;
    text-align: center;
}

.subbasement-void {
    flex: 1;
}

.subbasement-text {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.6rem, 0.8vw, 0.72rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5c4f3a;
}