:root {
  --lacquer: #070812;
  --moon: #F6F0FF;
  --lilac: #BFC3FF;
  --pink: #FF9ECF;
  --green: #A7FFD9;
  --violet: #4B1D8F;
  --peach: #FFB27A;
  --silver: #D8E3F2;
  --phase-glow: #BFC3FF;
  --phase-warm: #FF9ECF;
  color-scheme: dark;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  overflow: hidden;
  min-height: 100vh;
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Inter, system-ui, sans-serif;
  color: var(--moon);
  background:
    radial-gradient(circle at 83% 12%, rgba(191, 195, 255, .28), transparent 29vw),
    radial-gradient(circle at 15% 95%, rgba(75, 29, 143, .55), transparent 34vw),
    linear-gradient(115deg, #070812 0%, #0b0d22 45%, #14051f 100%);
}

button {
  font: inherit;
  color: inherit;
}

.moon-dust {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .32;
  background-image:
    radial-gradient(circle, rgba(246,240,255,.55) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(167,255,217,.35) 0 1px, transparent 1.5px),
    linear-gradient(100deg, transparent 0 47%, rgba(216,227,242,.12) 49%, transparent 52%);
  background-size: 43px 47px, 89px 67px, 320px 100%;
  mix-blend-mode: screen;
  animation: dustDrift 18s linear infinite;
}

.cursor-aura {
  position: fixed;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  translate: -50% -50%;
  pointer-events: none;
  z-index: 19;
  background: radial-gradient(circle, rgba(216,227,242,.18), rgba(191,195,255,.08) 38%, transparent 70%);
  filter: blur(1px);
}

.chamber {
  height: 100vh;
  width: 100vw;
  position: relative;
  transition: background 900ms ease;
}

.scene {
  position: absolute;
  inset: 0;
  min-height: 100vh;
  width: 100vw;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04) rotate(.001deg);
  transition: opacity 850ms ease, transform 1100ms cubic-bezier(.2,.72,.07,1), visibility 850ms;
}

.scene.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1) rotate(0deg);
  z-index: 2;
}

.phase-instrument {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 18px;
  justify-items: center;
}

.phase-cord {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 18px 8px;
}

.phase-cord::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(var(--silver), var(--pink), var(--green));
  box-shadow: 0 0 18px var(--lilac);
}

.phase-bead {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(246,240,255,.7);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #fff, var(--lilac) 34%, var(--violet) 72%, #070812);
  box-shadow: 0 0 14px rgba(191,195,255,.42);
  cursor: pointer;
  padding: 0;
}

.phase-bead span {
  position: absolute;
  right: 27px;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  font-family: Orbitron, "Arial Narrow", system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(246,240,255,.48);
  opacity: 0;
  transition: opacity 220ms ease;
  white-space: nowrap;
}

.phase-bead.active {
  background: radial-gradient(circle at 60% 35%, var(--moon), var(--phase-warm) 38%, var(--phase-glow) 69%, var(--lacquer));
  transform: scale(1.3);
}

.phase-bead.active span,
.phase-bead:hover span { opacity: 1; }

.phase-seal {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  position: relative;
  border: 1px solid rgba(216,227,242,.72);
  background: radial-gradient(circle at 35% 30%, rgba(246,240,255,.95), rgba(191,195,255,.38) 36%, rgba(7,8,18,.88) 67%);
  box-shadow: inset 0 0 25px rgba(246,240,255,.15), 0 0 28px rgba(191,195,255,.33);
  overflow: hidden;
}

.phase-fill {
  position: absolute;
  inset: 0;
  background: conic-gradient(from -70deg, transparent 0deg, rgba(167,255,217,.72) var(--fill, 20deg), transparent calc(var(--fill, 20deg) + 24deg));
  mix-blend-mode: screen;
  transition: --fill 700ms ease;
}

.phase-rabbit,
.rabbit {
  width: 21px;
  height: 14px;
  background: var(--moon);
  border-radius: 50% 50% 45% 45%;
  filter: drop-shadow(0 0 8px var(--pink));
}

.phase-rabbit {
  position: absolute;
  left: 31px;
  top: 38px;
  opacity: .75;
}

.phase-rabbit::before,
.phase-rabbit::after,
.rabbit::before,
.rabbit::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 5px;
  height: 15px;
  border-radius: 999px;
  background: var(--moon);
}

