/* ============================================
   ncbd.dev - Forbidden Rare-Book Horizontal Archive
   ============================================ */
:root {
    --scholars-burgundy: #6B1D35;
    --dusty-mauve: #7A5468;
    --ochre-wash: #C9A84C;
    --deep-parchment: #3D1A28;
    --bone-white: #F5EFDF;
    --crimson-mid: #8A3045;
    --warm-linen: #D4C5A9;
    --archive-black: #1A0E14;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; }
body {
    background: var(--archive-black);
    color: var(--bone-white);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.7;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100vh;
}

/* ==============================
   HORIZONTAL SCROLL RIBBON
   ============================== */
.scroll-ribbon {
    display: flex;
    height: 100vh;
    width: 500vw;
}

/* ==============================
   ZONE BASICS
   ============================== */
.zone {
    position: relative;
    min-width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==============================
   WATERCOLOR WASHES
   ============================== */
.watercolor-wash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.wash--1::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    top: 20%;
    left: 30%;
    background: radial-gradient(circle, rgba(107, 29, 53, 0.15), transparent 70%);
    filter: blur(40px);
}
.wash--2::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 300px;
    top: 10%;
    left: 20%;
    background: radial-gradient(ellipse, rgba(201, 168, 76, 0.1), transparent 70%);
    filter: blur(50px);
}
.wash--2::after {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    bottom: 15%;
    right: 10%;
    background: radial-gradient(circle, rgba(122, 84, 104, 0.12), transparent 70%);
    filter: blur(40px);
}
.wash--3::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 400px;
    top: 30%;
    left: 40%;
    background: radial-gradient(ellipse, rgba(107, 29, 53, 0.1), transparent 70%);
    filter: blur(45px);
}
.wash--4::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    top: 10%;
    left: 20%;
    background: radial-gradient(circle, rgba(201, 168, 76, 0.08), transparent 70%);
    filter: blur(60px);
}

/* ==============================
   ZONE 1: ENTRY
   ============================== */
.zone--entry {
    background: var(--archive-black);
}
.entry-content {
    position: relative;
    z-index: 2;
    text-align: center;
}
.entry-title {
    font-family: 'Bodoni Moda', serif;
    font-weight: 900;
    font-size: clamp(4rem, 15vw, 12rem);
    color: var(--bone-white);
    letter-spacing: -0.03em;
    line-height: 0.9;
}
.entry-dot {
    font-family: 'Bodoni Moda', serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: var(--ochre-wash);
    display: block;
    margin-top: -0.5rem;
    letter-spacing: 0.1em;
}
.entry-whisper {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 300;
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    color: var(--dusty-mauve);
    margin-top: 2rem;
    text-transform: lowercase;
    opacity: 0.5;
}

/* ==============================
   ZONE 2: THE DESK
   ============================== */
.zone--desk {
    min-width: 150vw;
    padding: clamp(3rem, 5vh, 6rem) clamp(2rem, 5vw, 4rem);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: flex-start;
    background: var(--archive-black);
}
.desk-fragment {
    position: relative;
    z-index: 2;
    max-width: 400px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid rgba(201, 168, 76, 0.15);
    background: rgba(26, 14, 20, 0.8);
    opacity: 0;
    transform: translateY(20px) rotate(0deg);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.desk-fragment.visible {
    opacity: 1;
    transform: translateY(0);
}
.desk-fragment--1 {
    margin-top: 15vh;
    transform: rotate(-1deg) translateY(20px);
}
.desk-fragment--1.visible {
    transform: rotate(-1deg) translateY(0);
}
.desk-fragment--2 {
    margin-top: 40vh;
    transform: rotate(1.5deg) translateY(20px);
}
.desk-fragment--2.visible {
    transform: rotate(1.5deg) translateY(0);
}
.desk-fragment--3 {
    margin-top: 8vh;
    transform: rotate(-0.5deg) translateY(20px);
}
.desk-fragment--3.visible {
    transform: rotate(-0.5deg) translateY(0);
}

.frag-label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    color: var(--ochre-wash);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(201, 168, 76, 0.15);
}
.frag-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    line-height: 1.8;
    color: var(--warm-linen);
    margin-bottom: 0.75rem;
}
.frag-note {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--dusty-mauve);
    opacity: 0.6;
}
.frag-quote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: var(--bone-white);
    line-height: 1.7;
    padding-left: 1rem;
    border-left: 2px solid var(--ochre-wash);
}

/* ==============================
   ZONE 3: THE STACKS
   ============================== */
.zone--stacks {
    min-width: 120vw;
    background: var(--deep-parchment);
    padding: clamp(3rem, 5vh, 4rem) clamp(2rem, 4vw, 4rem);
}
.stack-column {
    position: relative;
    z-index: 2;
    display: flex;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: flex-start;
}
.stack-card {
    max-width: 340px;
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid rgba(201, 168, 76, 0.12);
    background: rgba(26, 14, 20, 0.6);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.stack-card.visible {
    opacity: 1;
    transform: translateY(0);
}
.stack-id {
    display: block;
    font-family: 'Bodoni Moda', serif;
    font-weight: 900;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--ochre-wash);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    opacity: 0.6;
}
.stack-title {
    font-family: 'Bodoni Moda', serif;
    font-weight: 900;
    font-size: clamp(1.3rem, 3vw, 2rem);
    color: var(--bone-white);
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}
.stack-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--warm-linen);
}

/* ==============================
   ZONE 4: THE SANCTUM
   ============================== */
.zone--sanctum {
    background: var(--archive-black);
}
.sanctum-content {
    position: relative;
    z-index: 2;
    max-width: 550px;
    text-align: center;
    padding: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}
.sanctum-content.visible {
    opacity: 1;
    transform: translateY(0);
}
.sanctum-label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 300;
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    color: var(--ochre-wash);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    opacity: 0.5;
}
.sanctum-quote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    line-height: 1.8;
    color: var(--bone-white);
    margin-bottom: 2rem;
}
.sanctum-sigil {
    opacity: 0.4;
}

/* ==============================
   ZONE 5: EXIT
   ============================== */
.zone--exit {
    background: var(--archive-black);
}
.exit-content {
    position: relative;
    z-index: 2;
    text-align: center;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1s ease, transform 1s ease;
}
.exit-content.visible {
    opacity: 1;
    transform: translateY(0);
}
.exit-domain {
    display: block;
    font-family: 'Bodoni Moda', serif;
    font-weight: 900;
    font-size: clamp(2rem, 6vw, 4rem);
    color: var(--bone-white);
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}
.exit-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--dusty-mauve);
    opacity: 0.5;
}

/* ==============================
   RESPONSIVE
   ============================== */
@media (max-width: 768px) {
    .zone--desk {
        flex-direction: column;
        min-width: 200vw;
        align-items: center;
    }
    .desk-fragment {
        max-width: 85vw;
    }
    .desk-fragment--1, .desk-fragment--2, .desk-fragment--3 {
        margin-top: 5vh;
    }
    .stack-column {
        flex-direction: column;
    }
    .stack-card {
        max-width: 85vw;
    }
}