:root {
  /* Typography design note: IBM Plex Mono only for a few transmission coordinates. Interaction should be poetic: hovering over a poem strip causes its reflection to resolve. */
  --moon-milk: #F6F0D8;
  --lacquer-night: #080A12;
  --deep-stream: #101E3A;
  --bamboo-ink: #243B2A;
  --silver-current: #B9C7D9;
  --kaguya-vermilion: #D85A3A;
  --moonlit-wisteria: #9A8FE8;
  --scene-x: 0;
  --ripple-x: 50%;
  --ripple-y: 50%;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--lacquer-night);
  color: var(--moon-milk);
  font-family: "Instrument Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 84%, rgba(246, 240, 216, .09), transparent 23%),
    radial-gradient(circle at 72% 24%, rgba(154, 143, 232, .10), transparent 28%),
    linear-gradient(115deg, transparent 0 38%, rgba(185, 199, 217, .05) 39%, transparent 54%),
    repeating-linear-gradient(90deg, rgba(246, 240, 216, .015) 0 1px, transparent 1px 78px);
  mix-blend-mode: screen;
  z-index: 2;
}

button { font: inherit; color: inherit; }

.broadcast {
  display: flex;
  width: 500vw;
  height: 100vh;
  transform: translate3d(calc(var(--scene-x) * -100vw), 0, 0);
  transition: transform 1200ms cubic-bezier(.76, 0, .18, 1);
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  flex: 0 0 100vw;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 16%, rgba(246, 240, 216, .12), transparent 20%),
    linear-gradient(180deg, var(--lacquer-night) 0%, var(--deep-stream) 57%, var(--lacquer-night) 100%);
  clip-path: inset(0 0 0 0 round 0);
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x) var(--ripple-y), rgba(185, 199, 217, .18), transparent 18%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 8;
}

.scene.rippling::after { opacity: 1; animation: rippleBloom 900ms ease-out; }

.scene-mask {
  position: absolute;
  inset: -10%;
  background:
    linear-gradient(90deg, rgba(8, 10, 18, .98), transparent 14%, transparent 86%, rgba(8, 10, 18, .96)),
    repeating-radial-gradient(ellipse at 50% 72%, transparent 0 22px, rgba(185, 199, 217, .035) 23px 24px);
  opacity: .8;
  z-index: 1;
}

.bamboo-layer {
  position: fixed;
  top: -10vh;
  bottom: -10vh;
  width: 24vw;
  z-index: 20;
  pointer-events: none;
  opacity: .78;
  transition: transform 1200ms cubic-bezier(.76, 0, .18, 1);
}

.bamboo-left { left: -7vw; transform: translateX(calc(var(--scene-x) * -2vw)); }
.bamboo-right { right: -8vw; transform: translateX(calc(var(--scene-x) * 2.5vw)); }

.bamboo-layer i {
  position: absolute;
  bottom: 0;
  width: 16px;
  height: 122vh;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(36, 59, 42, .15), var(--bamboo-ink), rgba(185, 199, 217, .08));
  box-shadow: inset 0 0 0 1px rgba(246, 240, 216, .04), 0 0 24px rgba(36, 59, 42, .45);
  transform-origin: bottom center;
}
.bamboo-left i:nth-child(1) { left: 8%; transform: rotate(-4deg); }
.bamboo-left i:nth-child(2) { left: 28%; transform: rotate(2deg); height: 134vh; }
.bamboo-left i:nth-child(3) { left: 48%; transform: rotate(-1deg); }
.bamboo-left i:nth-child(4) { left: 68%; transform: rotate(5deg); height: 112vh; }
.bamboo-left i:nth-child(5) { left: 86%; transform: rotate(-6deg); }
.bamboo-right i:nth-child(1) { right: 10%; transform: rotate(4deg); }
.bamboo-right i:nth-child(2) { right: 32%; transform: rotate(-2deg); height: 136vh; }
.bamboo-right i:nth-child(3) { right: 56%; transform: rotate(3deg); }
.bamboo-right i:nth-child(4) { right: 78%; transform: rotate(-5deg); height: 116vh; }