.phase-rabbit::before,
.rabbit::before { left: 5px; transform: rotate(-20deg); }
.phase-rabbit::after,
.rabbit::after { left: 12px; transform: rotate(24deg); }

.seal-text {
  position: absolute;
  inset: 10px;
  display: grid;
  place-items: end center;
  font-family: Orbitron, "Arial Narrow", system-ui, sans-serif;
  font-size: 8px;
  letter-spacing: .22em;
  color: rgba(246,240,255,.7);
}

.moonrise {
  background:
    radial-gradient(ellipse at 16% 105%, rgba(255,158,207,.23), transparent 38vw),
    radial-gradient(circle at 74% 23%, rgba(246,240,255,.16), transparent 24vw),
    linear-gradient(130deg, #070812 0 55%, #100c2d 100%);
}

.flip-phone {
  position: absolute;
  width: min(650px, 64vw);
  height: min(760px, 84vh);
  left: 16vw;
  top: 4vh;
  transform: rotate(-11deg) skewY(-2deg);
  border-radius: 60px 60px 44px 44px;
  padding: 26px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.72), rgba(191,195,255,.22) 20%, rgba(75,29,143,.38) 46%, rgba(216,227,242,.74) 68%, rgba(255,158,207,.28)),
    radial-gradient(circle at 20% 15%, #fff, transparent 25%);
  box-shadow: 0 46px 80px rgba(0,0,0,.62), inset 0 0 30px rgba(255,255,255,.35);
  animation: phoneFloat 7s ease-in-out infinite;
}

.phone-hinge {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 18px;
  height: 26px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #D8E3F2 0 14px, #4B1D8F 14px 18px, #F6F0FF 18px 24px);
  box-shadow: inset 0 -8px 15px rgba(7,8,18,.52), 0 0 18px rgba(216,227,242,.55);
}

.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 42px 42px 32px 32px;
  overflow: hidden;
  border: 1px solid rgba(246,240,255,.65);
  background:
    linear-gradient(118deg, rgba(246,240,255,.1), transparent 18%, rgba(167,255,217,.12) 32%, transparent 45%),
    radial-gradient(circle at 58% 44%, rgba(246,240,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 40%, rgba(246,240,255,.82) 0 74px, rgba(191,195,255,.23) 75px 145px, transparent 146px),
    linear-gradient(155deg, rgba(7,8,18,.92), rgba(16,7,43,.88) 63%, rgba(75,29,143,.75));
  box-shadow: inset 0 0 80px rgba(7,8,18,.85), inset 0 0 0 8px rgba(216,227,242,.08);
}

.phone-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(103deg, transparent 0 42%, rgba(246,240,255,.22) 46%, transparent 51% 100%);
  animation: chromeSweep 4.2s ease-in-out infinite;
}

