:root {
  /* IBM Plex Sans KR* KR** for small annotations */
  --moon-paper: #F7F1E6;
  --fog-wash: #DDE8E5;
  --rain-blue: #8BB7C8;
  --persimmon-omen: #E9875E;
  --ink-plum: #2B2238;
  --moss-shadow: #596B4D;
  --pale-lilac: #D8C7E8;
  --wet-gold: #C9A646;
  --scroll: 0;
  --mouse-x: 50vw;
  --mouse-y: 50vh;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--moon-paper);
  color: var(--ink-plum);
  font-family: "Noto Serif KR", serif;
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .34;
  mix-blend-mode: multiply;
  background-image:
    linear-gradient(92deg, rgba(43,34,56,.035) 1px, transparent 1px),
    linear-gradient(177deg, rgba(89,107,77,.028) 1px, transparent 1px),
    radial-gradient(circle at 19% 27%, rgba(201,166,70,.13) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 68%, rgba(139,183,200,.12) 0 1px, transparent 2px);
  background-size: 37px 100%, 100% 43px, 71px 83px, 97px 109px;
}

.cursor-wash {
  position: fixed;
  width: 30vmax;
  height: 30vmax;
  left: var(--mouse-x);
  top: var(--mouse-y);
  transform: translate(-50%, -50%);
  border-radius: 47% 53% 58% 42%;
  background: radial-gradient(circle, rgba(139,183,200,.18), rgba(216,199,232,.1) 42%, transparent 68%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 1;
  transition: opacity .8s ease;
}

.observatory { position: relative; z-index: 2; }

.chamber {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(34px, 6vw, 92px);
  display: grid;
  align-items: center;
}

.chamber::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -3;
  background:
    radial-gradient(circle at 20% 18%, rgba(221,232,229,.82), transparent 31%),
    radial-gradient(circle at 78% 72%, rgba(216,199,232,.5), transparent 34%),
    linear-gradient(130deg, rgba(247,241,230,.92), rgba(221,232,229,.58));
}

.chamber::after {
  content: "";
  position: absolute;
  inset: auto -6% -4% -6%;
  height: 90px;
  background: var(--moon-paper);
  clip-path: polygon(0 35%, 8% 42%, 17% 25%, 27% 44%, 39% 31%, 51% 48%, 63% 29%, 74% 43%, 86% 27%, 100% 39%, 100% 100%, 0 100%);
  opacity: .78;
  z-index: 7;
}

.first-drop { grid-template-columns: 1fr; }

.water-bloom {
  position: absolute;
  border-radius: 44% 56% 61% 39% / 46% 42% 58% 54%;
  filter: blur(1px) saturate(.9);
  mix-blend-mode: multiply;
}

.bloom-hero {
  width: min(58vw, 720px);
  height: min(58vw, 720px);
  left: 36vw;
  top: 10vh;
  background:
    radial-gradient(circle at 39% 43%, rgba(139,183,200,.52), transparent 17%),
    radial-gradient(circle at 58% 49%, rgba(216,199,232,.45), transparent 25%),
    radial-gradient(circle at 52% 58%, rgba(233,135,94,.2), transparent 38%),
    radial-gradient(circle at 48% 48%, rgba(221,232,229,.72), transparent 66%);
  animation: bloomGrow 8s ease-in-out infinite alternate;
}

.ink-drop {
  position: absolute;
  width: 18px;
  height: 23px;
  left: 55vw;
  top: 26vh;
  border-radius: 50% 50% 54% 46%;
  background: var(--ink-plum);
  opacity: .62;
  box-shadow: 0 0 80px 48px rgba(139,183,200,.18);
  animation: dropPulse 5s ease-in-out infinite;
}

.hero-title-block {
  width: min(760px, 76vw);
  margin-left: clamp(10px, 8vw, 130px);
  transform: translateY(calc(var(--scroll) * -10px));
}

.kicker {
  font-family: "IBM Plex Sans KR", sans-serif;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: clamp(10px, 1vw, 13px);
  color: var(--moss-shadow);
  margin: 0 0 18px;
}

h1, h2 {
  font-family: "Fraunces", serif;
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.055em;
  margin: 0;
  color: var(--ink-plum);
}

h1 {
  font-size: clamp(72px, 15vw, 210px);
  text-shadow: 0 24px 60px rgba(43,34,56,.08);
}

h2 { font-size: clamp(44px, 7.8vw, 112px); }