.bamboo-layer i::before,
.bamboo-layer i::after {
  content: "";
  position: absolute;
  left: -55px;
  width: 125px;
  height: 1px;
  background: rgba(185, 199, 217, .16);
  transform: rotate(-18deg);
  box-shadow: 0 18px 0 rgba(36, 59, 42, .42), 0 38px 0 rgba(36, 59, 42, .32);
}
.bamboo-layer i::before { top: 25%; }
.bamboo-layer i::after { top: 62%; transform: rotate(16deg); }

.silver-flecks {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(246, 240, 216, .65) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(185, 199, 217, .35) 0 1px, transparent 2px);
  background-size: 131px 97px, 173px 149px;
  animation: fleckDrift 26s linear infinite;
}

.water-band {
  position: absolute;
  left: -5vw;
  right: -5vw;
  bottom: 10vh;
  height: 30vh;
  z-index: 5;
  overflow: hidden;
  background:
    radial-gradient(ellipse at var(--ripple-x) var(--ripple-y), rgba(246, 240, 216, .18), transparent 18%),
    linear-gradient(180deg, rgba(16, 30, 58, .05), rgba(16, 30, 58, .92) 36%, rgba(8, 10, 18, .98));
  border-top: 1px solid rgba(185, 199, 217, .22);
  border-bottom: 1px solid rgba(185, 199, 217, .08);
  transform: skewY(-2deg);
}

.water-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(176deg, transparent 0 18px, rgba(185, 199, 217, .11) 19px 20px, transparent 21px 44px);
  opacity: .58;
  animation: waterSlide 8s ease-in-out infinite alternate;
}

.ripple-lines {
  position: absolute;
  inset: 8% 0 auto 0;
  height: 80%;
  width: 100%;
  fill: none;
  stroke: var(--silver-current);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .55;
  filter: drop-shadow(0 0 11px rgba(185,199,217,.25));
}
.ripple-lines path { stroke-dasharray: 1320; animation: drawRipple 6s ease-in-out infinite alternate; }
.ripple-lines path:nth-child(2) { animation-delay: -1.8s; opacity: .7; }
.ripple-lines path:nth-child(3) { animation-delay: -3s; opacity: .38; }

.cropped-moon {
  position: absolute;
  width: min(64vh, 54vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, #fff9df, var(--moon-milk) 34%, rgba(246, 240, 216, .65) 56%, transparent 69%),
    repeating-linear-gradient(10deg, transparent 0 18px, rgba(16, 30, 58, .20) 19px 22px);
  filter: blur(.1px) drop-shadow(0 0 46px rgba(246, 240, 216, .32));
  opacity: .88;
  z-index: 3;
}
.moon-a { left: 28vw; bottom: -31vh; animation: moonTremble 5s ease-in-out infinite; }

.moon-reflection {
  position: absolute;
  left: 35%;
  bottom: -10%;
  width: 30%;
  height: 92%;
  background: radial-gradient(ellipse, rgba(246, 240, 216, .34), transparent 62%);
  filter: blur(8px);
  animation: reflectionTremble 3.8s ease-in-out infinite;
}

.title-slip {
  position: absolute;
  top: 13vh;
  left: 52vw;
  z-index: 10;
  width: 96px;
  min-height: 64vh;
  padding: 28px 18px;
  color: var(--lacquer-night);
  background: linear-gradient(180deg, rgba(246, 240, 216, .98), rgba(185, 199, 217, .84));
  box-shadow: 0 22px 80px rgba(0,0,0,.42), inset 0 0 0 1px rgba(8,10,18,.18);
  writing-mode: vertical-rl;
  transform: rotate(2deg) translateY(18px);
  animation: slipArrive 1600ms cubic-bezier(.2,.8,.2,1) both;
}
.title-slip h1, .title-slip p { margin: 0; }
.title-slip h1 {
  font-family: "Shippori Mincho", "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(2.1rem, 5.8vh, 4.4rem);
  letter-spacing: .11em;
  line-height: 1;
}
.title-slip p {
  font-family: "Zen Old Mincho", "Shippori Mincho", serif;
  font-size: .82rem;
  letter-spacing: .32em;
  opacity: .66;
  margin-left: 12px;
}

.poem-strip {
  position: absolute;
  z-index: 12;
  width: 70px;
  padding: 18px 10px;
  writing-mode: vertical-rl;
  font-family: "Zen Old Mincho", "Shippori Mincho", serif;
  color: var(--moon-milk);
  background: rgba(8, 10, 18, .42);
  border: 1px solid rgba(185, 199, 217, .2);
  box-shadow: 0 0 40px rgba(154, 143, 232, .08);
  backdrop-filter: blur(10px);
}
.poem-strip span { font-size: 1.28rem; letter-spacing: .25em; }
.poem-strip em {
  display: block;
  margin-right: 12px;
  color: var(--silver-current);
  font-style: normal;
  font-size: .72rem;
  line-height: 1.8;
  opacity: .24;
  filter: blur(3px);
  transition: opacity .7s ease, filter .7s ease, transform .7s ease;
}
.resolve-strip:hover em, .resolve-strip:focus em, .resolve-strip.resolved em {
  opacity: .92;
  filter: blur(0);
  transform: translateY(-8px);
}
.scene-signal .poem-strip { left: 18vw; top: 21vh; }
.strip-low { right: 16vw; bottom: 26vh; }
.palace-strip { left: 14vw; top: 16vh; }

.mono-note, .moon-phase {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--silver-current);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .68rem;
}
.mono-note { position: absolute; z-index: 12; left: 8vw; bottom: 8vh; opacity: .66; }
.mono-right { left: auto; right: 9vw; top: 12vh; bottom: auto; }

