:root {
  --night-window-blue: #16233F;
  --pre-dawn-indigo: #2F3B73;
  --mist-lavender: #B7BCEB;
  --eastern-peach: #FFB7A8;
  --cloud-cream: #FFF3E6;
  --dew-cyan: #A7F0F2;
  --neon-sakura-glint: #FF6FAE;
  --soft-ink: #273044;
  --rounded: "Arial Rounded MT Bold", "Trebuchet MS", Nunito, system-ui, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mono: "SFMono-Regular", "Space Mono", Consolas, monospace;
  --typography-note: "Japanese dawn poetry with small digital timestamps. Space Mono only for small timestamp labels";
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--night-window-blue);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cloud-cream);
  font-family: var(--sans);
  overflow-x: hidden;
  cursor: none;
  background: var(--night-window-blue);
}

a { color: inherit; text-decoration: none; }

.dawn-window {
  position: relative;
  min-height: 400vh;
  isolation: isolate;
  background: linear-gradient(180deg, #16233F 0%, #2F3B73 38%, #FFB7A8 76%, #FFF3E6 100%);
}

.far-sky,
.peach-horizon,
.bokeh-apartments,
.condensation-layer,
.clearings {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.far-sky {
  z-index: -4;
  background:
    radial-gradient(circle at 15% 22%, rgba(183, 188, 235, .22), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(167, 240, 242, .14), transparent 20%),
    linear-gradient(180deg, #16233F 0%, #2F3B73 45%, #FFB7A8 78%, #FFF3E6 100%);
}

.peach-horizon {
  z-index: -3;
  opacity: var(--dawn, 0);
  background:
    radial-gradient(ellipse at 55% 78%, rgba(255, 183, 168, .75), transparent 42%),
    radial-gradient(ellipse at 72% 68%, rgba(255, 243, 230, .64), transparent 33%);
  transform: translateY(calc(24vh - var(--scroll, 0) * 18vh));
}

.platform-nav {
  position: fixed;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  align-items: flex-end;
  opacity: .78;
}

.sleepy-timestamp {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--dew-cyan);
  text-shadow: 0 0 16px rgba(167, 240, 242, .35);
}

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(1.4rem, 4vw, 5rem);
}

.scene-room { place-items: end start; }
.scene-glass { align-items: center; justify-items: center; }
.scene-platform { align-items: end; justify-items: start; }
.scene-sky { color: var(--soft-ink); place-items: center; text-align: center; }

.wordmark-wrap {
  position: relative;
  z-index: 8;
  width: 100%;
  padding-bottom: 8vh;
}

.letter-morph,
.final-mark {
  margin: 0;
  font-family: var(--rounded);
  font-size: clamp(4.6rem, 18vw, 18rem);
  line-height: .78;
  letter-spacing: -.08em;
  font-weight: 900;
}

.letter-morph {
  color: rgba(255, 243, 230, .9);
  text-shadow: 0 0 32px rgba(183, 188, 235, .28), 0 28px 0 rgba(47, 59, 115, .38);
  transform: translateY(calc(var(--scroll, 0) * -20vh)) scale(calc(1 + var(--scroll, 0) * .16));
  filter: blur(calc(var(--scroll, 0) * 1.2px));
}

.caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 2rem);
  line-height: 1.4;
  margin: 0;
}

.taped-note {
  display: inline-block;
  margin-top: 1.2rem;
  margin-left: clamp(.4rem, 8vw, 8rem);
  padding: .72rem 1rem;
  color: var(--night-window-blue);
  background: rgba(255, 243, 230, .78);
  border: 1px solid rgba(167, 240, 242, .45);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
  transform: rotate(-2deg);
}

.curtain-veil {
  position: fixed;
  top: -8vh;
  bottom: -8vh;
  width: 44vw;
  z-index: 18;
  pointer-events: none;
  opacity: calc(.82 - var(--scroll, 0) * .55);
  background:
    repeating-linear-gradient(90deg, rgba(255, 243, 230, .08) 0 12px, rgba(183, 188, 235, .18) 12px 19px, rgba(255, 243, 230, .04) 19px 42px),
    linear-gradient(180deg, rgba(183, 188, 235, .3), rgba(255, 183, 168, .12));
  backdrop-filter: blur(7px);
  animation: curtainBreath 6.8s ease-in-out infinite;
}

.curtain-left { left: 0; transform: translateX(calc(var(--scroll, 0) * -38vw)) skewX(-5deg); }
.curtain-right { right: 0; transform: translateX(calc(var(--scroll, 0) * 38vw)) skewX(5deg); animation-delay: -2.1s; }