.poem-line, .section-copy p:not(.kicker) {
  font-size: clamp(17px, 2vw, 28px);
  line-height: 1.52;
  color: rgba(43,34,56,.78);
  max-width: 620px;
}

.vertical-note {
  position: absolute;
  right: clamp(22px, 6vw, 90px);
  top: 15vh;
  writing-mode: vertical-rl;
  font-family: "Noto Serif KR", serif;
  font-size: clamp(18px, 2.3vw, 31px);
  color: rgba(89,107,77,.72);
  letter-spacing: .2em;
}

.annotation, .calendar-scrap, .side-caption {
  position: absolute;
  font-family: "IBM Plex Sans KR", sans-serif;
  color: rgba(43,34,56,.68);
  font-size: 12px;
  letter-spacing: .08em;
}

.cluster-one {
  left: 14vw;
  bottom: 18vh;
  padding-left: 54px;
}

.cluster-one i {
  position: absolute;
  left: 0;
  top: 7px;
  width: 42px;
  height: 1px;
  background: var(--wet-gold);
}

.seal {
  position: absolute;
  border: 1px solid rgba(201,166,70,.74);
  background: rgba(247,241,230,.45);
  color: var(--moss-shadow);
  border-radius: 50%;
  width: 82px;
  height: 82px;
  font-family: "IBM Plex Sans KR", sans-serif;
  letter-spacing: .05em;
  cursor: pointer;
  box-shadow: inset 0 0 28px rgba(201,166,70,.18), 0 15px 45px rgba(43,34,56,.05);
  transition: transform .45s ease, background .45s ease;
}

.seal:hover { transform: scale(1.08) rotate(-5deg); background: rgba(221,232,229,.62); }
.uncertainty-seal { right: 18vw; bottom: 17vh; }

.seal .ripple {
  position: absolute;
  border: 1px solid rgba(233,135,94,.45);
  border-radius: 50%;
  inset: 20%;
  animation: rippleOut .9s ease-out forwards;
  pointer-events: none;
}

.paper-observatory {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 4vw;
  background: linear-gradient(108deg, var(--fog-wash), var(--moon-paper) 48%, rgba(216,199,232,.32));
}

.fold-shadow {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38vw;
  background: linear-gradient(100deg, rgba(43,34,56,.12), transparent 58%);
  clip-path: polygon(0 0, 65% 0, 42% 100%, 0 100%);
  opacity: .28;
}

.forecast-map {
  position: relative;
  min-height: 68vh;
  border-radius: 43% 57% 49% 51% / 48% 43% 57% 52%;
}

.contour-svg, .thread-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.draw-line {
  fill: none;
  stroke: rgba(43,34,56,.55);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: calc(760 - (var(--scroll) * 360));
  transition: stroke-dashoffset .15s linear;
}

.line-b { stroke: rgba(89,107,77,.55); stroke-width: 1.5; }
.line-c { stroke: rgba(201,166,70,.6); stroke-width: 1.2; }
.line-d { stroke: rgba(233,135,94,.52); stroke-width: 1.4; }

.wash {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
  filter: blur(3px);
}

.wash-blue { width: 44%; height: 46%; left: 12%; top: 18%; background: radial-gradient(circle, rgba(139,183,200,.62), transparent 67%); }
.wash-lilac { width: 42%; height: 42%; right: 16%; top: 8%; background: radial-gradient(circle, rgba(216,199,232,.7), transparent 69%); }
.wash-persimmon { width: 30%; height: 30%; left: 47%; bottom: 17%; background: radial-gradient(circle, rgba(233,135,94,.36), transparent 70%); }

.calendar-scrap {
  background: rgba(247,241,230,.54);
  border: 1px solid rgba(43,34,56,.12);
  padding: 14px 18px;
  transform: rotate(-7deg);
  box-shadow: 0 16px 45px rgba(43,34,56,.08);
}
.scrap-a { left: 13%; top: 9%; }
.scrap-b { right: 13%; bottom: 17%; transform: rotate(5deg); }
.map-seal { left: 56%; top: 44%; }

.section-copy { position: relative; z-index: 4; }
.copy-right { align-self: end; margin-bottom: 10vh; }
.copy-left { max-width: 680px; margin-left: 4vw; align-self: start; padding-top: 10vh; }
.side-caption { right: 28px; bottom: 120px; writing-mode: vertical-rl; color: rgba(89,107,77,.62); }

.moon-jar-of-maybes {
  grid-template-columns: .82fr 1.18fr;
  background: linear-gradient(124deg, rgba(247,241,230,.98), rgba(216,199,232,.33) 54%, rgba(221,232,229,.86));
}