.moon-phase {
  position: fixed;
  top: 28px;
  right: 34px;
  z-index: 30;
  width: 68px;
  height: 68px;
  border: 1px solid rgba(185, 199, 217, .25);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 35%, rgba(246, 240, 216, .22), transparent 55%);
  animation: phaseRotate 22s linear infinite;
}
.moon-phase span { position: absolute; top: -18px; font-size: .52rem; opacity: .6; }
.moon-phase b { font-weight: 400; color: var(--moon-milk); }

.progress-thread {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 20vw;
  z-index: 30;
  background: linear-gradient(90deg, var(--kaguya-vermilion), var(--silver-current), transparent);
  box-shadow: 0 0 18px rgba(216, 90, 58, .4);
  transition: width 900ms cubic-bezier(.76,0,.18,1);
}

.scene-nav {
  position: fixed;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 32;
  display: grid;
  gap: 12px;
}
.scene-nav button {
  width: 8px;
  height: 38px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(185, 199, 217, .25);
  border-radius: 999px;
  color: transparent;
  background: rgba(246, 240, 216, .1);
  cursor: pointer;
  transition: background .5s ease, height .5s ease, border-color .5s ease;
}
.scene-nav button.active { height: 62px; background: var(--moon-milk); border-color: var(--moon-milk); }

.lacquer-plaque, .floating-caption, .closing-ritual {
  position: absolute;
  z-index: 12;
  max-width: 520px;
  padding: 30px 34px;
  background: linear-gradient(135deg, rgba(8, 10, 18, .82), rgba(16, 30, 58, .52));
  border: 1px solid rgba(185, 199, 217, .18);
  box-shadow: 0 28px 90px rgba(0,0,0,.46), inset 0 0 0 1px rgba(246, 240, 216, .03);
  backdrop-filter: blur(14px);
}
.lacquer-plaque { left: 12vw; top: 18vh; }
.eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  color: var(--kaguya-vermilion);
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: .72rem;
}
h2 {
  margin: 0 0 18px;
  font-family: "Shippori Mincho", "Zen Old Mincho", serif;
  font-size: clamp(2rem, 4.4vw, 5.4rem);
  line-height: .98;
  font-weight: 500;
  letter-spacing: -.03em;
}
p { margin: 0; color: rgba(246, 240, 216, .74); line-height: 1.75; }

.fan-gradient {
  position: absolute;
  right: -12vw;
  top: -18vh;
  width: 72vw;
  height: 88vh;
  z-index: 2;
  border-radius: 0 0 0 100%;
  background: conic-gradient(from 214deg at 100% 0%, rgba(154, 143, 232, .24), rgba(246, 240, 216, .12), rgba(16, 30, 58, .02), transparent 54%);
  opacity: .8;
}

.current-glyph, .final-glyph {
  position: absolute;
  z-index: 11;
  width: 260px;
  height: 72px;
  border-radius: 50%;
  border-top: 8px solid var(--silver-current);
  border-bottom: 1px solid rgba(185, 199, 217, .2);
  filter: drop-shadow(0 0 18px rgba(185,199,217,.3));
}
.current-glyph { right: 24vw; top: 27vh; transform: rotate(-8deg); }
.current-glyph::after, .final-glyph::after {
  content: "";
  position: absolute;
  right: 0;
  top: -16px;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--lacquer-night);
  box-shadow: -18px 0 0 var(--moon-milk);
}