.carrier,
.signal-bars,
.time-code,
.sim-tray,
.chapter,
.bamboo-dates,
.soft-keys,
.sleeve-fold span,
.date-seal-large span,
.date-seal-large strong {
  font-family: Orbitron, "Arial Narrow", system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.carrier {
  position: absolute;
  top: 24px;
  left: 30px;
  font-size: 11px;
  color: var(--green);
  text-shadow: 0 0 12px var(--green);
}

.signal-bars {
  position: absolute;
  top: 23px;
  right: 30px;
  display: flex;
  gap: 4px;
  align-items: end;
}

.signal-bars i {
  width: 5px;
  background: var(--silver);
  box-shadow: 0 0 8px var(--silver);
}

.signal-bars i:nth-child(1) { height: 8px; }
.signal-bars i:nth-child(2) { height: 13px; }
.signal-bars i:nth-child(3) { height: 19px; }

.time-code {
  position: absolute;
  right: 33px;
  top: 78px;
  font-size: clamp(34px, 7vw, 82px);
  color: rgba(246,240,255,.92);
  text-shadow: 0 0 24px rgba(255,158,207,.56);
}

h1,
h2,
.vertical-title {
  font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  font-weight: 500;
}

h1 {
  position: absolute;
  left: 42px;
  bottom: 170px;
  margin: 0;
  font-size: clamp(58px, 9vw, 128px);
  line-height: .83;
  letter-spacing: -.06em;
  color: var(--moon);
  text-shadow: 0 0 26px rgba(191,195,255,.5);
}

.condensation {
  position: absolute;
  left: 45px;
  bottom: 128px;
  margin: 0;
  font-size: 12px;
  letter-spacing: .09em;
  color: rgba(216,227,242,.68);
}

.sim-tray {
  position: absolute;
  right: 42px;
  bottom: 120px;
  padding: 10px 18px;
  border-radius: 8px;
  color: var(--lacquer);
  background: linear-gradient(90deg, var(--silver), var(--lilac), var(--moon));
  font-size: 10px;
  box-shadow: 0 0 16px rgba(216,227,242,.38);
}

.crescent-unlock,
.charm {
  border: 1px solid rgba(246,240,255,.62);
  background: linear-gradient(120deg, rgba(216,227,242,.16), rgba(255,158,207,.13), rgba(167,255,217,.15));
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 18px rgba(246,240,255,.1), 0 0 22px rgba(191,195,255,.22);
  cursor: pointer;
}

.crescent-unlock {
  position: absolute;
  left: 48px;
  bottom: 42px;
  width: min(420px, calc(100% - 96px));
  height: 68px;
  border-radius: 999px;
  overflow: hidden;
}

.crescent-unlock strong {
  position: relative;
  z-index: 2;
  display: block;
  padding-left: 72px;
  font-family: Orbitron, "Arial Narrow", sans-serif;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.crescent-track {
  position: absolute;
  inset: 14px 18px;
  border-radius: 999px;
  background: radial-gradient(circle at var(--unlock, 12%) 50%, rgba(167,255,217,.45), transparent 18%), rgba(7,8,18,.45);
}

.crescent-thumb {
  position: absolute;
  top: 16px;
  left: var(--unlock, 18px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 65% 43%, transparent 0 14px, var(--moon) 15px 18px, var(--pink) 19px);
  filter: drop-shadow(0 0 12px var(--pink));
  transition: left 180ms ease;
}

.lacquer-pool {
  position: absolute;
  right: 6vw;
  bottom: 7vh;
  width: 46vw;
  height: 18vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(191,195,255,.28), rgba(7,8,18,.98) 68%);
  filter: blur(.2px);
  transform: rotate(-8deg);
}

.lacquer-pool span {
  position: absolute;
  left: 14%;
  top: 12%;
  transform: scaleY(-1) rotate(6deg);
  font-family: Orbitron, sans-serif;
  font-size: 9vw;
  color: rgba(216,227,242,.13);
}

.vertical-title {
  position: absolute;
  right: 15vw;
  top: 9vh;
  writing-mode: vertical-rl;
  font-size: clamp(70px, 10vw, 150px);
  color: rgba(246,240,255,.09);
}

.soft-keys {
  position: absolute;
  left: 5vw;
  bottom: 4vh;
  display: flex;
  gap: 22px;
  font-size: 10px;
  color: rgba(216,227,242,.5);
}

.bamboo {
  background: radial-gradient(circle at 82% 30%, rgba(167,255,217,.24), transparent 24vw), linear-gradient(90deg, #070812, #10122b 54%, #080a13);
}

.bamboo-panels {
  position: absolute;
  inset: -10vh -20vw;
  display: flex;
  justify-content: space-around;
  transform: skewX(-9deg);
}

.bamboo-panels i {
  width: 8vw;
  min-width: 74px;
  height: 120vh;
  background:
    repeating-linear-gradient(180deg, transparent 0 88px, rgba(246,240,255,.28) 89px 91px, transparent 92px 144px),
    linear-gradient(90deg, rgba(167,255,217,.04), rgba(167,255,217,.32), rgba(216,227,242,.07));
  border-left: 1px solid rgba(167,255,217,.28);
  border-right: 1px solid rgba(246,240,255,.16);
  filter: blur(.1px);
  animation: bambooSlide 9s linear infinite;
}

.bamboo-panels i:nth-child(2n) { animation-duration: 13s; opacity: .58; }
.bamboo-panels i:nth-child(3n) { animation-duration: 17s; opacity: .8; }

.thin-column {
  position: absolute;
  width: min(310px, 28vw);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 22px 18px;
  border-right: 1px solid rgba(216,227,242,.24);
  color: rgba(246,240,255,.86);
}

.left-note { left: 12vw; top: 14vh; height: 68vh; }
.right-note { right: 16vw; bottom: 10vh; height: 58vh; }

.chapter {
  font-size: 10px;
  color: var(--green);
  text-shadow: 0 0 12px var(--green);
}

h2 {
  margin: 0;
  font-size: clamp(44px, 6vw, 96px);
  line-height: .92;
  letter-spacing: -.04em;
}

.thin-column h2 { font-size: clamp(38px, 4.2vw, 76px); }

p {
  line-height: 1.75;
  font-size: 15px;
}

.poem {
  font-family: "Cormorant Garamond", Cormorant, Georgia, serif;
  font-style: italic;
  font-size: clamp(22px, 2.8vw, 42px);
  line-height: 1.25;
}

.unread-cluster {
  display: flex;
  gap: 9px;
  margin-bottom: 24px;
}

.unread-cluster b,
.note-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 18px var(--pink);
  display: block;
}

.bamboo-dates {
  position: absolute;
  bottom: 4vh;
  left: 28vw;
  color: rgba(167,255,217,.45);
  font-size: clamp(18px, 3vw, 42px);
}

.charm {
  border-radius: 999px;
  padding: 14px 22px;
  font-family: Orbitron, "Arial Narrow", sans-serif;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.sleeve {
  background:
    radial-gradient(circle at 18% 32%, rgba(255,158,207,.22), transparent 30vw),
    radial-gradient(circle at 80% 88%, rgba(255,178,122,.18), transparent 32vw),
    linear-gradient(100deg, #070812, #1c0b35 66%, #070812);
}

.sleeve-track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 8vw;
  transform: translateX(var(--sleeve-shift, 0));
  transition: transform 650ms cubic-bezier(.2,.8,.2,1);
}

.sleeve-fold {
  position: relative;
  flex: 0 0 39vw;
  min-width: 360px;
  height: 76vh;
  margin-right: -7vw;
  padding: 9vh 5vw;
  clip-path: polygon(0 8%, 78% 0, 100% 50%, 78% 100%, 0 92%, 10% 50%);
  background:
    linear-gradient(110deg, rgba(246,240,255,.16), rgba(191,195,255,.28), rgba(255,158,207,.18)),
    repeating-linear-gradient(92deg, rgba(246,240,255,.08) 0 2px, transparent 2px 28px);
  border: 1px solid rgba(216,227,242,.25);
  box-shadow: inset 0 0 50px rgba(246,240,255,.09), 0 24px 60px rgba(0,0,0,.34);
}

.sleeve-fold:nth-child(2) { background-color: rgba(75,29,143,.38); transform: translateY(-5vh); }
.sleeve-fold:nth-child(3) { background-color: rgba(167,255,217,.08); transform: translateY(6vh); }
.sleeve-fold:nth-child(4) { background-color: rgba(255,178,122,.11); transform: translateY(-2vh); }

.sleeve-fold span {
  color: var(--peach);
  font-size: 10px;
}

.sleeve-fold h2 { margin: 24px 0; }

.fan-hinge {
  position: absolute;
  left: 8vw;
  bottom: 9vh;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--silver), var(--violet) 45%, transparent 46%);
}

