:root {
    --moss: #5B6257;
    --deep-pine: #123B36;
    --persimmon-wine: #7A2434;
    --bark: #24180F;
    --leaf: #2F5D3A;
    --ginkgo: #D8B84F;
    --hanji: #EFE2C2;
    --persimmon: #D66A2D;
    --display: "Gowun Dodum", "Noto Sans KR", sans-serif;
    --serif: "Fraunces", serif;
    --body: "Noto Sans KR", "Inter", sans-serif;
    --hand: "Gaegu", cursive;
    --space: "Space Grotesk", "Inter", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--hanji);
    background: var(--bark);
    font-family: var(--body);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        radial-gradient(circle at 20% 15%, rgba(216, 184, 79, .12), transparent 26%),
        radial-gradient(circle at 80% 45%, rgba(214, 106, 45, .1), transparent 24%),
        linear-gradient(90deg, rgba(239, 226, 194, .035) 1px, transparent 1px),
        linear-gradient(rgba(239, 226, 194, .025) 1px, transparent 1px);
    background-size: auto, auto, 44px 44px, 44px 44px;
    mix-blend-mode: screen;
}

.weather-film {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    opacity: .42;
    background-image:
        linear-gradient(115deg, transparent 0 45%, rgba(239, 226, 194, .35) 48%, transparent 52% 100%),
        linear-gradient(115deg, transparent 0 46%, rgba(239, 226, 194, .22) 49%, transparent 53% 100%);
    background-size: 110px 220px, 170px 260px;
    animation: rainSlide 4.8s linear infinite;
}

.cursor-lantern {
    position: fixed;
    width: 240px;
    height: 240px;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 3;
    background: radial-gradient(circle, rgba(216, 184, 79, .18), rgba(214, 106, 45, .08) 35%, transparent 68%);
    filter: blur(4px);
}

.market-walk { position: relative; }

.scene {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(28px, 5vw, 76px);
}

.rain-gate {
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse at 50% 110%, rgba(47, 93, 58, .75), transparent 56%),
        linear-gradient(180deg, #123B36 0%, #24180F 76%);
}

.rain-layer {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(ellipse at 12% 20%, rgba(239, 226, 194, .18) 0 2px, transparent 3px),
        radial-gradient(ellipse at 42% 10%, rgba(239, 226, 194, .14) 0 2px, transparent 3px),
        radial-gradient(ellipse at 72% 24%, rgba(239, 226, 194, .16) 0 2px, transparent 3px);
    background-size: 160px 210px;
    animation: beadDrift 7s linear infinite;
}

.curb-line {
    position: absolute;
    left: -5vw;
    right: -5vw;
    bottom: 14vh;
    height: 16vh;
    background: linear-gradient(90deg, transparent, rgba(91, 98, 87, .42), transparent), linear-gradient(#24180F, #123B36);
    transform: rotate(-2deg);
    border-top: 2px dashed rgba(239, 226, 194, .22);
}

.wood-sign {
    position: relative;
    width: min(780px, 86vw);
    padding: clamp(34px, 7vw, 72px);
    text-align: center;
    border: 8px solid rgba(36, 24, 15, .85);
    border-radius: 48% 52% 46% 54% / 8% 10% 9% 12%;
    background:
        repeating-radial-gradient(ellipse at 50% 50%, rgba(239, 226, 194, .09) 0 2px, transparent 3px 18px),
        linear-gradient(135deg, rgba(122, 36, 52, .65), rgba(36, 24, 15, .95) 48%, rgba(47, 93, 58, .7));
    box-shadow: 0 30px 90px rgba(0, 0, 0, .45), inset 0 0 70px rgba(216, 184, 79, .16);
    animation: signWake 2.4s ease both, lanternPulse 5s ease-in-out infinite 2.4s;
}

.wood-sign::before,
.wood-sign::after {
    content: "";
    position: absolute;
    top: -16vh;
    width: 3px;
    height: 18vh;
    background: rgba(239, 226, 194, .35);
}
.wood-sign::before { left: 22%; }
.wood-sign::after { right: 22%; }

.korean-mark, .clearing-sign span {
    display: block;
    color: var(--ginkgo);
    font-family: var(--display);
    letter-spacing: .18em;
    margin-bottom: 12px;
}

h1, h2, h3, p { margin: 0; }

h1 {
    font-family: var(--display);
    font-size: clamp(56px, 12vw, 150px);
    line-height: .9;
    color: var(--hanji);
    text-shadow: 0 0 24px rgba(216, 184, 79, .3);
}

.wood-sign p {
    margin: 24px auto 0;
    max-width: 560px;
    font-family: var(--hand);
    font-size: clamp(22px, 3vw, 36px);
    color: rgba(239, 226, 194, .78);
}

.hanging-tag, .price-tag {
    position: absolute;
    padding: 12px 18px;
    color: var(--bark);
    background: var(--hanji);
    border-radius: 4px 14px 5px 12px;
    font-family: var(--hand);
    font-size: 24px;
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
    transform-origin: 50% -26px;
    animation: tagSwing 4.2s ease-in-out infinite;
}

.hanging-tag::before, .price-tag::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -34px;
    width: 1px;
    height: 34px;
    background: rgba(239, 226, 194, .6);
}