.paper-boat {
  position: absolute;
  z-index: 13;
  width: 58px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--lacquer-night);
  font-family: "Zen Old Mincho", serif;
  background: linear-gradient(135deg, var(--moon-milk), var(--silver-current));
  clip-path: polygon(0 45%, 34% 0, 50% 40%, 68% 0, 100% 45%, 78% 100%, 18% 100%);
  animation: boatDrift 8s ease-in-out infinite;
}
.boat-one { left: 58vw; top: 58vh; }
.boat-two { left: 74vw; top: 70vh; animation-delay: -2.3s; opacity: .72; }

.caption-ribbon {
  position: absolute;
  left: 42vw;
  top: 44%;
  padding: 8px 18px;
  color: var(--silver-current);
  font-family: "Instrument Sans", Inter, sans-serif;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-top: 1px solid rgba(185, 199, 217, .28);
  border-bottom: 1px solid rgba(185, 199, 217, .16);
  transform: translateX(calc((var(--drag-bend, 0)) * 1px));
  transition: transform .28s ease;
}

.sleeve {
  position: absolute;
  z-index: 6;
  width: 48vw;
  height: 44vh;
  border-radius: 58% 42% 64% 36% / 40% 60% 36% 64%;
  background:
    radial-gradient(circle at 70% 20%, rgba(154, 143, 232, .35), transparent 28%),
    linear-gradient(135deg, rgba(246, 240, 216, .88), rgba(185, 199, 217, .38) 52%, rgba(16, 30, 58, .1));
  filter: drop-shadow(0 0 54px rgba(154, 143, 232, .18));
  opacity: .82;
  animation: sleeveFloat 7s ease-in-out infinite;
}
.sleeve-front { left: 12vw; top: 24vh; transform: rotate(-13deg); }
.sleeve-back { right: 5vw; bottom: 18vh; transform: rotate(16deg) scale(.78); opacity: .42; animation-delay: -3s; }
.floating-caption { right: 12vw; top: 17vh; }
.seal {
  position: absolute;
  left: 49vw;
  top: 54vh;
  z-index: 14;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  background: var(--kaguya-vermilion);
  color: var(--moon-milk);
  font-family: "Shippori Mincho", serif;
  font-size: 1.8rem;
  transform: rotate(8deg);
  box-shadow: 0 0 34px rgba(216, 90, 58, .36);
}

.moon-rabbit { position: absolute; left: 18vw; top: 16vh; width: 180px; height: 120px; z-index: 11; }
.moon-rabbit b { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--moon-milk); box-shadow: 0 0 14px rgba(246,240,216,.8); }
.moon-rabbit b:nth-child(1) { left: 12px; top: 68px; }
.moon-rabbit b:nth-child(2) { left: 58px; top: 28px; }
.moon-rabbit b:nth-child(3) { left: 108px; top: 46px; }
.moon-rabbit b:nth-child(4) { left: 142px; top: 12px; }
.moon-rabbit b:nth-child(5) { left: 154px; top: 88px; }
.moon-rabbit::before { content: ""; position: absolute; inset: 16px 22px; border: 1px solid rgba(185,199,217,.28); clip-path: polygon(0 62%, 28% 24%, 58% 38%, 82% 0, 100% 78%); }

.submerged-moon {
  position: absolute;
  z-index: 4;
  right: 11vw;
  bottom: 18vh;
  width: min(46vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, rgba(246,240,216,.9), rgba(185,199,217,.45) 42%, rgba(154,143,232,.18) 62%, transparent 72%);
  filter: blur(.3px) drop-shadow(0 0 62px rgba(154,143,232,.28));
}
.palace-silhouette {
  position: absolute;
  right: 18vw;
  bottom: 31vh;
  z-index: 7;
  width: 34vw;
  height: 22vh;
  opacity: .08;
  transition: opacity 900ms ease, transform 900ms ease;
  transform: translateY(32px);
}
.palace-silhouette.revealed { opacity: .72; transform: translateY(0); }
.palace-silhouette i { position: absolute; bottom: 0; background: linear-gradient(180deg, rgba(246,240,216,.72), rgba(154,143,232,.2)); border: 1px solid rgba(185,199,217,.22); }
.palace-silhouette i:nth-child(1) { left: 0; width: 100%; height: 18%; }
.palace-silhouette i:nth-child(2) { left: 10%; width: 18%; height: 64%; clip-path: polygon(50% 0, 100% 30%, 100% 100%, 0 100%, 0 30%); }
.palace-silhouette i:nth-child(3) { left: 38%; width: 24%; height: 95%; clip-path: polygon(50% 0, 100% 24%, 100% 100%, 0 100%, 0 24%); }
.palace-silhouette i:nth-child(4) { right: 12%; width: 18%; height: 58%; clip-path: polygon(50% 0, 100% 30%, 100% 100%, 0 100%, 0 30%); }
.palace-silhouette i:nth-child(5) { left: 4%; right: 4%; height: 8%; bottom: 54%; }
.palace-plaque { left: 12vw; top: 43vh; max-width: 460px; }

