:root {
  --cloud-glass: #F4FBFF;
  --sky-wash: #BFE9FF;
  --greenhouse-shadow: #345E7C;
  --young-leaf: #8DD6A3;
  --deep-stem: #23614A;
  --pearl-shell: #F6D6E6;
  --rain-silver: #C9DDE6;
  --twilight-violet: #6F78B8;
  --pollen-lantern: #FFE784;
  --font-title: "Cormorant Garamond", serif;
  --font-kr: "Noto Sans KR", sans-serif;
  --font-body: "Quicksand", sans-serif;
  --font-poem: "Fraunces", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--cloud-glass); }

body {
  margin: 0;
  color: var(--deep-stem);
  font-family: var(--font-body);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 24% 6%, rgba(255, 231, 132, 0.38), transparent 25vw),
    radial-gradient(circle at 80% 20%, rgba(246, 214, 230, 0.45), transparent 28vw),
    linear-gradient(180deg, #F4FBFF 0%, #BFE9FF 22%, #F4FBFF 42%, #C9DDE6 63%, #F6D6E6 78%, #6F78B8 100%);
}

.paper-grain, .glass-roof, .pollen-field, .aerial-trellis { position: fixed; inset: 0; pointer-events: none; }

.paper-grain {
  z-index: 8;
  opacity: .19;
  background-image:
    repeating-linear-gradient(90deg, rgba(35, 97, 74, .08) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, rgba(52, 94, 124, .06) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
}

.glass-roof {
  z-index: 1;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.45) 38.2% 39.2%, transparent 39.5% 100%),
    linear-gradient(64deg, transparent 0 58%, rgba(52,94,124,.14) 58.2% 58.8%, transparent 59% 100%);
  opacity: .55;
}

.pollen-field { z-index: 7; overflow: hidden; }

.pollen {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pollen-lantern);
  box-shadow: 0 0 18px rgba(255, 231, 132, .85);
  opacity: .62;
  transform: translate3d(0,0,0);
}

.aerial-trellis {
  z-index: 4;
  width: 100vw;
  height: 520vh;
  top: 0;
  overflow: visible;
}