.jar-stage { position: relative; min-height: 72vh; grid-column: 2; grid-row: 1; }
.moon-jar { position: absolute; left: 12%; top: 5%; width: min(46vw, 520px); height: min(58vh, 560px); }
.jar-neck {
  position: absolute;
  left: 35%; top: 0; width: 30%; height: 19%;
  background: linear-gradient(90deg, rgba(247,241,230,.35), rgba(255,255,255,.58), rgba(221,232,229,.25));
  border: 1px solid rgba(43,34,56,.13);
  border-bottom: 0;
  border-radius: 44% 44% 18% 18%;
}
.jar-body {
  position: absolute;
  inset: 13% 0 0;
  border-radius: 49% 51% 47% 53% / 43% 42% 58% 57%;
  background:
    radial-gradient(circle at 42% 33%, rgba(255,255,255,.82), transparent 18%),
    radial-gradient(circle at 58% 62%, rgba(139,183,200,.24), transparent 39%),
    linear-gradient(130deg, rgba(247,241,230,.42), rgba(221,232,229,.58), rgba(216,199,232,.2));
  border: 1px solid rgba(43,34,56,.14);
  box-shadow: inset -25px -35px 90px rgba(43,34,56,.07), 0 35px 90px rgba(43,34,56,.08);
}
.prediction {
  position: absolute;
  font-family: "Noto Serif KR", serif;
  color: rgba(43,34,56,.76);
  background: rgba(247,241,230,.32);
  border-radius: 50%;
  padding: 18px 22px;
  animation: floatNote 7s ease-in-out infinite alternate;
}
.frag-one { left: 21%; top: 28%; }
.frag-two { right: 15%; top: 48%; animation-delay: -2s; }
.frag-three { left: 31%; bottom: 18%; animation-delay: -4s; }
.thread-one, .thread-two { stroke: rgba(201,166,70,.5); stroke-width: 1.1; }
.phase { position: absolute; border-radius: 50%; border: 1px solid rgba(43,34,56,.22); }
.phase-one { width: 36px; height: 36px; right: 13%; top: 13%; background: var(--moon-paper); }
.phase-two { width: 28px; height: 28px; left: 8%; bottom: 24%; background: linear-gradient(90deg, var(--ink-plum) 50%, transparent 50%); opacity: .5; }
.phase-three { width: 18px; height: 18px; right: 22%; bottom: 10%; background: var(--wet-gold); opacity: .52; }
.jar-seal { left: 9vw; bottom: 14vh; }

.horizon-of-outcomes {
  background: linear-gradient(180deg, rgba(221,232,229,.92), rgba(247,241,230,.86) 42%, rgba(139,183,200,.4));
}
.horizon-window {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  height: 30vh;
  overflow: hidden;
  transform: rotate(-1.5deg);
}
.painted-horizon {
  position: absolute;
  left: -20vw;
  top: 0;
  width: 180vw;
  height: 100%;
  transform: translateX(calc(var(--horizon-drift, 0) * -1px));
  background:
    linear-gradient(90deg, transparent, rgba(201,166,70,.46) 12%, rgba(139,183,200,.62) 28%, rgba(216,199,232,.58) 45%, rgba(233,135,94,.34) 62%, rgba(89,107,77,.48) 78%, transparent),
    radial-gradient(ellipse at 44% 55%, rgba(247,241,230,.82), transparent 41%);
  clip-path: polygon(0 48%, 9% 39%, 21% 52%, 34% 32%, 48% 46%, 60% 37%, 72% 50%, 88% 35%, 100% 44%, 100% 71%, 0 78%);
}
.outcome {
  position: absolute;
  font-family: "IBM Plex Sans KR", sans-serif;
  font-size: 12px;
  color: rgba(43,34,56,.65);
  letter-spacing: .1em;
}
.o1 { left: 15%; top: 21%; } .o2 { left: 32%; bottom: 17%; } .o3 { left: 51%; top: 29%; } .o4 { left: 68%; bottom: 20%; } .o5 { left: 84%; top: 17%; }
.copy-float { width: min(720px, 84vw); margin-left: 8vw; margin-top: -25vh; }
.fan { position: absolute; width: 190px; height: 190px; border-radius: 50%; background: conic-gradient(from 210deg, rgba(201,166,70,.35), transparent 10deg 22deg, rgba(233,135,94,.22) 24deg 34deg, transparent 36deg 52deg, rgba(139,183,200,.32) 54deg 64deg, transparent 66deg); opacity: .7; }
.fan-one { right: 13vw; top: 14vh; transform: rotate(18deg); }
.fan-two { left: 11vw; bottom: 10vh; transform: rotate(-22deg) scale(.72); }
.brush-arrow { position: absolute; right: 20vw; bottom: 18vh; width: 170px; height: 28px; background: linear-gradient(90deg, transparent, rgba(43,34,56,.48)); clip-path: polygon(0 42%, 76% 34%, 76% 0, 100% 50%, 76% 100%, 76% 66%, 0 58%); transform: rotate(-9deg); }