.tag-one { left: 10vw; top: 26vh; }
.tag-two { right: 12vw; bottom: 26vh; animation-delay: -1.4s; }

.gate-roots span {
    position: absolute;
    left: 50%;
    bottom: -14vh;
    width: 44vw;
    height: 28vh;
    border: solid var(--leaf);
    border-width: 11px 0 0 0;
    border-radius: 55% 45% 0 0;
    transform-origin: 0 100%;
    opacity: .72;
    transition: transform 1.3s ease;
}
.gate-roots span:nth-child(1) { transform: rotate(154deg); }
.gate-roots span:nth-child(2) { transform: rotate(188deg); }
.gate-roots span:nth-child(3) { transform: rotate(214deg); }
.gate-roots span:nth-child(4) { transform: rotate(136deg); }
.rain-gate.parted .gate-roots span:nth-child(1) { transform: rotate(128deg) translateX(-20px); }
.rain-gate.parted .gate-roots span:nth-child(2) { transform: rotate(206deg) translateX(22px); }

.scroll-whisper {
    position: absolute;
    bottom: 36px;
    font: 700 12px var(--space);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(239, 226, 194, .56);
}

.root-aisle {
    background:
        radial-gradient(circle at 15% 25%, rgba(214,106,45,.22), transparent 20%),
        radial-gradient(circle at 75% 75%, rgba(216,184,79,.18), transparent 28%),
        linear-gradient(160deg, #24180F, #123B36 62%, #2F5D3A);
}

.root-map { position: absolute; inset: 0; opacity: .9; }
.root-map svg { width: 100%; height: 100%; }
.root-path {
    fill: none;
    stroke: var(--hanji);
    stroke-width: 15;
    stroke-linecap: round;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    filter: drop-shadow(0 0 15px rgba(216,184,79,.2));
}
.root-path-b { stroke: var(--ginkgo); stroke-width: 8; }
.root-path-c { stroke: var(--persimmon); stroke-width: 6; }
.root-aisle.in-view .root-path { animation: drawRoot 3s ease forwards; }
.root-aisle.in-view .root-path-b { animation-delay: .4s; }
.root-aisle.in-view .root-path-c { animation-delay: .8s; }

.scene-copy {
    position: relative;
    z-index: 1;
    max-width: 660px;
    padding: clamp(24px, 4vw, 48px);
    background: rgba(36, 24, 15, .42);
    border: 1px solid rgba(239, 226, 194, .18);
    border-radius: 38px 12px 44px 18px;
    backdrop-filter: blur(8px);
}
.aisle-copy { margin: 12vh 0 0 6vw; }
.scene-kicker {
    display: block;
    margin-bottom: 18px;
    color: var(--ginkgo);
    font: 700 13px var(--space);
    letter-spacing: .18em;
    text-transform: uppercase;
}
.scene-copy h2, .clearing-sign h2 {
    font-family: var(--serif);
    font-size: clamp(42px, 6vw, 92px);
    line-height: .94;
    color: var(--hanji);
}
.scene-copy p, .clearing-sign p {
    margin-top: 22px;
    font-size: clamp(17px, 1.6vw, 22px);
    line-height: 1.7;
    color: rgba(239, 226, 194, .76);
}

.mushroom-parasol {
    position: absolute;
    width: 118px;
    height: 86px;
    border-radius: 80px 80px 20px 20px;
    background: radial-gradient(circle at 30% 30%, var(--hanji) 0 5px, transparent 6px), radial-gradient(circle at 65% 35%, var(--hanji) 0 4px, transparent 5px), var(--persimmon-wine);
    box-shadow: inset 0 -18px rgba(36,24,15,.22);
}
.mushroom-parasol::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 70px;
    width: 18px;
    height: 92px;
    background: var(--hanji);
    border-radius: 12px;
}
.m1 { right: 16vw; top: 34vh; transform: rotate(8deg); }
.m2 { right: 28vw; bottom: 14vh; transform: scale(.72) rotate(-11deg); }

