:root {
    /* Monochrome Palette with Earthy Warmth */
    --charcoal-loam: #1a1812;
    --peat: #2d2a22;
    --granite-dust: #6b6459;
    --morning-mist: #d4cec3;
    --cloud-bone: #eae6df;
    --chalk: #f5f2ec;
    --moss-vein: #4a6741;
    --bracket-fungus: #8b5e3c;

    /* Typography */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Lora', Georgia, serif;
    --font-accent: 'IBM Plex Mono', 'Courier New', monospace;

    /* Spacing */
    --section-pad: clamp(3rem, 6vw, 6rem);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: var(--cloud-bone);
    color: var(--charcoal-loam);
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.72;
    overflow-x: hidden;
}

/* ===== ZONE: SUMMIT (HERO) ===== */
.zone-summit {
    position: relative;
    min-height: 110vh;
    background: var(--cloud-bone);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    filter: grayscale(100%) sepia(20%) contrast(1.1) brightness(0.95);
}

.mountain-landscape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mountain-ridge {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
}

.ridge-7 path { fill: var(--morning-mist); }
.ridge-6 path { fill: #b8b0a3; }
.ridge-5 path { fill: #9a9285; }
.ridge-4 path { fill: var(--granite-dust); }
.ridge-3 path { fill: #524b40; }
.ridge-2 path { fill: var(--peat); }
.ridge-1 path { fill: var(--charcoal-loam); }

/* Fog layers between ridges */
.fog-layer {
    position: absolute;
    left: -10%;
    width: 120%;
    height: 30%;
    pointer-events: none;
}

.fog-1 {
    bottom: 50%;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(244, 242, 236, 0.08) 20%,
        rgba(244, 242, 236, 0.12) 50%,
        rgba(244, 242, 236, 0.08) 80%,
        transparent 100%
    );
    animation: fogDrift1 60s ease-in-out infinite;
}

.fog-2 {
    bottom: 38%;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(244, 242, 236, 0.1) 30%,
        rgba(244, 242, 236, 0.15) 60%,
        rgba(244, 242, 236, 0.1) 90%,
        transparent 100%
    );
    animation: fogDrift2 45s ease-in-out infinite;
}

.fog-3 {
    bottom: 22%;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(244, 242, 236, 0.06) 25%,
        rgba(244, 242, 236, 0.1) 55%,
        rgba(244, 242, 236, 0.06) 85%,
        transparent 100%
    );
    animation: fogDrift3 55s ease-in-out infinite;
}

@keyframes fogDrift1 {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5%); }
}

@keyframes fogDrift2 {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-4%); }
}

@keyframes fogDrift3 {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3%); }
}

/* Fog Particles */
.fog-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.fog-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244,242,236,0.12) 0%, transparent 70%);
}

.fp-1 { width: 180px; height: 180px; top: 10%; left: 15%; animation: particleDrift1 28s ease-in-out infinite; }
.fp-2 { width: 120px; height: 120px; top: 30%; left: 60%; animation: particleDrift2 34s ease-in-out infinite; }
.fp-3 { width: 200px; height: 200px; top: 50%; left: 30%; animation: particleDrift3 22s ease-in-out infinite; }
.fp-4 { width: 90px; height: 90px; top: 20%; left: 80%; animation: particleDrift4 40s ease-in-out infinite; }
.fp-5 { width: 150px; height: 150px; top: 60%; left: 10%; animation: particleDrift1 32s ease-in-out infinite reverse; }
.fp-6 { width: 110px; height: 110px; top: 40%; left: 45%; animation: particleDrift2 26s ease-in-out infinite reverse; }
.fp-7 { width: 160px; height: 160px; top: 70%; left: 70%; animation: particleDrift3 38s ease-in-out infinite; }
.fp-8 { width: 80px; height: 80px; top: 15%; left: 40%; animation: particleDrift4 30s ease-in-out infinite reverse; }

@keyframes particleDrift1 {
    0%, 100% { transform: translate(0, 0); opacity: 0.3; }
    25% { transform: translate(30px, -20px); opacity: 0.6; }
    50% { transform: translate(60px, 10px); opacity: 0.4; }
    75% { transform: translate(20px, 30px); opacity: 0.5; }
}

@keyframes particleDrift2 {
    0%, 100% { transform: translate(0, 0); opacity: 0.4; }
    25% { transform: translate(-20px, 25px); opacity: 0.6; }
    50% { transform: translate(-40px, -10px); opacity: 0.3; }
    75% { transform: translate(-15px, -30px); opacity: 0.5; }
}