.fan-hinge i {
  position: absolute;
  left: 92px;
  bottom: 94px;
  width: 2px;
  height: 280px;
  transform-origin: bottom;
  background: linear-gradient(var(--moon), transparent);
  box-shadow: 0 0 12px var(--silver);
}

.fan-hinge i:nth-child(1) { transform: rotate(-62deg); }
.fan-hinge i:nth-child(2) { transform: rotate(-30deg); }
.fan-hinge i:nth-child(3) { transform: rotate(0deg); }
.fan-hinge i:nth-child(4) { transform: rotate(31deg); }
.fan-hinge i:nth-child(5) { transform: rotate(62deg); }

.sleeve-next { position: absolute; right: 12vw; bottom: 9vh; }

.court {
  background: radial-gradient(circle at 50% 50%, rgba(246,240,255,.13), transparent 34vw), linear-gradient(145deg, #080812, #16072d 70%, #070812);
}

.court-map {
  position: absolute;
  left: 6vw;
  top: 50%;
  width: min(78vh, 58vw);
  height: min(78vh, 58vw);
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(191,195,255,.08), transparent 58%), repeating-radial-gradient(circle, rgba(216,227,242,.17) 0 1px, transparent 1px 72px);
  box-shadow: inset 0 0 70px rgba(216,227,242,.08);
}

