/* namu.farm - Nocturnal Digital Arboretum */
/* Color Palette:
   Abyss: #0d1b2a | Midnight Forest: #1b263b | Pre-Dawn: #162447
   Moonlit Bone: #e0e1dd | Mist Blue: #778da9 | Twilight Slate: #415a77
   Bioluminescent: #1f7a8c | Lantern Amber: #c77b30 | Digital Moss: #2d6a4f
*/

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

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

body {
    background-color: #0d1b2a;
    color: #778da9;
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* =========================================
   SCROLL PROGRESS INDICATOR
   ========================================= */
#scroll-progress {
    position: fixed;
    top: 0;
    right: 12px;
    width: 2px;
    height: 100vh;
    background: rgba(65, 90, 119, 0.15);
    z-index: 100;
}

#scroll-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: #415a77;
    transition: height 0.1s linear;
}

.scroll-notch {
    position: absolute;
    left: -3px;
    width: 8px;
    height: 2px;
    background: #415a77;
    opacity: 0.6;
}

/* =========================================
   LEAF PARTICLE CANVAS
   ========================================= */
#leaf-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
}

/* =========================================
   ZONE BASE STYLES
   ========================================= */
.zone {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 2;
}

/* =========================================
   ROOT ZONE
   ========================================= */
#root-zone {
    height: 100vh;
    background: #0d1b2a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.root-line {
    position: absolute;
    bottom: 18vh;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    width: 0;
    background: #e0e1dd;
    transition: width 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.root-line.active {
    width: 60vw;
}

.root-content {
    text-align: center;
    z-index: 3;
}

.domain-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(2.8rem, 7vw, 6rem);
    letter-spacing: 0.04em;
    line-height: 1.15;
    color: #e0e1dd;
    margin-bottom: 1.5rem;
}

.korean-subtitle {
    font-family: 'Noto Serif KR', serif;
    font-weight: 300;
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    color: #c77b30;
    letter-spacing: 0.06em;
    opacity: 0;
    transition: opacity 2s ease 1s;
}

.korean-subtitle.revealed {
    opacity: 1;
}

.leaf-decoration {
    position: absolute;
    z-index: 2;
}

.leaf-deco-ginkgo-1 {
    bottom: 25vh;
    left: 8vw;
    transform: rotate(-15deg);
}

.leaf-deco-ginkgo-2 {
    bottom: 30vh;
    right: 12vw;
    transform: rotate(20deg);
}

/* =========================================
   TRUNK ZONE
   ========================================= */
#trunk-zone {
    min-height: 200vh;
    background: #1b263b;
    position: relative;
    padding: 13vh 0;
}

.trunk-silhouette {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15vw;
    min-width: 100px;
    height: 100%;
    z-index: 1;
    opacity: 0.4;
}

.trunk-svg {
    width: 100%;
    height: 100%;
}

.tree-ring-container {
    position: relative;
    width: 80vmin;
    max-width: 500px;
    margin: 8vh auto 21vh;
    z-index: 3;
    opacity: 0.7;
}

.tree-ring-svg {
    width: 100%;
    height: auto;
}

.trunk-text {
    position: relative;
    max-width: 28ch;
    z-index: 3;
    margin-bottom: 21vh;
}

.trunk-text-left {
    margin-left: 8vw;
}

.trunk-text-right {
    margin-left: auto;
    margin-right: 8vw;
}

.body-text {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: #778da9;
}

.bamboo-divider {
    position: absolute;
    z-index: 2;
}

.bamboo-divider-1 {
    left: 35vw;
    top: 40%;
}

.bamboo-divider-2 {
    right: 25vw;
    top: 70%;
}

/* =========================================
   CANOPY ZONE
   ========================================= */
#canopy-zone {
    min-height: 200vh;
    background: linear-gradient(180deg, #1b263b 0%, #162447 100%);
    position: relative;
    padding: 13vh 0;
}

.leaf-cluster {
    position: relative;
    max-width: 32ch;
    z-index: 3;
}

.cluster-1 {
    margin-left: 15vw;
    margin-bottom: 21vh;
    padding-top: 8vh;
}

.cluster-2 {
    margin-left: auto;
    margin-right: 10vw;
    margin-bottom: 34vh;
}

.cluster-3 {
    margin-left: 22vw;
    margin-bottom: 21vh;
}

.cluster-4 {
    margin-left: auto;
    margin-right: 15vw;
    margin-bottom: 13vh;
}

.cluster-sub {
    margin-top: 13vh;
}

.cluster-leaf {
    position: absolute;
    z-index: 1;
}