@keyframes particleDrift3 {
    0%, 100% { transform: translate(0, 0); opacity: 0.35; }
    33% { transform: translate(40px, 15px); opacity: 0.55; }
    66% { transform: translate(-20px, -25px); opacity: 0.4; }
}

@keyframes particleDrift4 {
    0%, 100% { transform: translate(0, 0); opacity: 0.25; }
    50% { transform: translate(-30px, 20px); opacity: 0.5; }
}

/* Hero Title */
.hero-title {
    position: relative;
    z-index: 10;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 5.5vw, 5rem);
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--chalk);
    text-shadow:
        0 2px 8px rgba(26, 24, 18, 0.4),
        0 0 40px rgba(26, 24, 18, 0.2);
    user-select: none;
}

.letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    animation: letterReveal 0.6s ease forwards;
    animation-delay: calc(var(--i) * 80ms + 0.5s);
}

@keyframes letterReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title.breathing {
    animation: titleBreathe 1.2s ease-in-out forwards;
}

@keyframes titleBreathe {
    0% { letter-spacing: -0.015em; }
    50% { letter-spacing: 0.02em; }
    100% { letter-spacing: -0.015em; }
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 8vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: var(--moss-vein);
    animation: seedDrift 3s ease-in-out infinite;
    opacity: 0.7;
}

@keyframes seedDrift {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(12px); }
}

.scroll-indicator.hidden {
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* ===== ROOT BORDERS ===== */
.root-border {
    position: relative;
    width: 100%;
    height: 60px;
    overflow: hidden;
}

.root-border svg {
    width: 100%;
    height: 100%;
}

/* ===== ZONE: TREELINE ===== */
.zone-treeline {
    position: relative;
    background: linear-gradient(to bottom,
        var(--peat) 0%,
        #2a3525 30%,
        #1e2b1a 70%,
        var(--peat) 100%
    );
    color: var(--chalk);
    padding: var(--section-pad) 0;
    min-height: 100vh;
}

.treeline-content {
    position: relative;
    max-width: min(88%, 960px);
    margin-inline: auto;
    padding-left: 55%;
    padding-right: 0;
}

.clearing {
    position: relative;
    padding: var(--section-pad);
    margin-bottom: 4rem;
}

.clearing-secondary {
    margin-left: -10%;
}

.clearing-border {
    position: relative;
    padding: clamp(2rem, 4vw, 4rem);
    background: rgba(45, 42, 34, 0.6);
    border-radius: 2px;
}

.branch-border {
    position: absolute;
    left: -5%;
    width: 110%;
    height: 30px;
}

.branch-top {
    top: -15px;
}

.branch-bottom {
    bottom: -15px;
}

.section-heading {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    letter-spacing: -0.015em;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--cloud-bone);
}

.body-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.72;
    margin-bottom: 1.5em;
}

.body-text em {
    font-style: italic;
    color: var(--moss-vein);
}

.caption-text {
    font-family: var(--font-accent);
    font-weight: 300;
    font-size: clamp(0.72rem, 1vw, 0.85rem);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--granite-dust);
    display: block;
    margin-top: 2rem;
}

/* Fern Decorations */
.margin-fern {
    position: sticky;
    top: 40vh;
    z-index: 2;
    pointer-events: none;
}

.fern-left {
    position: absolute;
    left: 2%;
    top: 20%;
}

.fern-right {
    position: absolute;
    right: 2%;
    top: 60%;
}

.fern-frond path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1s ease;
}

.fern-frond.animate path {
    stroke-dashoffset: 0;
}

.fern-leaf {
    transition-delay: calc(var(--leaf-i, 0) * 80ms);
}

.fl-1 { --leaf-i: 1; }
.fl-2 { --leaf-i: 2; }
.fl-3 { --leaf-i: 3; }
.fl-4 { --leaf-i: 4; }
.fl-5 { --leaf-i: 5; }
.fl-6 { --leaf-i: 6; }
.fl-7 { --leaf-i: 7; }
.fl-8 { --leaf-i: 8; }
.fl-9 { --leaf-i: 9; }
.fl-10 { --leaf-i: 10; }
.fl-11 { --leaf-i: 11; }
.fl-12 { --leaf-i: 12; }