.receipt-ribbon {
    position: absolute;
    right: -80px;
    top: 18vh;
    padding: 18px 80px;
    color: var(--bark);
    background: var(--hanji);
    transform: rotate(12deg);
    font-family: var(--hand);
    font-size: 28px;
}

.canopy-stalls {
    display: grid;
    grid-template-columns: repeat(3, minmax(210px, 1fr));
    align-items: end;
    gap: clamp(18px, 3vw, 42px);
    background:
        radial-gradient(ellipse at 50% -10%, rgba(47,93,58,.95), transparent 55%),
        linear-gradient(180deg, #123B36, #24180F 92%);
}

.canopy-branch {
    position: absolute;
    top: 2vh;
    left: -10vw;
    right: -10vw;
    height: 24vh;
    border-bottom: 28px solid var(--bark);
    border-radius: 0 0 50% 50%;
    transform: rotate(-2deg);
    box-shadow: 0 35px 70px rgba(0,0,0,.25);
}

.stall {
    position: relative;
    min-height: 48vh;
    padding: 92px 28px 34px;
    background: linear-gradient(180deg, rgba(91,98,87,.38), rgba(36,24,15,.72));
    border: 1px solid rgba(239,226,194,.18);
    border-radius: 44px 44px 18px 18px;
    transform: translateY(var(--stall-rise, 0));
    transition: transform .8s ease, box-shadow .8s ease;
}
.stall:hover { transform: translateY(calc(var(--stall-rise, 0) - 18px)); box-shadow: 0 30px 80px rgba(0,0,0,.34); }
.stall-left { --stall-rise: 5vh; }
.stall-center { --stall-rise: -4vh; }
.stall-right { --stall-rise: 8vh; }
.stall-roof {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 22px;
    height: 52px;
    border-radius: 50% 50% 8px 8px;
    background: repeating-linear-gradient(90deg, var(--persimmon) 0 24px, var(--ginkgo) 24px 48px, var(--persimmon-wine) 48px 72px);
}
.stall h3 {
    font-family: var(--display);
    font-size: clamp(28px, 3vw, 46px);
    color: var(--ginkgo);
}
.stall p { margin-top: 18px; line-height: 1.6; color: rgba(239,226,194,.76); }
.stall .price-tag { right: 24px; bottom: 28px; font-size: 21px; }
.canopy-copy { position: absolute; left: 7vw; top: 14vh; max-width: 520px; }

.lantern-swarm span {
    position: absolute;
    width: 22px;
    height: 34px;
    border-radius: 50% 50% 45% 45%;
    background: radial-gradient(circle, var(--hanji), var(--ginkgo) 58%, var(--persimmon));
    box-shadow: 0 0 34px rgba(216,184,79,.78);
    animation: lanternSway 3.8s ease-in-out infinite;
}
.lantern-swarm span:nth-child(1) { left: 18%; top: 18%; }
.lantern-swarm span:nth-child(2) { left: 44%; top: 10%; animation-delay: -.7s; }
.lantern-swarm span:nth-child(3) { left: 74%; top: 21%; animation-delay: -1.4s; }
.lantern-swarm span:nth-child(4) { left: 63%; top: 52%; animation-delay: -.3s; }
.lantern-swarm span:nth-child(5) { left: 31%; top: 62%; animation-delay: -2s; }

.seed-exchange {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 5vw;
    background:
        radial-gradient(circle at 25% 50%, rgba(216,184,79,.15), transparent 28%),
        linear-gradient(120deg, #2F5D3A, #123B36 48%, #24180F);
}

.packet-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 24px;
}
.seed-packet {
    position: relative;
    min-height: 210px;
    padding: 30px 24px;
    border: 0;
    color: var(--bark);
    background: var(--hanji);
    border-radius: 8px 8px 26px 26px;
    font-family: var(--hand);
    font-size: 31px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 22px 60px rgba(0,0,0,.3);
    transition: transform .55s ease;
}
.seed-packet::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 72px;
    background: linear-gradient(135deg, transparent 50%, rgba(91,98,87,.22) 51%), linear-gradient(-135deg, transparent 50%, rgba(122,36,52,.18) 51%);
    transform-origin: top;
    transition: transform .55s ease;
}
.seed-packet:hover, .seed-packet.open { transform: rotate(var(--packet-tilt, -2deg)) translateY(-10px); }
.seed-packet:hover::before, .seed-packet.open::before { transform: rotateX(72deg); }
.seed-packet:nth-child(2) { --packet-tilt: 2deg; }
.seed-packet:nth-child(3) { --packet-tilt: 3deg; }
.seed-packet:nth-child(4) { --packet-tilt: -3deg; }
.seed-packet span, .seed-packet em { position: relative; z-index: 1; display: block; }
.seed-packet em { margin-top: 42px; font-size: 20px; color: var(--leaf); }
.seed-note {
    position: absolute;
    right: 10vw;
    bottom: 8vh;
    color: var(--ginkgo);
    font-family: var(--hand);
    font-size: 30px;
}

