:root{--night:#0E1D15;--deep:#14271D;--green:#0A7A2E;--leaf:#8FD6A3;--cream:#F6F4EC;--soft:#B9C9BE;--amber:#F0A64A;--ink:#14271D}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:auto}
body{background:var(--night);color:var(--cream);font-family:'Noto Sans KR',system-ui,sans-serif;overflow-x:hidden;word-break:keep-all;-webkit-font-smoothing:antialiased}
canvas#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.bar{position:fixed;left:0;top:0;height:3px;background:var(--leaf);width:0;z-index:20}
.hint{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:20;font-size:13px;letter-spacing:.12em;color:var(--soft);display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .5s}
.hint i{width:22px;height:36px;border:1.5px solid var(--soft);border-radius:12px;position:relative;display:block}
.hint i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:var(--leaf);transform:translateX(-50%);animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}
section.scene{position:relative;height:260vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;perspective:1200px;perspective-origin:50% 45%}
.world{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.copy{position:relative;z-index:5;width:min(1080px,88vw);pointer-events:none}
.eyebrow{font-size:clamp(12px,1.1vw,15px);font-weight:700;letter-spacing:.22em;color:var(--leaf);margin-bottom:18px}
h1,h2{font-family:'Gowun Batang','Noto Serif KR',serif;font-weight:700;line-height:1.32;letter-spacing:-.01em}
h1{font-size:clamp(34px,6.2vw,92px)}
h2{font-size:clamp(28px,4.4vw,64px)}
.lead{margin-top:22px;font-size:clamp(16px,1.55vw,22px);line-height:1.75;color:var(--soft);max-width:34em}
.lead b{color:var(--cream);font-weight:700}
.reveal{opacity:0;transform:translate3d(0,40px,0);will-change:transform,opacity}
/* scene 1 seed */
.seedwrap{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.seed{width:min(34vw,300px);aspect-ratio:1;border-radius:26%;box-shadow:0 60px 120px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);display:block}
.ring{position:absolute;left:50%;top:50%;border:1px solid rgba(143,214,163,.22);border-radius:50%;transform-style:preserve-3d}
/* scene 2 words */
.word{position:absolute;left:50%;top:50%;padding:.5em .9em;border-radius:14px;background:rgba(246,244,236,.07);border:1px solid rgba(246,244,236,.16);font-weight:700;white-space:nowrap;backdrop-filter:blur(2px);color:var(--cream);will-change:transform,opacity}
.word.warn{border-color:rgba(240,166,74,.6);color:#FFD9A6;background:rgba(240,166,74,.10)}
/* scene 3 table */
.table3d{position:absolute;left:50%;top:56%;width:min(70vw,720px);aspect-ratio:1.9;transform-style:preserve-3d}
.plate{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#E9E4D4 60%,#CFC8B2);box-shadow:0 30px 50px rgba(0,0,0,.45);transform-style:preserve-3d}
.plate span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(13px,1.4vw,19px);font-weight:700;color:var(--ink);transform:translateZ(2px)}
.top{position:absolute;inset:0;border-radius:40px;background:linear-gradient(135deg,#6B4A2B,#4A321D);box-shadow:0 80px 120px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,255,255,.05)}
.lampglow{position:absolute;left:50%;top:-10%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(240,166,74,.35),rgba(240,166,74,0) 60%);pointer-events:none}
/* scene 4 cards */
.plan{position:absolute;left:50%;top:50%;width:min(26vw,250px);aspect-ratio:.72;border-radius:22px;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;font-weight:700;box-shadow:0 40px 80px rgba(0,0,0,.5);will-change:transform,opacity;backface-visibility:hidden}
.plan small{font-size:12px;letter-spacing:.14em;font-weight:700;opacity:.7}
.plan strong{font-size:clamp(17px,1.9vw,26px);line-height:1.3}
.plan.a{background:var(--cream);color:var(--ink)}
.plan.b{background:#2A4336;color:var(--soft)}
.plan.c{background:#1E3328;color:var(--soft)}
.stamp{position:absolute;right:16px;top:16px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;border:1.5px solid currentColor;opacity:0}
/* scene 5 phones */
.phone{position:absolute;left:50%;top:50%;width:min(24vw,250px);aspect-ratio:585/1266;border-radius:30px;overflow:hidden;border:5px solid #0b0f0d;background:#fff;box-shadow:0 50px 90px rgba(0,0,0,.6);will-change:transform;backface-visibility:hidden}
.phone img{width:100%;height:100%;object-fit:cover;display:block}
.cap{position:absolute;left:50%;top:50%;font-size:clamp(12px,1.05vw,15px);font-weight:700;color:var(--leaf);white-space:nowrap;will-change:transform,opacity}
/* scene 6 lamp */
.night6{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(240,166,74,.22),rgba(14,29,21,0) 55%);opacity:0}
.letter{font-family:'Gowun Batang',serif;color:#FFE6C4}
/* scene 7 dawn */
.dawn{position:absolute;inset:0;background:linear-gradient(180deg,#14271D 0%,#1F5133 45%,#E9D9A8 100%);opacity:0}
.sprout{position:absolute;left:50%;bottom:5vh;width:min(18vw,150px);transform-origin:50% 100%}
.end{color:var(--cream)}
.end .lead{color:#E7EFE9}
.sign{margin-top:28px;font-size:clamp(14px,1.2vw,17px);color:var(--cream);font-weight:700}
.sign span{font-weight:400;color:#DDE8E0}
.left .copy{margin-right:auto;margin-left:6vw;width:min(560px,86vw)}
.right .copy{margin-left:auto;margin-right:6vw;width:min(560px,86vw)}
@media (max-width:760px){.left .copy,.right .copy{margin:0 auto;align-self:flex-end;padding-bottom:12vh}.stage{align-items:flex-end}.center .stage{align-items:center}.phone{width:38vw}.plan{width:38vw}.seed{width:46vw}}
@media (prefers-reduced-motion:reduce){.hint i::after{animation:none}}

/* Navigation and a readable, motion-free alternative. */
.story-nav{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4vw;background:#0e1d15d9;backdrop-filter:blur(14px);border-bottom:1px solid #8fd6a31c;font-size:12px}
.story-nav a,.story-footer a{color:var(--cream);text-decoration:none}.story-nav span{font-size:10px;letter-spacing:.18em;color:var(--soft)}.story-nav button{color:var(--soft);background:none;border:1px solid #8fd6a345;border-radius:30px;padding:8px 12px;cursor:pointer;font:inherit}.story-nav a:focus-visible,.story-nav button:focus-visible,.story-footer a:focus-visible{outline:2px solid var(--leaf);outline-offset:5px}
.story-skip{position:fixed;left:16px;top:-100px;z-index:40;padding:14px;background:var(--cream);color:var(--ink)}.story-skip:focus{top:70px}.story-footer{position:relative;z-index:2;display:flex;justify-content:center;flex-wrap:wrap;gap:24px;padding:36px 24px 56px;font-size:13px;border-top:1px solid #8fd6a330}.bar{z-index:40}
section.scene{height:210vh}.reveal{opacity:1;transform:none}.motion-ready .reveal{opacity:0}.copy{pointer-events:auto}.stage{min-height:620px}.left .copy,.right .copy{width:min(42vw,560px)}.phone{width:min(22vw,240px)}
.story-static section.scene{height:auto}.story-static .stage{position:relative;height:auto;min-height:0;overflow:visible;display:flex;flex-direction:column;gap:35px;padding:110px 6vw 60px}.story-static .copy{width:min(680px,100%)!important;margin:0 auto!important;padding:0!important;align-self:center!important;text-align:center}.story-static .reveal{opacity:1!important;transform:none!important}.story-static .world{position:relative;inset:auto;width:100%;display:flex;justify-content:center;gap:20px;flex-wrap:wrap;transform:none!important}.story-static .seedwrap,.story-static .phone{position:static;transform:none!important;opacity:1!important;margin:0;flex-shrink:0}.story-static .phone{width:min(38vw,210px)}.story-static .seed{width:100px}.story-static .ring,.story-static .hint,.story-static #sky,.story-static .dawn,.story-static .night6,.story-static #w2,.story-static #w3,.story-static #w4,.story-static #w7{display:none}.story-static .lead{margin-left:auto;margin-right:auto}
@media(max-width:760px){.story-nav span{display:none}.story-nav{padding:14px 6vw}.story-nav button{font-size:11px}.left .copy,.right .copy{width:88vw;padding-bottom:7vh}.copy h2{font-size:clamp(25px,5.8vw,36px)}.lead{font-size:15px;line-height:1.8;margin-top:16px}.phone{width:34vw;max-width:190px}.seed{width:38vw}.eyebrow{font-size:11px}.hint{bottom:18px}.stage{min-height:650px}.story-footer{flex-direction:column;align-items:center}.center .copy{padding-top:10vh!important}.story-static .center .copy{padding-top:0!important}}