/* ========================================
   namu.market — Ethereal Night Tree Market
   ======================================== */

:root {
    --amber: #e8a849;
    --sage: #5b8a5a;
    --plum: #8b5a8a;
    --deep: #080e07;
    --canopy: #0b1a0f;
    --surface: #1a2418;
    --trunk-line: #1a2e18;
    --parchment: #f0e4cf;
    --aged-gold: #c4b89a;
    --lichen: #7d9b72;
}

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

html {
    background: var(--deep);
    overflow: hidden;
}

body {
    background: var(--deep);
    color: var(--parchment);
    font-family: 'Libre Baskerville', serif;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

/* ── Deep Forest Background ── */
.deep-forest {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26,46,24,0.03) 2px, rgba(26,46,24,0.03) 3px),
        repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(26,46,24,0.02) 3px, rgba(26,46,24,0.02) 4px);
}

.tree-trunk {
    position: absolute;
    width: 1px;
    background: var(--trunk-line);
}

/* ── Glow Layer ── */
.glow-layer {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.glow {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,168,73,0.08) 0%, transparent 70%);
}

.glow-1 {
    width: 600px;
    height: 600px;
    top: -10%;
    left: 20%;
}

.glow-2 {
    width: 500px;
    height: 500px;
    top: 40%;
    right: -5%;
}

.glow-3 {
    width: 400px;
    height: 400px;
    bottom: 10%;
    left: 5%;
}

/* ── Main Scroll Container ── */
.market-scroll {
    position: relative;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.market-scroll::-webkit-scrollbar {
    display: none;
}

.market-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ── Clearings (Sections) ── */
.clearing {
    position: relative;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    overflow: hidden;
}

/* ── Canopy Layer ── */
.canopy-layer {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
}

.canopy-branch {
    position: absolute;
    color: var(--canopy);
    opacity: 0.85;
}

.canopy-branch--left {
    left: 0;
    top: 0;
    width: 80px;
    height: 100%;
    animation: canopy-sway-left 4s ease-in-out infinite alternate;
}

.canopy-branch--right {
    right: 0;
    top: 0;
    width: 80px;
    height: 100%;
    animation: canopy-sway-right 4.5s ease-in-out infinite alternate;
}

.canopy-branch--top {
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    animation: canopy-sway-top 5s ease-in-out infinite alternate;
}

.canopy-branch svg {
    width: 100%;
    height: 100%;
}

@keyframes canopy-sway-left {
    from { transform: rotate(0deg) translateX(0); }
    to { transform: rotate(1.5deg) translateX(-3px); }
}

@keyframes canopy-sway-right {
    from { transform: rotate(0deg) translateX(0); }
    to { transform: rotate(-1.5deg) translateX(3px); }
}

@keyframes canopy-sway-top {
    from { transform: translateX(0); }
    to { transform: translateX(-5px); }
}

/* ── Atmosphere Layer ── */
.atmosphere-layer {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
}

.atmo-icon {
    position: absolute;
}

.moth-1 { top: 15%; left: 20%; opacity: 0.35; animation: moth-drift-1 8s cubic-bezier(0.4,0,0.2,1) infinite; }
.moth-2 { top: 60%; left: 70%; opacity: 0.25; animation: moth-drift-2 10s cubic-bezier(0.4,0,0.2,1) infinite; }
.moth-3 { top: 35%; left: 85%; opacity: 0.3; animation: moth-drift-3 9s cubic-bezier(0.4,0,0.2,1) infinite; }

@keyframes moth-drift-1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(30px, -20px) rotate(5deg); }
    50% { transform: translate(-15px, -35px) rotate(-3deg); }
    75% { transform: translate(20px, 10px) rotate(4deg); }
}

@keyframes moth-drift-2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-25px, 15px) rotate(-4deg); }
    66% { transform: translate(20px, -25px) rotate(6deg); }
}

@keyframes moth-drift-3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-30px, 20px); }
}

.firefly {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 6px var(--amber);
}

.firefly-1 { top: 10%; left: 30%; animation: firefly-pulse 3s ease-in-out infinite; }
.firefly-2 { top: 25%; left: 65%; animation: firefly-pulse 3.5s ease-in-out infinite 0.5s; }
.firefly-3 { top: 50%; left: 15%; animation: firefly-pulse 2.8s ease-in-out infinite 1s; }
.firefly-4 { top: 70%; left: 80%; animation: firefly-pulse 4s ease-in-out infinite 0.3s; }
.firefly-5 { top: 85%; left: 45%; animation: firefly-pulse 3.2s ease-in-out infinite 1.5s; }
.firefly-6 { top: 40%; left: 50%; animation: firefly-pulse 3.8s ease-in-out infinite 0.8s; }
.firefly-7 { top: 55%; left: 90%; animation: firefly-pulse 2.5s ease-in-out infinite 2s; }
.firefly-8 { top: 20%; left: 8%; animation: firefly-pulse 3.6s ease-in-out infinite 1.2s; }

