/* muhan.ai — Fairycore Infinite Forest */
/* Color Palette:
   Deepwood Black:    #0d1a0f
   Twilight Moss:     #1a2e1c
   Forest Floor:      #2a3f2c
   Lichen Silver:     #c8d4c0
   Moonlight Sage:    #e0e8d8
   Firefly Amber:     #d4a843
   Spore Blue:        #6b8fa3
   Bark Gray:         #3d4a3e
   Bioluminescent:    #7ec8a0
*/

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

html {
    overflow: hidden;
    height: 100%;
}

body {
    background: #0d1a0f;
    color: #c8d4c0;
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    height: 100vh;
    overflow: hidden;
    cursor: default;
}

/* SVG Filters - hidden */
.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Noise Overlays */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.noise-micro {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' seed='8'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    opacity: 0.6;
}

.noise-animated {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.025' numOctaves='2' seed='1'%3E%3Canimate attributeName='seed' values='1%3B3%3B7%3B13%3B1' dur='20s' repeatCount='indefinite'/%3E%3C/feTurbulence%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
    opacity: 0.5;
}

/* Scroll Wrapper */
.scroll-wrapper {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.scroll-container {
    display: flex;
    flex-direction: row;
    width: 700vw;
    height: 100vh;
    will-change: transform;
}

/* Panel Base */
.panel {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.panel-noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='3' seed='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Progress Bar */
.progress-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
    width: 60%;
    max-width: 500px;
}

.progress-track {
    position: relative;
    width: 100%;
    height: 2px;
    background: rgba(200, 212, 192, 0.15);
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: rgba(200, 212, 192, 0.6);
    transition: width 0.15s ease-out;
}

.progress-diamond {
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    background: #3d4a3e;
    border: 1px solid rgba(200, 212, 192, 0.4);
    transform: translate(-50%, -50%) rotate(45deg);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.progress-diamond.active {
    background: #c8d4c0;
    border-color: #c8d4c0;
}

.progress-diamond[data-panel="0"] { left: 0%; }
.progress-diamond[data-panel="1"] { left: 16.666%; }
.progress-diamond[data-panel="2"] { left: 33.333%; }
.progress-diamond[data-panel="3"] { left: 50%; }
.progress-diamond[data-panel="4"] { left: 66.666%; }
.progress-diamond[data-panel="5"] { left: 83.333%; }
.progress-diamond[data-panel="6"] { left: 100%; }

/* ================================================
   Panel 1: The Threshold
   ================================================ */
.panel-threshold {
    background: #0d1a0f;
    flex-direction: column;
}

.threshold-slit {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    overflow: hidden;
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.threshold-glow {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 5%, #2a3f2c 30%, #7ec8a0 50%, #2a3f2c 70%, transparent 95%);
    opacity: 0.8;
    animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.threshold-title {
    font-family: 'Noto Serif KR', serif;
    font-weight: 300;
    font-size: clamp(3rem, 8vw, 6rem);
    color: #e0e8d8;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 10;
    opacity: 0.9;
    text-shadow: 0 0 40px rgba(126, 200, 160, 0.3);
}

.threshold-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    color: #6b8fa3;
    letter-spacing: 0.3em;
    text-transform: lowercase;
    margin-top: 1.5rem;
    opacity: 0.6;
    position: relative;
    z-index: 10;
}

/* ================================================
   Panel 2: The First Grove
   ================================================ */
.panel-grove {
    background: #0d1a0f;
}

.grove-trunks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    pointer-events: none;
}

.trunk {
    width: var(--trunk-width, 2px);
    background: var(--trunk-color, #1a2e1c);
    height: var(--trunk-height, 70%);
    flex-shrink: 0;
    margin: 0 var(--trunk-gap, 15px);
    animation: grow var(--trunk-duration, 10s) ease-in-out infinite;
    transform-origin: bottom;
    opacity: var(--trunk-opacity, 0.7);
}

@keyframes grow {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(var(--trunk-grow, 1.03)); }
}

.grove-text-fragments {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3vh;
    z-index: 10;
}

.grove-fragment {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(1.5rem, 3.5vw, 2.8rem);
    color: #e0e8d8;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    letter-spacing: 0.05em;
}

.grove-fragment.visible {
    opacity: 0.85;
    transform: translateY(0);
}

.fragment-1 { transition-delay: 0s; }
.fragment-2 { transition-delay: 0.2s; }
.fragment-3 { transition-delay: 0.4s; }
.fragment-4 { transition-delay: 0.6s; }

/* ================================================
   Panel 3: The Clearing
   ================================================ */
.panel-clearing {
    background: #1a2e1c;
}

.clearing-space {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4vh;
    z-index: 10;
}

.enso-container {
    width: clamp(120px, 20vw, 220px);
    height: clamp(120px, 20vw, 220px);
}

.enso-circle {
    width: 100%;
    height: 100%;
}

.enso-path {
    stroke-dasharray: 565.48;
    stroke-dashoffset: 565.48;
    animation: enso-draw 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes enso-draw {
    0% { stroke-dashoffset: 565.48; }
    70% { stroke-dashoffset: 16.96; }
    85% { stroke-dashoffset: 16.96; }
    100% { stroke-dashoffset: 565.48; }
}

.clearing-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    color: #e0e8d8;
    text-align: center;
    line-height: 1.8;
    opacity: 0.85;
    letter-spacing: 0.02em;
}

.clearing-accent {
    color: #d4a843;
    font-style: italic;
}

/* ================================================
   Panel 4: The Undergrowth
   ================================================ */
.panel-undergrowth {
    background: #0d1a0f;
    flex-direction: column;
    gap: 3vh;
}

.undergrowth-spiral {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    opacity: 0.3;
}

.spiral-svg {
    width: 100%;
    height: 100%;
    animation: spiral-rotate 720s linear infinite;
}

@keyframes spiral-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.undergrowth-counters {
    display: flex;
    gap: clamp(2rem, 5vw, 5rem);
    z-index: 10;
    align-items: baseline;
}

.counter-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.counter-number {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: #d4a843;
    font-size: clamp(1.5rem, 4vw, 3.5rem);
    letter-spacing: 0.02em;
    min-width: 3ch;
    text-align: right;
}

.undergrowth-label {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(1rem, 2vw, 1.6rem);
    color: #c8d4c0;
    opacity: 0.6;
    letter-spacing: 0.15em;
    z-index: 10;
}

/* ================================================
   Panel 5: The Reflection
   ================================================ */
.panel-reflection {
    background: #0d1a0f;
    flex-direction: column;
    overflow: hidden;
}

.reflection-upper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 2vh;
    position: relative;
    width: 100%;
}

.reflection-muhan {
    font-family: 'Noto Serif KR', serif;
    font-weight: 200;
    font-size: clamp(8rem, 25vw, 22rem);
    color: #e0e8d8;
    opacity: 0.06;
    line-height: 1;
}

.reflection-symbols {
    display: flex;
    gap: 3vw;
    font-family: 'Noto Serif KR', serif;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    color: #6b8fa3;
    opacity: 0.4;
}

.symbol-item {
    letter-spacing: 0.1em;
}

.reflection-waterline {
    width: 100%;
    height: 1px;
    background: rgba(107, 143, 163, 0.3);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.reflection-lower {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 2vh;
    position: relative;
    width: 100%;
}

.mirrored {
    transform: scaleY(-1);
    filter: blur(1.5px) brightness(0.7) saturate(0.5);
}

.reflection-lower::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(13, 26, 15, 0.4));
    pointer-events: none;
}