.unsealed-tomorrow {
  background: radial-gradient(circle at 66% 42%, rgba(233,135,94,.22), transparent 28%), linear-gradient(128deg, var(--moon-paper), var(--fog-wash));
}
.tomorrow-tableau { position: absolute; inset: 0; }
.open-envelope {
  position: absolute;
  width: min(52vw, 620px);
  height: 42vh;
  left: 11vw;
  top: 25vh;
  background: rgba(247,241,230,.55);
  border: 1px solid rgba(43,34,56,.13);
  clip-path: polygon(0 24%, 50% 0, 100% 24%, 100% 100%, 0 100%);
  box-shadow: 0 35px 100px rgba(43,34,56,.08);
}
.open-envelope::after { content: ""; position: absolute; inset: 24% 0 0; background: linear-gradient(145deg, rgba(216,199,232,.28), rgba(221,232,229,.65)); clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%); }
.final-bloom { position: absolute; width: 40vw; height: 40vw; right: 9vw; top: 17vh; border-radius: 50%; background: radial-gradient(circle at 45% 43%, rgba(233,135,94,.34), transparent 18%), radial-gradient(circle at 57% 56%, rgba(201,166,70,.28), transparent 28%), radial-gradient(circle, rgba(216,199,232,.42), transparent 67%); mix-blend-mode: multiply; animation: bloomGrow 9s ease-in-out infinite alternate-reverse; }
.final-copy { margin-left: auto; margin-right: 8vw; width: min(720px, 82vw); }
.final-note { left: 7vw; right: auto; top: 15vh; color: rgba(43,34,56,.62); }
.final-seal { right: 12vw; bottom: 14vh; }
.dot-migration i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-plum); opacity: .42; animation: migrate 6s ease-in-out infinite alternate; }
.dot-migration i:nth-child(1) { left: 34%; top: 31%; } .dot-migration i:nth-child(2) { left: 39%; top: 29%; animation-delay: -.7s; } .dot-migration i:nth-child(3) { left: 45%; top: 34%; animation-delay: -1.3s; } .dot-migration i:nth-child(4) { left: 51%; top: 31%; animation-delay: -2s; } .dot-migration i:nth-child(5) { left: 56%; top: 37%; animation-delay: -2.6s; } .dot-migration i:nth-child(6) { left: 62%; top: 34%; animation-delay: -3.1s; } .dot-migration i:nth-child(7) { left: 69%; top: 39%; animation-delay: -3.7s; }

.drift-layer { transition: transform .6s ease-out; }

@keyframes bloomGrow { from { transform: scale(.82) rotate(-2deg); opacity: .64; border-radius: 45% 55% 51% 49%; } to { transform: scale(1.08) rotate(3deg); opacity: .9; border-radius: 57% 43% 46% 54%; } }
@keyframes dropPulse { 0%, 100% { transform: scale(.85); opacity: .36; } 45% { transform: scale(1.25); opacity: .68; } }
@keyframes floatNote { from { transform: translate3d(-8px, 12px, 0) rotate(-3deg); } to { transform: translate3d(12px, -14px, 0) rotate(4deg); } }
@keyframes rippleOut { to { inset: -30%; opacity: 0; } }
@keyframes migrate { to { transform: translate(28px, -17px); opacity: .78; } }

@media (max-width: 850px) {
  .paper-observatory, .moon-jar-of-maybes { grid-template-columns: 1fr; }
  .jar-stage { grid-column: 1; opacity: .9; }
  .copy-left { margin-left: 0; padding-top: 2vh; }
  .copy-right { margin-bottom: 0; }
  .moon-jar { width: 76vw; left: 10%; }
  .vertical-note { opacity: .55; }
  .seal { width: 68px; height: 68px; }
  .final-copy, .copy-float, .hero-title-block { margin-left: 0; margin-right: 0; }
}