@keyframes firefly-pulse {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 0.8; transform: scale(1.2); }
}

.smoke-1 { top: 45%; left: 10%; opacity: 0.25; animation: smoke-rise 6s ease-in-out infinite; }
.smoke-2 { top: 70%; left: 55%; opacity: 0.2; animation: smoke-rise 7s ease-in-out infinite 2s; }

@keyframes smoke-rise {
    0%, 100% { transform: translateY(0) scaleX(1); opacity: 0.25; }
    50% { transform: translateY(-20px) scaleX(1.1); opacity: 0.1; }
}

/* ── Candle Navigation ── */
.candle-nav {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.candle-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--amber);
    border: none;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity 0.3s, box-shadow 0.3s;
    position: relative;
    padding: 0;
}

.candle-dot.active {
    opacity: 1;
    box-shadow: 0 0 12px var(--amber), 0 0 24px rgba(232,168,73,0.3);
}

.candle-dot:hover {
    opacity: 0.8;
}

.candle-flame-tiny {
    display: none;
}

/* ═══════════════════════════════════
   CLEARING 1 — Opening Moment
   ═══════════════════════════════════ */

.clearing-1 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.clearing-1-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.clearing-1-content.visible {
    opacity: 1;
}

/* Skeleton loading rings */
.skeleton-rings {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--surface);
    animation: ring-expand 2s ease-out infinite;
}

.ring-1 { width: 60px; height: 60px; animation-delay: 0s; }
.ring-2 { width: 120px; height: 120px; animation-delay: 0.3s; }
.ring-3 { width: 200px; height: 200px; animation-delay: 0.6s; }
.ring-4 { width: 300px; height: 300px; animation-delay: 0.9s; }

.skeleton-rings.dissolve .ring {
    animation: ring-dissolve 0.6s ease-out forwards;
}

@keyframes ring-expand {
    0% { transform: scale(0.8); opacity: 0.3; }
    50% { transform: scale(1); opacity: 0.15; }
    100% { transform: scale(1.2); opacity: 0; }
}

@keyframes ring-dissolve {
    to { transform: scale(2); opacity: 0; }
}

/* Hero Flame */
.hero-flame {
    filter: drop-shadow(0 0 20px rgba(232,168,73,0.4));
}

.flame-path {
    animation: flame-flicker 0.8s ease-in-out infinite alternate;
}

.flame-inner {
    animation: flame-flicker-inner 1.1s ease-in-out infinite alternate;
}

@keyframes flame-flicker {
    0% { d: path("M40,180 Q20,140 30,100 Q25,60 40,20 Q55,60 50,100 Q60,140 40,180Z"); }
    33% { d: path("M40,180 Q22,138 28,98 Q27,58 40,18 Q53,58 52,98 Q58,138 40,180Z"); }
    66% { d: path("M40,180 Q18,142 32,102 Q23,62 40,22 Q57,62 48,102 Q62,142 40,180Z"); }
    100% { d: path("M40,180 Q21,136 30,96 Q26,56 40,16 Q54,56 50,96 Q59,136 40,180Z"); }
}

@keyframes flame-flicker-inner {
    0% { opacity: 0.6; }
    50% { opacity: 0.4; }
    100% { opacity: 0.7; }
}

/* Hero Title */
.hero-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(3.5rem, 10vw, 8rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--parchment);
    line-height: 1;
}

.hero-title .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.hero-title .letter.show {
    opacity: 1;
    transform: translateY(0);
}

/* Hero Tagline */
.hero-tagline {
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lichen);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hero-tagline.show {
    opacity: 1;
}

/* Scroll chevron */
.scroll-chevron {
    margin-top: 40px;
    animation: chevron-pulse 2s ease-in-out infinite;
}

@keyframes chevron-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ═══════════════════════════════════
   CLEARING 2 — The Catalog
   ═══════════════════════════════════ */

.clearing-2 {
    position: relative;
}

.glow-spot {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(232,168,73,0.12) 0%, transparent 70%);
}

.glow-spot-2a { width: 350px; height: 350px; top: 5%; left: 5%; }
.glow-spot-2b { width: 280px; height: 280px; top: 35%; right: 15%; }
.glow-spot-2c { width: 320px; height: 320px; bottom: 10%; left: 30%; }
.glow-spot-3a { width: 400px; height: 400px; top: 10%; right: 0%; }
.glow-spot-3b { width: 300px; height: 300px; bottom: 15%; left: 10%; }