/* ===== ZONE: UNDERGROWTH ===== */
.zone-undergrowth {
    position: relative;
    background: linear-gradient(to bottom,
        var(--peat) 0%,
        var(--morning-mist) 15%,
        var(--cloud-bone) 50%,
        var(--morning-mist) 85%,
        var(--peat) 100%
    );
    color: var(--charcoal-loam);
    padding: var(--section-pad) 0;
    min-height: 100vh;
}

.undergrowth-content {
    position: relative;
    max-width: min(680px, 88vw);
    margin-inline: auto;
    padding: 0 1.5rem;
}

.undergrowth-content .section-heading {
    color: var(--charcoal-loam);
}

.undergrowth-content .body-text em {
    color: var(--moss-vein);
}

/* Pull Quote */
.pull-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.4;
    color: var(--granite-dust);
    border-left: 3px solid var(--moss-vein);
    padding: 1.5rem 0 1.5rem 2rem;
    margin: 2.5rem 0;
}

.pull-quote p {
    margin: 0;
}

/* Mushroom Decorations */
.margin-mushroom {
    opacity: 0;
    transition: opacity 0.6s ease;
    cursor: pointer;
}

.margin-mushroom.visible {
    opacity: 0.6;
}

.margin-mushroom:hover {
    opacity: 1;
}

.mushroom-toadstool {
    float: right;
    margin: 0 -60px 1rem 1rem;
}

.mushroom-bracket {
    float: left;
    margin: 0 1rem 1rem -60px;
}

.mushroom-cluster {
    float: right;
    margin: 0 -50px 1rem 1rem;
}

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

.shaking {
    animation: goblin-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* Pebbles */
.pebbles {
    display: flex;
    justify-content: center;
    margin: 3rem 0;
    opacity: 0.6;
}

/* Beetle Easter Egg */
.beetle-container {
    position: relative;
    height: 20px;
    margin-top: 4rem;
    overflow: hidden;
}

.beetle {
    position: absolute;
    left: -20px;
    bottom: 4px;
    animation: beetleCrawl 45s linear infinite;
    cursor: pointer;
    opacity: 0.5;
}

.beetle:hover {
    opacity: 0.9;
}

.beetle.startled {
    animation: beetleCrawlFast 8s linear infinite;
}

@keyframes beetleCrawl {
    0% { left: -20px; }
    100% { left: calc(100% + 20px); }
}

@keyframes beetleCrawlFast {
    0% { left: -20px; }
    100% { left: calc(100% + 20px); }
}

/* ===== ZONE: THE HOLLOW ===== */
.zone-hollow {
    position: relative;
    background: linear-gradient(to bottom,
        var(--peat) 0%,
        var(--charcoal-loam) 30%,
        #0f0e0a 100%
    );
    color: var(--chalk);
    padding: var(--section-pad) 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hollow-content {
    max-width: min(560px, 80vw);
    margin-inline: auto;
    text-align: center;
    padding: 0 1.5rem;
}

.hollow-heading {
    color: var(--chalk);
    margin-bottom: 2rem;
}

.hollow-text {
    color: var(--morning-mist);
}

.hollow-text em {
    color: var(--moss-vein);
}

.hollow-sigil {
    margin: 3rem auto;
    display: flex;
    justify-content: center;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.hollow-sigil.visible {
    opacity: 1;
}

.hollow-final {
    color: var(--granite-dust);
    margin-top: 2rem;
    text-align: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .treeline-content {
        padding-left: 0;
        max-width: 92%;
    }

    .clearing-secondary {
        margin-left: 0;
    }

    .margin-fern {
        position: relative;
        top: auto;
        display: flex;
        justify-content: center;
        margin: 2rem 0;
    }

    .fern-left, .fern-right {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
    }

    .mushroom-toadstool,
    .mushroom-bracket,
    .mushroom-cluster {
        float: none;
        margin: 2rem auto;
        display: flex;
        justify-content: center;
    }

    .fog-particle:nth-child(n+5) {
        display: none;
    }

    .ridge-7, .ridge-6, .ridge-5 {
        display: none;
    }
}

@media (max-width: 480px) {
    .zone-summit {
        min-height: 90vh;
    }

    .undergrowth-content {
        max-width: 92vw;
    }

    .hollow-content {
        max-width: 88vw;
    }

    .mushroom-svg {
        width: 32px;
        height: 32px;
    }

    .fog-particle:nth-child(n+4) {
        display: none;
    }
}