/* ================================================
   Panel 6: The Spore Field
   ================================================ */
.panel-spores {
    background: #1a2e1c;
}

.spore-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.spore {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #7ec8a0 0%, transparent 70%);
    animation: spore-drift var(--spore-duration, 10s) ease-in-out infinite var(--spore-delay, 0s);
    opacity: var(--spore-opacity, 0.5);
}

@keyframes spore-drift {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(var(--drift-x1, -20px), var(--drift-y1, -15px));
    }
    50% {
        transform: translate(var(--drift-x2, 10px), var(--drift-y2, 20px));
    }
    75% {
        transform: translate(var(--drift-x3, -15px), var(--drift-y3, 5px));
    }
}

.spore-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    color: #e0e8d8;
    text-align: center;
    line-height: 2;
    opacity: 0.75;
    z-index: 10;
    position: relative;
    letter-spacing: 0.04em;
}

/* ================================================
   Panel 7: The Return
   ================================================ */
.panel-return {
    background: #0d1a0f;
    flex-direction: column;
    gap: 1.5rem;
}

.return-slit {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    overflow: hidden;
}

.return-glow {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 5%, #3d4a3e 30%, #d4a843 50%, #3d4a3e 70%, transparent 95%);
    opacity: 0.6;
    animation: breathe 5s ease-in-out infinite;
}

.return-title {
    font-family: 'Noto Serif KR', serif;
    font-weight: 500;
    font-size: clamp(3rem, 8vw, 6rem);
    color: #e0e8d8;
    position: relative;
    z-index: 10;
    text-shadow: 0 0 50px rgba(212, 168, 67, 0.3);
}

.return-invitation {
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    color: #c8d4c0;
    opacity: 0.7;
    text-align: center;
    line-height: 1.75;
    position: relative;
    z-index: 10;
}

.return-domain {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    color: #d4a843;
    letter-spacing: 0.3em;
    text-transform: lowercase;
    opacity: 0.5;
    position: relative;
    z-index: 10;
    margin-top: 1rem;
}