.date-seal-large {
  position: absolute;
  inset: 31%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #fff, var(--silver) 28%, var(--lilac) 47%, var(--violet) 78%);
  color: var(--lacquer);
  box-shadow: 0 0 44px rgba(246,240,255,.48), inset 0 0 22px rgba(255,255,255,.54);
}

.date-seal-large span { align-self: end; font-size: 11px; }
.date-seal-large strong { align-self: start; font-size: clamp(28px, 4vw, 60px); }

.orbit {
  position: absolute;
  inset: var(--inset, 6%);
  border: 1px solid rgba(216,227,242,.17);
  border-radius: 50%;
  animation: orbitSpin var(--speed, 16s) linear infinite;
}

.orbit-a { --inset: 7%; --speed: 19s; }
.orbit-b { --inset: 17%; --speed: 14s; animation-direction: reverse; }
.orbit-c { --inset: 25%; --speed: 23s; }
.orbit-d { --inset: 2%; --speed: 29s; animation-direction: reverse; }

.suitor,
.bell,
.note-dot,
.orbit .rabbit {
  position: absolute;
  left: 50%;
  top: -8px;
}

.suitor {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--moon);
  color: var(--violet);
  box-shadow: 0 0 14px var(--moon);
}

.bell {
  width: 22px;
  height: 22px;
  border-radius: 50% 50% 45% 45%;
  background: var(--peach);
  box-shadow: 0 0 14px var(--peach);
}

.silver-strings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(216,227,242,.38);
  stroke-width: 1;
  filter: drop-shadow(0 0 8px rgba(216,227,242,.3));
}

.court-copy {
  position: absolute;
  right: 10vw;
  top: 20vh;
  width: min(430px, 32vw);
}

.dawn {
  background: linear-gradient(180deg, #F6F0FF 0%, #D8E3F2 48%, #BFC3FF 100%);
  color: var(--lacquer);
}

.dawn-phone-shadow {
  position: absolute;
  width: 54vw;
  height: 72vh;
  left: 4vw;
  top: 17vh;
  border-radius: 48px;
  transform: rotate(10deg);
  background: linear-gradient(120deg, rgba(75,29,143,.22), rgba(255,158,207,.16), transparent 70%);
  filter: blur(6px);
}

.recalled-messages {
  position: absolute;
  left: 18vw;
  bottom: -18vh;
  width: 42vw;
  min-width: 330px;
}

.recalled-messages p {
  margin: 20px 0;
  padding: 16px 22px;
  border-radius: 28px;
  color: rgba(7,8,18,.68);
  background: rgba(246,240,255,.56);
  box-shadow: 0 10px 30px rgba(75,29,143,.11);
  transform: translateY(var(--recall, 0));
  opacity: var(--recall-opacity, .38);
  transition: transform 900ms ease, opacity 900ms ease;
}

.dawn.active .recalled-messages p {
  --recall: -58vh;
  --recall-opacity: 0;
}

.dawn-letter {
  position: absolute;
  right: 9vw;
  top: 18vh;
  width: min(520px, 38vw);
}

.dawn-letter h2 {
  font-size: clamp(72px, 9vw, 150px);
  color: var(--violet);
}

.dawn .carrier { color: var(--violet); text-shadow: none; }
.dawn .charm { color: var(--violet); border-color: rgba(75,29,143,.35); }

@keyframes dustDrift { to { background-position: 120px 80px, -90px 130px, 320px 0; } }
@keyframes phoneFloat { 50% { transform: rotate(-9deg) skewY(-2deg) translateY(-12px); } }
@keyframes chromeSweep { 50% { transform: translateX(28%); opacity: .85; } }
@keyframes bambooSlide { from { transform: translateX(14vw); } to { transform: translateX(-14vw); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .phase-instrument { right: 12px; transform: translateY(-50%) scale(.82); }
  .flip-phone { width: 82vw; left: 3vw; top: 7vh; }
  .vertical-title { right: 5vw; }
  .thin-column { width: 36vw; }
  .left-note { left: 7vw; }
  .right-note { right: 12vw; }
  .sleeve-fold { flex-basis: 74vw; min-width: 280px; }
  .court-map { width: 88vw; height: 88vw; left: -20vw; }
  .court-copy, .dawn-letter { width: 72vw; right: 14vw; }
}