.trellis-path, .trellis-shadow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trellis-path {
  stroke: url(#none);
  stroke: var(--deep-stem);
  stroke-width: 7;
  filter: drop-shadow(0 0 12px rgba(141, 214, 163, .45));
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.trellis-shadow {
  stroke: rgba(191, 233, 255, .72);
  stroke-width: 22;
  opacity: .48;
}

.vine-leaves path {
  fill: rgba(141, 214, 163, .72);
  stroke: var(--deep-stem);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: leafPulse 5s ease-in-out infinite;
}

.garden-story { position: relative; z-index: 5; }

.scene {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 9vh 8vw;
}

.scene::before {
  content: attr(data-chamber);
  position: absolute;
  top: 8vh;
  left: 7vw;
  font-family: var(--font-poem);
  font-size: clamp(5rem, 18vw, 16rem);
  line-height: .7;
  color: rgba(255,255,255,.42);
  -webkit-text-stroke: 1px rgba(52,94,124,.1);
  z-index: -1;
}

.seed-lift { min-height: 108vh; background: radial-gradient(circle at 52% 0%, rgba(255,255,255,.84), transparent 36%), linear-gradient(180deg, rgba(244,251,255,.92), rgba(191,233,255,.56)); }
.cloud-loam { background: linear-gradient(180deg, rgba(191,233,255,.18), rgba(244,251,255,.58)); }
.rain-trellis { background: linear-gradient(180deg, rgba(244,251,255,.5), rgba(201,221,230,.34)); }
.shell-nursery { background: radial-gradient(circle at 72% 28%, rgba(246,214,230,.64), transparent 28%), linear-gradient(180deg, rgba(244,251,255,.55), rgba(191,233,255,.22)); }
.blue-hour-bloom { background: radial-gradient(circle at 48% 62%, rgba(255,231,132,.28), transparent 28%), linear-gradient(180deg, rgba(111,120,184,.18), rgba(111,120,184,.96)); color: var(--cloud-glass); }

.scene-copy {
  position: relative;
  max-width: 560px;
  color: var(--greenhouse-shadow);
}

.glass-label {
  padding: clamp(1.4rem, 3vw, 2.5rem);
  border: 1px solid rgba(244, 251, 255, .85);
  border-radius: 34px 34px 42px 18px;
  background: linear-gradient(145deg, rgba(244,251,255,.58), rgba(191,233,255,.25));
  box-shadow: 0 24px 80px rgba(52, 94, 124, .14), inset 0 0 40px rgba(255,255,255,.54);
  backdrop-filter: blur(14px);
}

.hero-copy { margin: 13vh 0 0 13vw; transform: rotate(-1.5deg); }
.korean-mark, .scene-number, small { font-family: var(--font-kr); letter-spacing: .12em; font-size: .78rem; text-transform: uppercase; }

h1, h2 { font-family: var(--font-title); font-weight: 500; margin: 0; letter-spacing: -.045em; }
h1 { font-size: clamp(5rem, 14vw, 15rem); line-height: .74; color: var(--deep-stem); text-shadow: 0 1px 0 #F4FBFF, 0 0 42px rgba(255, 231, 132, .28); }
h2 { font-size: clamp(4rem, 10vw, 9rem); line-height: .82; color: var(--deep-stem); }
.blue-hour-bloom h2 { color: var(--pollen-lantern); text-shadow: 0 0 28px rgba(255,231,132,.45); }

p { font-size: clamp(1rem, 1.45vw, 1.22rem); line-height: 1.8; }
.subtitle { font-family: var(--font-kr); color: var(--greenhouse-shadow); font-size: clamp(1rem, 1.9vw, 1.5rem); margin-top: 1.5rem; }
.ledger { max-width: 37ch; }

.seed-index {
  position: fixed;
  right: 2vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.seed-dot {
  width: 24px;
  height: 34px;
  display: grid;
  place-items: center;
  text-decoration: none;
}

.seed-dot span {
  width: 10px;
  height: 16px;
  border-radius: 60% 40% 60% 40%;
  background: rgba(244,251,255,.74);
  border: 1px solid var(--greenhouse-shadow);
  transform: rotate(34deg);
  transition: .5s ease;
}

.seed-dot.is-active span { background: var(--pollen-lantern); transform: rotate(34deg) scale(1.45); box-shadow: 0 0 18px var(--pollen-lantern); }

.roof-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(20deg, transparent 0 44%, rgba(52,94,124,.14) 44.3% 44.8%, transparent 45.1%),
    linear-gradient(145deg, transparent 0 54%, rgba(255,255,255,.7) 54.3% 55%, transparent 55.3%);
}

.seed-riser { position: absolute; left: 16vw; bottom: 2vh; width: 80px; height: 170px; animation: seedRise 6s cubic-bezier(.2,.7,.2,1) both; }
.seed-shell { position: absolute; bottom: 0; left: 24px; width: 32px; height: 46px; border-radius: 55% 45% 58% 42%; background: radial-gradient(circle at 35% 28%, #FFE784, #F6D6E6 38%, #8DD6A3 72%); border: 1px solid rgba(35,97,74,.36); transform: rotate(18deg); }
.seed-sprout { position: absolute; bottom: 37px; left: 38px; width: 2px; height: 96px; background: var(--deep-stem); transform-origin: bottom; animation: sproutUnfurl 4s 1.2s ease-out both; }
.seed-sprout::before, .seed-sprout::after { content: ""; position: absolute; top: 24px; width: 38px; height: 20px; border-radius: 80% 20% 80% 20%; background: rgba(141,214,163,.72); border: 1px solid var(--deep-stem); transform-origin: 0 50%; }
.seed-sprout::before { left: 0; transform: rotate(-28deg) scale(0); animation: leafOpen 2.2s 2.5s ease forwards; }
.seed-sprout::after { right: 0; top: 52px; transform-origin: 100% 50%; transform: rotate(28deg) scale(0); animation: leafOpenRight 2.2s 3s ease forwards; }

.weather-flag, .floating-packet, .orbit-note {
  position: absolute;
  font-family: var(--font-kr);
  color: var(--greenhouse-shadow);
  background: rgba(244,251,255,.72);
  border: 1px solid rgba(52,94,124,.18);
  box-shadow: 0 18px 50px rgba(52,94,124,.12);
}
.weather-flag { right: 18vw; top: 22vh; padding: .55rem 1.1rem; border-radius: 4px 18px 18px 4px; transform: rotate(8deg); }
.floating-packet { right: 11vw; bottom: 18vh; width: 168px; min-height: 128px; padding: 1.1rem; border-radius: 12px 12px 34px 12px; transform: rotate(7deg); animation: floatPacket 7s ease-in-out infinite; }
.floating-packet b { display: block; font-family: var(--font-poem); font-size: 1.6rem; color: var(--deep-stem); }
.floating-packet span { font-size: .75rem; }

.vapor-bed { position: absolute; filter: blur(2px); opacity: .78; background: radial-gradient(ellipse at 30% 45%, rgba(244,251,255,.95), rgba(191,233,255,.56) 48%, transparent 72%); border-radius: 50%; animation: vaporMorph 12s ease-in-out infinite; }
.vapor-a { width: 54vw; height: 26vh; left: 2vw; top: 20vh; }
.vapor-b { width: 62vw; height: 32vh; right: -10vw; bottom: 17vh; animation-delay: -4s; }
.cloud-roots { position: absolute; left: 28vw; top: 10vh; width: 45vw; height: 75vh; opacity: .32; background: repeating-radial-gradient(ellipse at top, transparent 0 24px, rgba(35,97,74,.16) 25px 27px, transparent 28px 45px); mask-image: linear-gradient(180deg, black, transparent); }
.envelope-left { margin: 21vh 0 0 8vw; padding: 2rem; background: rgba(244,251,255,.76); border: 1px solid rgba(52,94,124,.2); border-radius: 8px 8px 44px 8px; transform: rotate(-3deg); box-shadow: 0 18px 60px rgba(52,94,124,.14); }
.orbit-note { padding: .9rem 1rem; border-radius: 18px; animation: orbitDrift 10s ease-in-out infinite; }
.orbit-note span { font-size: .75rem; color: var(--deep-stem); }
.note-a { right: 18vw; top: 25vh; }
.note-b { left: 49vw; bottom: 24vh; animation-delay: -5s; }
.leaf-butterfly { position: absolute; right: 26vw; top: 55vh; width: 48px; height: 32px; animation: butterflyFloat 6s ease-in-out infinite; }
.leaf-butterfly::before, .leaf-butterfly::after { content:""; position:absolute; width:28px; height:32px; background: rgba(141,214,163,.7); border:1px solid var(--deep-stem); border-radius: 90% 10% 80% 20%; }
.leaf-butterfly::before { left:0; transform: rotate(-38deg); }
.leaf-butterfly::after { right:0; transform: scaleX(-1) rotate(-38deg); }

.rain-threads { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0 42px, rgba(201,221,230,.82) 43px 44px, transparent 45px 88px); mask-image: linear-gradient(180deg, transparent, black 16%, black 90%, transparent); animation: rainFall 1.8s linear infinite; }
.rain-label { margin: 18vh 0 0 auto; max-width: 510px; transform: rotate(2deg); }
.hanging-droplet { position: absolute; width: 28px; height: 46px; border-radius: 50% 50% 55% 55%; background: linear-gradient(150deg, rgba(244,251,255,.9), rgba(191,233,255,.42)); border: 1px solid rgba(52,94,124,.2); box-shadow: inset 8px 4px 18px rgba(255,255,255,.8), 0 0 22px rgba(191,233,255,.7); animation: dropletSway 4s ease-in-out infinite; }
.droplet-one { left: 22vw; top: 18vh; }
.droplet-two { right: 31vw; bottom: 22vh; animation-delay: -2s; }
.climbing-leaves span { position: absolute; width: 42px; height: 22px; border-radius: 85% 15% 85% 15%; background: var(--young-leaf); border: 1px solid var(--deep-stem); animation: climb 7s ease-in-out infinite; }
.climbing-leaves span:nth-child(1){left:34vw;bottom:10vh}.climbing-leaves span:nth-child(2){left:38vw;bottom:25vh;animation-delay:-1s}.climbing-leaves span:nth-child(3){left:43vw;bottom:42vh;animation-delay:-2s}.climbing-leaves span:nth-child(4){left:49vw;bottom:58vh;animation-delay:-3s}.climbing-leaves span:nth-child(5){left:55vw;bottom:72vh;animation-delay:-4s}
.interstitial-word { position: absolute; left: 7vw; bottom: 9vh; font-family: var(--font-poem); font-size: clamp(5rem, 18vw, 16rem); color: rgba(246,214,230,.34); font-variation-settings: "SOFT" 100, "WONK" 1; }

.nursery-card { margin: 14vh 0 0 10vw; }
.shell-cistern { position: absolute; border-radius: 60% 45% 60% 40%; background: radial-gradient(circle at 34% 30%, #F4FBFF, #F6D6E6 42%, #C9DDE6 76%); border: 1px solid rgba(52,94,124,.24); box-shadow: inset 0 0 30px rgba(255,255,255,.82), 0 24px 80px rgba(52,94,124,.16); animation: cisternGlow 7s ease-in-out infinite; }
.shell-cistern span { position:absolute; inset:18%; border-radius: inherit; border: 2px solid rgba(52,94,124,.18); border-left-color: transparent; transform: rotate(35deg); }
.cistern-a { width: 210px; height: 170px; right: 16vw; top: 18vh; transform: rotate(-18deg); }
.cistern-b { width: 140px; height: 116px; right: 32vw; bottom: 16vh; transform: rotate(20deg); animation-delay: -3s; }
.root-diagram { position: absolute; right: 12vw; bottom: 10vh; width: min(42vw, 420px); height: auto; opacity: .88; }
.spiral-root, .small-root { fill: none; stroke: var(--deep-stem); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 8 10; animation: diagramDraw 11s linear infinite; }
.small-root { stroke: var(--greenhouse-shadow); stroke-width: 2; }
.pressed-petal { position:absolute; width:110px; height:150px; background: rgba(246,214,230,.42); border:1px solid rgba(246,214,230,.8); border-radius: 70% 20% 70% 20%; filter: blur(.2px); }
.petal-one { left: 47vw; top: 18vh; transform: rotate(28deg); }
.petal-two { left: 66vw; top: 52vh; transform: rotate(-35deg) scale(.7); }

.twilight-dome { position:absolute; inset:7vh 6vw; border-radius: 50% 50% 0 0; border:1px solid rgba(244,251,255,.22); background: radial-gradient(circle at 50% 70%, rgba(255,231,132,.18), transparent 34%), radial-gradient(circle at 50% 0, rgba(191,233,255,.18), transparent 56%); }
.bloom-copy { margin: 17vh auto 0; text-align: center; max-width: 680px; color: var(--cloud-glass); }
.bloom-copy p { color: rgba(244,251,255,.92); }
.bloom-field .bloom { position:absolute; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle, #FFE784 0 18%, transparent 19%), conic-gradient(from 20deg, rgba(255,231,132,.9), rgba(246,214,230,.8), rgba(141,214,163,.65), rgba(255,231,132,.9)); box-shadow: 0 0 34px rgba(255,231,132,.72); clip-path: polygon(50% 0, 62% 35%, 100% 35%, 69% 57%, 82% 100%, 50% 72%, 18% 100%, 31% 57%, 0 35%, 38% 35%); transform: scale(.15) rotate(0deg); opacity: .2; transition: transform 1.4s cubic-bezier(.2,.8,.2,1), opacity 1.4s ease; }
.blue-hour-bloom.is-lit .bloom { transform: scale(1) rotate(24deg); opacity: 1; }
.b1{left:18vw;top:22vh}.b2{left:28vw;bottom:18vh}.b3{right:24vw;top:21vh}.b4{right:16vw;bottom:25vh}.b5{left:50vw;top:13vh}.b6{left:58vw;bottom:13vh}
.bloom-word { color: rgba(255,231,132,.18); right: 5vw; left:auto; bottom: 4vh; }
.garden-footer { position:absolute; left:0; right:0; bottom:2vh; text-align:center; font-family:var(--font-kr); color:rgba(244,251,255,.72); font-size:.8rem; letter-spacing:.16em; }

@keyframes seedRise { from { transform: translateY(130px); opacity:.2; } to { transform: translateY(-38vh); opacity:1; } }
@keyframes sproutUnfurl { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes leafOpen { to { transform: rotate(-28deg) scale(1); } }
@keyframes leafOpenRight { to { transform: rotate(28deg) scale(1); } }
@keyframes leafPulse { 50% { transform: scale(1.08) rotate(3deg); } }
@keyframes floatPacket { 50% { transform: rotate(2deg) translateY(-22px); } }
@keyframes vaporMorph { 50% { border-radius: 42% 58% 48% 52%; transform: translateY(-18px) scale(1.06); } }
@keyframes orbitDrift { 50% { transform: translate(24px,-28px) rotate(5deg); } }
@keyframes butterflyFloat { 50% { transform: translate(20px,-28px) rotate(12deg); } }
@keyframes rainFall { to { background-position: 0 88px; } }
@keyframes dropletSway { 50% { transform: translateX(14px) scaleY(1.08); } }
@keyframes climb { 50% { transform: translateY(-34px) rotate(-18deg); } }
@keyframes cisternGlow { 50% { box-shadow: inset 0 0 42px rgba(255,255,255,.92), 0 0 48px rgba(246,214,230,.45); } }
@keyframes diagramDraw { to { stroke-dashoffset: -180; } }

@media (max-width: 760px) {
  .scene { padding: 8vh 6vw; }
  .hero-copy, .envelope-left, .nursery-card { margin-left: 0; }
  .rain-label { margin-top: 22vh; }
  .seed-index { right: 1vw; }
  h1 { font-size: 24vw; }
  h2 { font-size: 17vw; }
  .floating-packet, .weather-flag { display: none; }
}