.lantern-clearing {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 50%, rgba(216,184,79,.23), transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(122,36,52,.22), transparent 60%),
        #24180F;
}
.tree-ring-stage {
    position: relative;
    width: min(82vw, 760px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}
.rings { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-18deg); }
.rings circle {
    fill: none;
    stroke: rgba(239,226,194,.62);
    stroke-width: 3;
    stroke-dasharray: 1700;
    stroke-dashoffset: 1700;
}
.lantern-clearing.in-view .rings circle { animation: ringDraw 4s ease forwards; }
.lantern-clearing.in-view .rings circle:nth-child(2) { animation-delay: .25s; }
.lantern-clearing.in-view .rings circle:nth-child(3) { animation-delay: .5s; }
.lantern-clearing.in-view .rings circle:nth-child(4) { animation-delay: .75s; }
.clearing-sign {
    position: relative;
    z-index: 1;
    width: min(560px, 76vw);
    padding: 46px;
    text-align: center;
    border-radius: 999px;
    background: rgba(18,59,54,.72);
    box-shadow: inset 0 0 90px rgba(216,184,79,.12), 0 0 110px rgba(216,184,79,.16);
}
.orbit {
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    animation: orbit 9s linear infinite;
}
.orbit::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -4px;
    width: 10px;
    height: 6px;
    background: var(--hanji);
    border-radius: 50%;
    box-shadow: 0 0 16px var(--ginkgo);
}
.moth-two { inset: 24%; animation-duration: 6.8s; animation-direction: reverse; }
.moth-three { inset: 8%; animation-duration: 13s; }

.scene-rail {
    position: fixed;
    z-index: 8;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 10px;
}
.scene-rail button {
    padding: 9px 13px;
    border: 1px solid rgba(239,226,194,.24);
    border-radius: 999px;
    color: rgba(239,226,194,.64);
    background: rgba(36,24,15,.55);
    font: 700 11px var(--space);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .35s ease, color .35s ease, transform .35s ease;
}
.scene-rail button.active {
    color: var(--bark);
    background: var(--ginkgo);
    transform: translateX(-8px);
}

@keyframes rainSlide { to { background-position: 0 220px, 0 260px; } }
@keyframes beadDrift { to { transform: translate3d(-60px, 120px, 0); } }
@keyframes signWake { from { opacity: 0; transform: translateY(28px) scale(.96); filter: brightness(.5); } to { opacity: 1; transform: none; filter: brightness(1); } }
@keyframes lanternPulse { 50% { box-shadow: 0 34px 110px rgba(0,0,0,.5), inset 0 0 110px rgba(216,184,79,.25); } }
@keyframes tagSwing { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
@keyframes drawRoot { to { stroke-dashoffset: 0; } }
@keyframes lanternSway { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(18px) rotate(5deg); } }
@keyframes ringDraw { to { stroke-dashoffset: 0; } }
@keyframes orbit { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
    .canopy-stalls, .seed-exchange { grid-template-columns: 1fr; }
    .canopy-stalls { padding-top: 26vh; }
    .stall { min-height: 300px; transform: none; }
    .canopy-copy { top: 4vh; left: 24px; right: 24px; }
    .packet-grid { grid-template-columns: 1fr; }
    .scene-rail { display: none; }
    .receipt-ribbon { display: none; }
}