@keyframes curtainBreath {
  0%, 100% { filter: blur(0); }
  50% { filter: blur(1.8px) brightness(1.08); }
}

.pillow-corner {
  position: absolute;
  left: -6vw;
  bottom: -5vh;
  width: 34vw;
  height: 22vh;
  border-radius: 45% 55% 0 0;
  background: linear-gradient(135deg, rgba(183, 188, 235, .32), rgba(255, 243, 230, .12));
  box-shadow: inset -18px 22px 60px rgba(167, 240, 242, .08);
}

.omamori-charm {
  position: fixed;
  top: 4vh;
  left: 12vw;
  z-index: 22;
  transform-origin: top center;
  animation: charmSwing 5.5s ease-in-out infinite;
}

.charm-string {
  display: block;
  width: 2px;
  height: 16vh;
  margin: 0 auto;
  background: linear-gradient(var(--neon-sakura-glint), transparent);
}

.charm-paper {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 4rem;
  font-family: var(--serif);
  color: var(--soft-ink);
  background: linear-gradient(180deg, #FFF3E6, #FFB7A8);
  clip-path: polygon(50% 0, 100% 20%, 92% 100%, 8% 100%, 0 20%);
  box-shadow: 0 12px 32px rgba(255, 111, 174, .22);
}

@keyframes charmSwing { 50% { transform: rotate(3deg); } }

.sleepy-star {
  position: absolute;
  right: 16vw;
  bottom: 24vh;
  width: 3.7rem;
  height: 3.7rem;
  background: var(--cloud-cream);
  clip-path: polygon(50% 0, 61% 34%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 34%);
  filter: drop-shadow(0 0 24px rgba(255, 243, 230, .7));
  animation: starDissolve 7s ease-in-out infinite;
}

.sleepy-star i,
.sun-particles span {
  position: absolute;
  width: .32rem;
  height: .32rem;
  border-radius: 50%;
  background: var(--neon-sakura-glint);
  box-shadow: 0 0 14px currentColor;
}

.sleepy-star i:nth-child(1) { left: 120%; top: 10%; }
.sleepy-star i:nth-child(2) { left: -30%; top: 45%; background: var(--dew-cyan); }
.sleepy-star i:nth-child(3) { left: 70%; top: 118%; }
.sleepy-star i:nth-child(4) { left: 30%; top: -22%; background: var(--eastern-peach); }
.sleepy-star i:nth-child(5) { left: 140%; top: 80%; background: var(--dew-cyan); }

@keyframes starDissolve {
  0%, 100% { transform: rotate(-8deg) scale(1); opacity: .8; }
  50% { transform: rotate(20deg) scale(.72); opacity: .42; }
}

.window-frame {
  position: relative;
  width: min(78vw, 880px);
  height: min(68vh, 620px);
  border: 1px solid rgba(255, 243, 230, .32);
  background: linear-gradient(135deg, rgba(255, 243, 230, .08), rgba(167, 240, 242, .04));
  box-shadow: inset 0 0 80px rgba(255, 243, 230, .08), 0 30px 100px rgba(0, 0, 0, .25);
  backdrop-filter: blur(4px);
}

.window-frame::before,
.window-frame::after {
  content: "";
  position: absolute;
  background: rgba(255, 243, 230, .22);
}
.window-frame::before { inset: 0 auto 0 49%; width: 1px; }
.window-frame::after { inset: 52% 0 auto 0; height: 1px; }

.floating-tab {
  position: absolute;
  font-family: var(--mono);
  font-size: .72rem;
  padding: .55rem .8rem;
  color: var(--cloud-cream);
  border: 1px solid rgba(183, 188, 235, .35);
  border-radius: 1rem 1rem .4rem .4rem;
  background: rgba(22, 35, 63, .55);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
}
.moon-tab { top: 14%; right: 14%; border-radius: 50% 50% .4rem .4rem; animation: driftTab 8s ease-in-out infinite; }
.browser-tab { left: 10%; bottom: 22%; transform: rotate(-7deg); animation: driftTab 9s ease-in-out infinite reverse; }

@keyframes driftTab { 50% { transform: translateY(-18px) rotate(4deg); } }

.station-reflection {
  position: absolute;
  left: 8%;
  top: 18%;
  font-family: var(--mono);
  letter-spacing: .12em;
  transform: scaleX(-1) rotate(-2deg);
  color: rgba(167, 240, 242, .5);
}

.glass-note {
  position: absolute;
  right: 9%;
  bottom: 12%;
  max-width: 19rem;
  color: var(--cloud-cream);
}

.curtain-folds {
  position: absolute;
  inset: 10vh 5vw auto;
  width: 90vw;
  height: 45vh;
  fill: none;
  stroke: rgba(255, 243, 230, .25);
  stroke-width: 2;
  stroke-dasharray: 720;
  stroke-dashoffset: calc(720 - var(--scroll, 0) * 720);
  pointer-events: none;
}

.wire-dewdrops {
  position: absolute;
  inset: 10vh -4vw auto;
  width: 108vw;
  height: 42vh;
  fill: rgba(167, 240, 242, .82);
  filter: drop-shadow(0 0 10px rgba(167, 240, 242, .45));
}
.wire { fill: none; stroke: var(--soft-ink); stroke-width: 3; opacity: .6; }
.wire-dewdrops circle { animation: dewQuiver 3.8s ease-in-out infinite; }
.wire-dewdrops circle:nth-of-type(even) { animation-delay: -1.4s; }
@keyframes dewQuiver { 50% { transform: translateY(4px); opacity: .58; } }

.station-sign {
  position: relative;
  z-index: 4;
  margin-left: clamp(1rem, 8vw, 8rem);
  margin-bottom: 26vh;
  display: grid;
  gap: .3rem;
  width: min(23rem, 76vw);
  padding: 1rem 1.25rem;
  color: var(--cloud-cream);
  background: rgba(22, 35, 63, .72);
  border: 1px solid rgba(167, 240, 242, .42);
  box-shadow: 0 0 28px rgba(167, 240, 242, .12);
  animation: signFlicker 6.5s steps(1) infinite;
}
.station-sign strong { font-family: var(--rounded); font-size: 2rem; letter-spacing: .09em; }
.station-sign em { color: var(--mist-lavender); font-family: var(--serif); }
@keyframes signFlicker { 0%, 4%, 8%, 100% { opacity: 1; } 6% { opacity: .62; } }

.rooftops {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30vh;
  background: linear-gradient(180deg, transparent, rgba(39, 48, 68, .86));
}
.roof { position: absolute; bottom: 0; background: var(--soft-ink); opacity: .88; }
.roof-a { left: 8%; width: 31%; height: 58%; clip-path: polygon(0 35%, 72% 0, 100% 38%, 100% 100%, 0 100%); }
.roof-b { right: 3%; width: 42%; height: 72%; clip-path: polygon(0 45%, 45% 8%, 100% 38%, 100% 100%, 0 100%); }
.water-tank { position: absolute; right: 19%; bottom: 58%; width: 5.8rem; height: 4rem; border-radius: 50% 50% 1rem 1rem; border: 3px solid var(--soft-ink); }
.water-tank::before, .water-tank::after { content: ""; position: absolute; bottom: -5rem; width: 3px; height: 5rem; background: var(--soft-ink); }
.water-tank::before { left: 20%; } .water-tank::after { right: 20%; }

.cloud-caption {
  position: relative;
  z-index: 5;
  max-width: 28rem;
  margin: 0 0 11vh clamp(1rem, 12vw, 11rem);
  padding: 1.2rem 1.5rem;
  border-radius: 3rem 3rem 3rem .8rem;
  color: var(--soft-ink);
  background: rgba(255, 243, 230, .82);
  font-family: var(--serif);
  font-size: clamp(1rem, 2vw, 1.55rem);
}

.cloud-field { position: absolute; inset: 0; }
.cloud {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 14rem;
  min-height: 5rem;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  background: rgba(255, 243, 230, .8);
  box-shadow: 2.5rem .6rem 0 rgba(255, 243, 230, .58), -1.8rem .9rem 0 rgba(255, 243, 230, .55);
  font-family: var(--serif);
  font-style: italic;
  animation: cloudFloat 10s ease-in-out infinite;
}
.cloud-one { top: 18%; left: 8%; }
.cloud-two { top: 34%; right: 10%; animation-delay: -3s; }
.cloud-three { bottom: 16%; left: 17%; width: 18rem; animation-delay: -5s; }
@keyframes cloudFloat { 50% { transform: translate(18px, -20px); } }

.final-mark {
  position: relative;
  z-index: 5;
  color: var(--soft-ink);
  text-shadow: 0 16px 0 rgba(255, 183, 168, .45);
}
.final-caption { position: relative; z-index: 5; max-width: 34rem; margin-top: 1.2rem; }
.ticket-charm {
  position: relative;
  z-index: 6;
  margin-top: 2rem;
  padding: .8rem 1.2rem;
  font-family: var(--mono);
  color: var(--soft-ink);
  background: linear-gradient(135deg, #FFF3E6, #FFB7A8);
  border: 1px dashed rgba(39, 48, 68, .45);
  border-radius: .35rem;
  box-shadow: 0 14px 40px rgba(255, 111, 174, .18);
}

.sun-particles { position: absolute; inset: 35% 0 0 50%; z-index: 4; }
.sun-particles span:nth-child(1) { left: 2rem; top: -4rem; background: var(--neon-sakura-glint); }
.sun-particles span:nth-child(2) { left: 10rem; top: 3rem; background: var(--dew-cyan); }
.sun-particles span:nth-child(3) { left: -8rem; top: 7rem; }
.sun-particles span:nth-child(4) { left: -14rem; top: -1rem; background: var(--eastern-peach); }
.sun-particles span:nth-child(5) { left: 16rem; top: -6rem; }
.sun-particles span:nth-child(6) { left: -2rem; top: 12rem; background: var(--dew-cyan); }
.sun-particles span { animation: particleRise 5.8s ease-in-out infinite; }
@keyframes particleRise { 50% { transform: translateY(-32px) scale(1.8); opacity: .42; } }

.bokeh-apartments {
  z-index: -2;
  overflow: hidden;
}
.bokeh-apartments span {
  position: absolute;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: rgba(255, 243, 230, .72);
  box-shadow: 0 0 22px rgba(255, 243, 230, .72);
  animation: bokehDrift 12s linear infinite;
}
.bokeh-apartments span:nth-child(1) { left: 7%; top: 20%; }
.bokeh-apartments span:nth-child(2) { left: 18%; top: 62%; animation-delay: -2s; background: rgba(167, 240, 242, .7); }
.bokeh-apartments span:nth-child(3) { left: 31%; top: 36%; animation-delay: -8s; }
.bokeh-apartments span:nth-child(4) { left: 44%; top: 18%; animation-delay: -5s; background: rgba(255, 111, 174, .66); }
.bokeh-apartments span:nth-child(5) { left: 55%; top: 72%; animation-delay: -4s; }
.bokeh-apartments span:nth-child(6) { left: 68%; top: 28%; animation-delay: -9s; }
.bokeh-apartments span:nth-child(7) { left: 81%; top: 48%; animation-delay: -1s; background: rgba(167, 240, 242, .7); }
.bokeh-apartments span:nth-child(8) { left: 91%; top: 16%; animation-delay: -7s; }
.bokeh-apartments span:nth-child(9) { left: 12%; top: 78%; animation-delay: -10s; }
.bokeh-apartments span:nth-child(10) { left: 74%; top: 84%; animation-delay: -6s; background: rgba(255, 111, 174, .62); }
.bokeh-apartments span:nth-child(11) { left: 37%; top: 86%; animation-delay: -3s; }
.bokeh-apartments span:nth-child(12) { left: 95%; top: 68%; animation-delay: -11s; }
@keyframes bokehDrift { 50% { transform: translateY(-24px) scale(1.8); opacity: .35; } }

.condensation-layer {
  z-index: 24;
  opacity: calc(.66 - var(--scroll, 0) * .35);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.24) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 28%, rgba(167,240,242,.22) 0 1px, transparent 2px),
    radial-gradient(circle at 44% 72%, rgba(255,255,255,.17) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 52%, rgba(255,255,255,.22) 0 1px, transparent 2px);
  background-size: 28px 31px, 43px 47px, 35px 39px, 53px 57px;
  backdrop-filter: blur(1.4px);
  mask-image: radial-gradient(circle at var(--mx, -10%) var(--my, -10%), transparent 0 7rem, #000 8.2rem);
}

.clearings { z-index: 25; mix-blend-mode: screen; }
.clearing {
  position: fixed;
  width: 7.5rem;
  height: 7.5rem;
  margin: -3.75rem 0 0 -3.75rem;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,183,168,.34), rgba(167,240,242,.12) 48%, transparent 72%);
  animation: fadeClearing 1.8s ease-out forwards;
}
@keyframes fadeClearing { to { transform: scale(1.8); opacity: 0; } }

.glass-cursor {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #FFF3E6, #FFB7A8 48%, transparent 70%);
  box-shadow: 0 0 18px rgba(255, 183, 168, .9), 0 0 38px rgba(255, 111, 174, .28);
  transform: translate(-50%, -50%);
}

@media (max-width: 720px) {
  .platform-nav { display: none; }
  .curtain-veil { width: 52vw; }
  .letter-morph, .final-mark { font-size: clamp(3.8rem, 22vw, 9rem); }
  .window-frame { width: 88vw; height: 62vh; }
  .station-sign { margin-left: 1rem; }
  .cloud-two { right: -3rem; }
  .glass-cursor { display: none; }
  body { cursor: auto; }
}