.tree-display {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s ease-out;
}

.tree-display:hover {
    transform: scale(1.08);
}

.tree-display:hover .tree-icon {
    filter: drop-shadow(0 0 12px rgba(232,168,73,0.6));
}

.tree-icon {
    filter: drop-shadow(0 0 6px rgba(232,168,73,0.3));
    transition: filter 0.3s ease;
}

.tree-label {
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lichen);
}

.tree-name {
    font-family: 'Libre Baskerville', serif;
    font-size: 0.85rem;
    color: var(--aged-gold);
}

.tree-ginkgo { top: 10%; left: 12%; }
.tree-pine-1 { top: 30%; right: 22%; }
.tree-pine-2 { top: 38%; right: 14%; }
.tree-pine-3 { top: 26%; right: 30%; }
.tree-baobab { bottom: 15%; left: 40%; }
.tree-willow { top: 50%; right: 8%; }
.tree-cherry { top: 12%; right: 25%; }

/* ═══════════════════════════════════
   CLEARING 3 — The Lantern Path
   ═══════════════════════════════════ */

.clearing-3 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lantern-path-svg {
    position: absolute;
    inset: 5%;
    width: 90%;
    height: 90%;
}

.lantern-path-line {
    transition: stroke-dashoffset 1.5s ease-in-out;
}

.lantern-path-line.drawn {
    stroke-dashoffset: 0;
}

.path-icon {
    transition: opacity 0.4s ease;
}

.path-icon.visible {
    opacity: 1;
}

.path-text {
    position: absolute;
    max-width: 240px;
}

.path-text-1 { top: 15%; right: 15%; }
.path-text-2 { top: 45%; left: 15%; }
.path-text-3 { bottom: 15%; left: 25%; }

.path-fragment {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.75;
    color: var(--aged-gold);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.path-fragment.visible {
    opacity: 1;
}

/* ═══════════════════════════════════
   CLEARING 4 — The Candle Grove
   ═══════════════════════════════════ */

.clearing-4 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.candle-field {
    position: absolute;
    inset: 0;
}

.candle-field-flame {
    position: absolute;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: var(--amber);
    box-shadow: 0 0 8px rgba(232,168,73,0.5);
}

.grove-haiku {
    position: relative;
    z-index: 10;
    text-align: center;
}

.grove-haiku p {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    letter-spacing: -0.02em;
    color: var(--parchment);
    line-height: 1.4;
}

.grove-constellation {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ═══════════════════════════════════
   CLEARING 5 — The Root Map
   ═══════════════════════════════════ */

.clearing-5 {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26,36,24,0.06) 2px, rgba(26,36,24,0.06) 3px),
        repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(26,36,24,0.04) 3px, rgba(26,36,24,0.04) 4px);
}

.root-system {
    position: absolute;
    width: 80%;
    height: 80%;
}

.root-branch {
    transition: stroke-dashoffset 1s ease-in-out;
}

.root-branch.drawn {
    stroke-dashoffset: 0 !important;
}

.root-tree-icon {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 10px rgba(232,168,73,0.4));
}

.root-label {
    position: absolute;
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lichen);
    text-decoration: none;
    transition: color 0.3s ease;
    opacity: 0;
    transition: opacity 0.5s ease, color 0.3s ease;
}

.root-label.visible {
    opacity: 1;
}

.root-label:hover {
    color: var(--amber);
}

.root-label-1 { bottom: 20%; left: 12%; }
.root-label-2 { bottom: 12%; left: 30%; }
.root-label-3 { bottom: 12%; right: 30%; }
.root-label-4 { bottom: 20%; right: 12%; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .canopy-branch--left { width: 40px; }
    .canopy-branch--right { width: 40px; }
    .canopy-branch--top { height: 30px; }
    .candle-nav { bottom: 20px; left: 20px; }
    
    .tree-ginkgo { top: 8%; left: 8%; }
    .tree-pine-1 { top: 30%; right: 10%; }
    .tree-pine-2 { top: 40%; right: 5%; }
    .tree-pine-3 { top: 25%; right: 18%; }
    .tree-baobab { bottom: 12%; left: 25%; }
    .tree-willow { top: 55%; right: 5%; }
    .tree-cherry { top: 10%; right: 15%; }

    .path-text-1 { top: 8%; right: 8%; }
    .path-text-2 { top: 42%; left: 8%; }
    .path-text-3 { bottom: 8%; left: 8%; }

    .root-label-1 { bottom: 22%; left: 5%; }
    .root-label-2 { bottom: 14%; left: 20%; }
    .root-label-3 { bottom: 14%; right: 20%; }
    .root-label-4 { bottom: 22%; right: 5%; }
}