.return-moon {
  position: absolute;
  left: -16vw;
  top: -22vh;
  width: 58vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246,240,216,.55), rgba(185,199,217,.18) 45%, transparent 68%);
  filter: blur(1px);
}
.closing-ritual { right: 12vw; top: 18vh; text-align: left; }
.seal-button {
  margin-top: 24px;
  padding: 14px 20px;
  border: 0;
  background: var(--kaguya-vermilion);
  color: var(--moon-milk);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .72rem;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(216, 90, 58, .24);
}
.final-glyph { left: 18vw; bottom: 31vh; transform: rotate(6deg) scale(1.24); }
.final-boat { left: 28vw; top: 42%; }
.final-boat.sent { animation: finalBoat 2.2s cubic-bezier(.32,.72,.14,1) forwards; }
.returned-message {
  position: absolute;
  z-index: 16;
  left: 31vw;
  bottom: 43vh;
  color: var(--silver-current);
  font-family: "Zen Old Mincho", serif;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1s ease, transform 1s ease;
}
.returned-message.visible { opacity: .86; transform: translateY(0); }

.cursor-glint {
  position: fixed;
  z-index: 100;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246,240,216,.18), rgba(154,143,232,.08) 28%, transparent 64%);
  pointer-events: none;
  transform: translate3d(-200px,-200px,0);
  mix-blend-mode: screen;
}

@keyframes slipArrive { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: rotate(2deg) translateY(-28px); } to { opacity: 1; clip-path: inset(0); transform: rotate(2deg) translateY(18px); } }
@keyframes moonTremble { 0%,100% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(-10px) scaleX(1.03); } }
@keyframes reflectionTremble { 0%,100% { transform: scaleX(1) skewX(0deg); opacity: .7; } 50% { transform: scaleX(1.18) skewX(-8deg); opacity: .92; } }
@keyframes waterSlide { from { transform: translateX(-3vw); } to { transform: translateX(3vw); } }
@keyframes drawRipple { from { stroke-dashoffset: 1320; } to { stroke-dashoffset: 0; } }
@keyframes fleckDrift { from { background-position: 0 0, 0 0; } to { background-position: 262px 194px, -173px 149px; } }
@keyframes phaseRotate { to { transform: rotate(360deg); } }
@keyframes boatDrift { 0%,100% { transform: translate(0,0) rotate(-3deg); } 50% { transform: translate(34px,-18px) rotate(5deg); } }
@keyframes sleeveFloat { 0%,100% { translate: 0 0; border-radius: 58% 42% 64% 36% / 40% 60% 36% 64%; } 50% { translate: 22px -14px; border-radius: 42% 58% 44% 56% / 56% 44% 62% 38%; } }
@keyframes rippleBloom { from { transform: scale(.85); } to { transform: scale(1.15); } }
@keyframes finalBoat { to { transform: translate(48vw, -8vh) rotate(9deg); opacity: 0; } }

@media (max-width: 800px) {
  .title-slip { left: 58vw; width: 78px; }
  .lacquer-plaque, .floating-caption, .closing-ritual { left: 14vw; right: 8vw; top: 16vh; max-width: none; padding: 24px; }
  .floating-caption, .closing-ritual { left: 12vw; }
  h2 { font-size: clamp(2rem, 10vw, 4rem); }
  .scene-nav { left: 14px; }
  .bamboo-layer { width: 18vw; opacity: .45; }
  .moon-phase { right: 18px; top: 18px; }
}