.cluster-1 .cluster-leaf {
    top: -10px;
    right: -40px;
}

.cluster-leaf-maple {
    bottom: -20px;
    left: -50px;
    top: auto !important;
    right: auto !important;
}

.pine-texture-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.pine-tex {
    position: absolute;
}

.pine-tex-1 { top: 10%; left: 5%; }
.pine-tex-2 { top: 25%; right: 8%; }
.pine-tex-3 { top: 45%; left: 12%; }
.pine-tex-4 { top: 65%; right: 15%; }
.pine-tex-5 { top: 80%; left: 20%; }

.zelkova-deco {
    position: absolute;
    bottom: 10vh;
    right: 5vw;
    z-index: 1;
}

/* =========================================
   CROWN ZONE
   ========================================= */
#crown-zone {
    min-height: 100vh;
    background: #162447;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 13vh 8vw;
}

.crown-content {
    z-index: 3;
    max-width: 60ch;
    margin-bottom: 34vh;
}

.crown-headline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    letter-spacing: 0.04em;
    line-height: 1.15;
    color: #e0e1dd;
    margin-bottom: 2rem;
}

.crown-korean {
    font-family: 'Noto Serif KR', serif;
    font-weight: 300;
    font-size: clamp(1.2rem, 3vw, 2rem);
    color: #c77b30;
    letter-spacing: 0.04em;
    margin-bottom: 1.5rem;
}

.crown-label,
.accent-label {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #415a77;
    display: block;
    margin-top: 1rem;
}

.crown-closing {
    z-index: 3;
    max-width: 36ch;
    margin-left: auto;
    margin-right: 12vw;
}

.ginkgo-crown-deco {
    position: absolute;
    top: 15vh;
    right: 20vw;
    z-index: 1;
    opacity: 0.12;
}

/* =========================================
   TYPEWRITER EFFECT
   ========================================= */
.typewriter {
    visibility: hidden;
}

.typewriter.typing,
.typewriter.typed {
    visibility: visible;
}

.typewriter .tw-char {
    opacity: 0;
    transition: opacity 0.05s ease;
}

.typewriter .tw-char.visible {
    opacity: 1;
}

.typewriter-cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: #1f7a8c;
    vertical-align: text-bottom;
    animation: cursor-blink 0.8s steps(1) infinite;
    margin-left: 1px;
}

@keyframes cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* =========================================
   GLITCH EFFECTS
   ========================================= */
.glitch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
}

.glitch-overlay.active {
    opacity: 1;
}

.glitch-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #2d6a4f;
    opacity: 0.5;
    mix-blend-mode: screen;
}

.glitch-active {
    animation: glitch-shift 200ms steps(3) forwards;
}

@keyframes glitch-shift {
    0% { clip-path: inset(20% 0 60% 0); transform: translateX(-3px); }
    33% { clip-path: inset(50% 0 20% 0); transform: translateX(4px); }
    66% { clip-path: inset(10% 0 70% 0); transform: translateX(-2px); }
    100% { clip-path: inset(0); transform: translateX(0); }
}

.glitch-channel-r,
.glitch-channel-b {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
}

.glitch-channel-r {
    background: rgba(45, 106, 79, 0.15);
    transform: translateX(-3px);
}

.glitch-channel-b {
    background: rgba(31, 122, 140, 0.15);
    transform: translateX(3px);
}

.glitch-flash .glitch-channel-r,
.glitch-flash .glitch-channel-b {
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* =========================================
   COLOR TRANSITIONS
   ========================================= */
a, .body-text, .accent-label {
    transition: color 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
    .trunk-text-left {
        margin-left: 5vw;
    }
    .trunk-text-right {
        margin-right: 5vw;
    }
    .cluster-1 { margin-left: 5vw; }
    .cluster-2 { margin-right: 5vw; }
    .cluster-3 { margin-left: 5vw; }
    .cluster-4 { margin-right: 5vw; }
    .crown-closing {
        margin-right: 5vw;
    }
    .tree-ring-container {
        width: 70vmin;
    }
    .trunk-silhouette {
        width: 25vw;
    }
}

/* =========================================
   PREFERS REDUCED MOTION
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    .typewriter {
        visibility: visible;
    }
    .typewriter .tw-char {
        opacity: 1;
    }
    .root-line {
        width: 60vw;
        transition: none;
    }
    .korean-subtitle {
        opacity: 1;
        transition: none;
    }
    #leaf-canvas {
        display: none;
    }
    .glitch-overlay {
        display: none;
    }
}