/* munju.im - Twilight Forest Clearing */
/* Flat-design, mysterious-moody, sunset-warm palette */
/* Zero gradients, zero shadows, zero images */

/* === RESET & BASE === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: 'Commissioner', sans-serif;
    font-weight: 350;
    letter-spacing: 0.02em;
    line-height: 1.75;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: #f5e6d0;
    background: #1a1a2e;
    overflow-x: hidden;
}

/* === NAVIGATION GLYPH === */
#nav-glyph {
    position: fixed;
    top: 1.5rem;
    left: 1.5rem;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #e07b4f;
    cursor: pointer;
    z-index: 1000;
    transition: color 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
}

#nav-glyph:hover {
    color: #d4a24e;
}

/* === CLEARING BASE === */
.clearing {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* === CLEARING BACKGROUNDS === */
.clearing-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.clearing-1 .clearing-bg { background: #c45d32; }
.clearing-2 .clearing-bg { background: #6b3654; }
.clearing-3 .clearing-bg { background: #1d4e5e; }
.clearing-4 .clearing-bg { background: #1a1a2e; }

/* === WATERMARK GLYPHS === */
.clearing-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: 40vw;
    opacity: 0.08;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.clearing-1 .clearing-watermark { color: #8b3a1f; }
.clearing-2 .clearing-watermark { color: #4a2038; }
.clearing-3 .clearing-watermark { color: #133640; }
.clearing-4 .clearing-watermark { color: #12121f; }

/* === TREELINES === */
.treeline {
    position: absolute;
    left: 0;
    width: 100%;
    height: 70%;
    top: 0;
    z-index: 2;
    transition: clip-path 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Collapsed state (before reveal) */
.treeline.collapsed {
    clip-path: polygon(0% 100%, 5% 100%, 10% 100%, 15% 100%, 20% 100%, 25% 100%, 30% 100%, 35% 100%, 40% 100%, 45% 100%, 50% 100%, 55% 100%, 60% 100%, 65% 100%, 70% 100%, 75% 100%, 80% 100%, 85% 100%, 90% 100%, 95% 100%, 100% 100%);
}

/* Treeline 1: Warm silhouette */
.treeline-1 {
    background: #8b3a1f;
    clip-path: polygon(0% 100%, 0% 55%, 3% 48%, 5% 42%, 7% 38%, 9% 44%, 11% 40%, 14% 35%, 16% 30%, 18% 35%, 20% 42%, 22% 38%, 25% 32%, 27% 28%, 29% 33%, 31% 40%, 33% 36%, 36% 30%, 38% 25%, 40% 30%, 42% 38%, 44% 45%, 46% 50%, 48% 46%, 50% 42%, 52% 38%, 55% 32%, 57% 28%, 59% 34%, 61% 40%, 63% 35%, 65% 30%, 67% 26%, 69% 32%, 71% 38%, 73% 42%, 75% 38%, 78% 33%, 80% 28%, 82% 34%, 84% 40%, 86% 36%, 88% 32%, 90% 38%, 92% 44%, 94% 40%, 96% 45%, 98% 50%, 100% 48%, 100% 100%);
}

/* Treeline 2: Dark plum silhouette */
.treeline-2 {
    background: #4a2038;
    clip-path: polygon(0% 100%, 0% 52%, 2% 46%, 4% 40%, 6% 36%, 8% 42%, 10% 38%, 13% 32%, 15% 28%, 17% 34%, 19% 40%, 21% 36%, 24% 30%, 26% 26%, 28% 22%, 30% 28%, 32% 36%, 34% 32%, 37% 26%, 39% 22%, 41% 28%, 43% 36%, 45% 42%, 47% 48%, 49% 44%, 51% 38%, 53% 34%, 56% 28%, 58% 24%, 60% 30%, 62% 38%, 64% 34%, 66% 28%, 68% 24%, 70% 30%, 72% 36%, 74% 42%, 76% 38%, 79% 32%, 81% 26%, 83% 32%, 85% 40%, 87% 36%, 89% 30%, 91% 36%, 93% 42%, 95% 38%, 97% 44%, 99% 48%, 100% 46%, 100% 100%);
}

/* Treeline 3: Dark teal silhouette */
.treeline-3 {
    background: #133640;
    clip-path: polygon(0% 100%, 0% 58%, 3% 50%, 5% 44%, 7% 40%, 9% 46%, 11% 42%, 14% 36%, 16% 32%, 18% 38%, 20% 46%, 22% 42%, 25% 36%, 27% 30%, 29% 26%, 31% 32%, 33% 40%, 35% 36%, 38% 30%, 40% 26%, 42% 32%, 44% 40%, 46% 48%, 48% 52%, 50% 48%, 52% 44%, 54% 38%, 57% 32%, 59% 28%, 61% 34%, 63% 42%, 65% 38%, 67% 32%, 69% 28%, 71% 34%, 73% 40%, 75% 46%, 77% 42%, 80% 36%, 82% 30%, 84% 36%, 86% 42%, 88% 38%, 90% 34%, 92% 40%, 94% 46%, 96% 42%, 98% 48%, 100% 52%, 100% 100%);
}

/* Treeline 4: Charcoal silhouette */
.treeline-4 {
    background: #12121f;
    clip-path: polygon(0% 100%, 0% 60%, 3% 52%, 5% 46%, 7% 42%, 9% 48%, 11% 44%, 14% 38%, 16% 34%, 18% 40%, 20% 48%, 22% 44%, 25% 38%, 27% 32%, 29% 28%, 31% 34%, 33% 42%, 35% 38%, 38% 32%, 40% 28%, 42% 34%, 44% 42%, 46% 50%, 48% 54%, 50% 50%, 52% 46%, 54% 40%, 57% 34%, 59% 30%, 61% 36%, 63% 44%, 65% 40%, 67% 34%, 69% 30%, 71% 36%, 73% 42%, 75% 48%, 77% 44%, 80% 38%, 82% 32%, 84% 38%, 86% 44%, 88% 40%, 90% 36%, 92% 42%, 94% 48%, 96% 44%, 98% 50%, 100% 54%, 100% 100%);
}

/* === GROUND STRIPS === */
.clearing-1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5%;
    background: #3d2518;
    z-index: 2;
}

/* === PARTICLES CONTAINER === */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e07b4f;
    transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.particle.gold {
    background: #d4a24e;
}

/* === CLEARING CONTENT === */
.clearing-content {
    position: absolute;
    bottom: 10%;
    left: clamp(2rem, 8vw, 6rem);
    max-width: 42ch;
    z-index: 4;
}

.headline {
    font-family: 'Commissioner', sans-serif;
    font-weight: 200;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: clamp(2.2rem, 6vw, 5rem);
    color: #e07b4f;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

/* Korean headlines use Noto Sans KR */
.clearing-1 .headline,
.clearing-2 .headline,
.clearing-3 .headline,
.clearing-4 .headline {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: clamp(2.4rem, 6.6vw, 5.5rem);
    text-transform: none;
    letter-spacing: 0.05em;
}

.body-text {
    font-family: 'Commissioner', sans-serif;
    font-weight: 350;
    letter-spacing: 0.02em;
    line-height: 1.75;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: #f5e6d0;
    margin-bottom: 1.2rem;
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.body-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/* === ACCENT TEXT === */
.accent-text {
    font-family: 'Commissioner', sans-serif;
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* === SPACERS === */
.spacer {
    width: 100%;
    height: 100vh;
}

.spacer-1-2 { background: #854038; }
.spacer-2-3 { background: #3d3048; }
.spacer-3-4 { background: #162838; }
.spacer-end { background: #12121f; }

/* === LEAF CUTOUTS === */
.leaf {
    position: absolute;
    z-index: 3;
    background: #d4a24e;
    pointer-events: none;
}

.leaf-1 {
    width: 40px;
    height: 20px;
    top: 20%;
    right: 8%;
    clip-path: ellipse(50% 50% at 50% 50%);
    transform: rotate(-35deg);
}

.leaf-2 {
    width: 35px;
    height: 16px;
    top: 35%;
    right: 15%;
    clip-path: ellipse(50% 50% at 50% 50%);
    transform: rotate(25deg);
}

.leaf-3 {
    width: 30px;
    height: 14px;
    bottom: 45%;
    left: 85%;
    clip-path: ellipse(50% 50% at 50% 50%);
    transform: rotate(-60deg);
}

/* === CLEARING-SPECIFIC TEXT COLORS === */
.clearing-1 .body-text { color: #f5e6d0; }
.clearing-2 .body-text { color: #e07b4f; }
.clearing-3 .body-text { color: #f5e6d0; }
.clearing-4 .body-text { color: #d4a24e; }

.clearing-2 .headline { color: #e07b4f; }
.clearing-3 .headline { color: #e07b4f; }
.clearing-4 .headline { color: #e07b4f; }

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .clearing-content {
        bottom: 8%;
        left: 1.5rem;
        max-width: calc(100% - 3rem);
    }

    #nav-glyph {
        top: 1rem;
        left: 1rem;
    }

    .clearing-watermark {
        font-size: 60vw;
    }
}