:root {
  --midnight: #101827;
  --cloud: #6F8FA8;
  --washi: #F3E7D0;
  --peach: #F0A06B;
  --persimmon: #C4563C;
  --sakura: #E7B7B1;
  --brass: #B68A3A;
  --graphite: #3B3530;
  --light-level: 0;
  --seam-glow: 0;
  --font-mincho: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --font-jp: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-meta: "Commissioner", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-hand: "Nanum Pen Script", "Segoe Print", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--graphite);
  background:
    radial-gradient(circle at 78% 88%, rgba(240,160,107,.28), transparent 30%),
    linear-gradient(135deg, var(--midnight) 0%, #1c2a39 30%, var(--cloud) 62%, var(--washi) 100%);
  font-family: var(--font-meta);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .38;
  mix-blend-mode: multiply;
  background-image:
    repeating-radial-gradient(circle at 12% 18%, rgba(59,53,48,.08) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(74deg, rgba(243,231,208,.09) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(102deg, rgba(255,255,255,.05) 0 1px, transparent 1px 11px);
}

.dawn-seam {
  position: fixed;
  inset: 0;
  z-index: 22;
  pointer-events: none;
}
.dawn-seam span {
  position: absolute;
  width: 160vw;
  height: 3px;
  left: -30vw;
  top: calc(70vh - var(--light-level) * 7vh);
  transform: rotate(-15deg);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, var(--peach), var(--brass), var(--washi), transparent);
  box-shadow: 0 0 calc(8px + var(--seam-glow) * 28px) rgba(240,160,107,.8);
}

.stamp-rail {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.stamp-rail::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: linear-gradient(var(--cloud), var(--peach), var(--brass));
  opacity: .65;
}
.knot {
  position: relative;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(243,231,208,.75);
  border-radius: 50%;
  background: var(--midnight);
  box-shadow: inset 0 0 0 3px rgba(111,143,168,.28), 0 0 0 1px rgba(16,24,39,.3);
  cursor: pointer;
}
.knot.is-active { background: var(--peach); border-color: var(--brass); }
.knot span {
  position: absolute;
  right: 24px;
  top: -5px;
  font: 600 10px/1 var(--font-meta);
  letter-spacing: .14em;
  color: var(--washi);
  opacity: .75;
  white-space: nowrap;
}
.scene-register ~ .stamp-rail .knot span, .knot.is-active span { color: var(--peach); }

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: 7vw;
}
.scene::before, .scene::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.scene-envelope {
  color: var(--washi);
  background:
    radial-gradient(circle at 20% 12%, rgba(111,143,168,.17), transparent 26%),
    linear-gradient(154deg, #0a101c 0%, var(--midnight) 62%, #1d2634 100%);
}
.scene-envelope::before {
  left: -10vw; right: -10vw; top: 59vh; height: 19vh;
  transform: rotate(-15deg);
  background: linear-gradient(180deg, transparent 0 42%, var(--peach) 45% 50%, rgba(243,231,208,.08) 51%, transparent 58%);
  filter: blur(.2px);
}
.postal-mark {
  position: absolute;
  left: 9vw;
  top: 12vh;
  width: 330px;
  height: 180px;
  transform: rotate(-8deg);
  font-family: var(--font-mincho);
}
.postal-mark strong {
  position: absolute;
  left: 34px;
  top: 68px;
  font-size: clamp(31px, 4vw, 58px);
  font-weight: 500;
  color: rgba(243,231,208,.88);
  text-shadow: 3px 2px 0 rgba(196,86,60,.38);
}
.postal-mark small {
  position: absolute;
  left: 42px;
  top: 124px;
  font: 600 11px/1.4 var(--font-jp);
  letter-spacing: .22em;
  color: var(--peach);
}
.ring { position: absolute; border: 2px solid rgba(196,86,60,.72); border-radius: 50%; opacity: .75; }
.ring-a { inset: 0 40px 18px 6px; }
.ring-b { inset: 23px 8px 0 50px; transform: translate(5px, -3px); }
.slit-paper {
  position: absolute;
  left: 36vw; top: 48vh;
  width: 44vw; height: 25vh;
  transform: rotate(-15deg);
  background: rgba(243,231,208,.08);
  clip-path: polygon(0 44%, 13% 38%, 26% 42%, 42% 35%, 57% 41%, 73% 34%, 100% 43%, 100% 54%, 80% 49%, 63% 56%, 45% 50%, 30% 59%, 14% 51%, 0 57%);
}
.vertical-note {
  position: absolute;
  writing-mode: vertical-rl;
  right: 18vw;
  top: 18vh;
  font-family: var(--font-jp);
  letter-spacing: .18em;
  color: rgba(243,231,208,.72);
}
.instruction {
  position: absolute;
  left: 18vw;
  bottom: 18vh;
  font: 500 12px/1 var(--font-meta);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cloud);
}
.hand-note {
  position: absolute;
  right: 15vw;
  bottom: 13vh;
  font: 34px/1 var(--font-hand);
  color: rgba(240,160,107,.8);
  transform: rotate(-5deg);
}

.scene-map {
  background: linear-gradient(140deg, #1f3345 0%, var(--cloud) 44%, #d3c8ad 100%);
}
.scene-map::before {
  inset: -10%;
  background:
    linear-gradient(62deg, transparent 0 49.6%, rgba(59,53,48,.2) 49.8% 50.2%, transparent 50.4%),
    linear-gradient(112deg, transparent 0 49.4%, rgba(243,231,208,.34) 49.7% 50.1%, transparent 50.4%);
}
.fold-panel {
  position: absolute;
  background: var(--washi);
  color: var(--graphite);
  filter: drop-shadow(0 30px 40px rgba(16,24,39,.32));
  clip-path: polygon(2% 4%, 96% 0, 100% 90%, 92% 100%, 0 94%);
  background-image:
    radial-gradient(circle at 25% 20%, rgba(182,138,58,.12), transparent 16%),
    repeating-linear-gradient(97deg, rgba(59,53,48,.055) 0 1px, transparent 1px 10px);
}
.panel-one {
  left: -4vw; top: 9vh; width: 62vw; height: 62vh;
  padding: 8vw 12vw 5vw 11vw;
  transform: rotate(-10deg) skewX(-5deg);
}
.panel-one h1 {
  margin: 7vh 0 0;
  font: 500 clamp(42px, 6.8vw, 108px)/.92 var(--font-mincho);
  color: var(--midnight);
}
.time-label { font: 700 12px/1 var(--font-meta); letter-spacing: .32em; color: var(--persimmon); }
.panel-two {
  right: 4vw; bottom: 7vh; width: 44vw; min-height: 42vh;
  padding: 7vw 5vw;
  transform: rotate(8deg);
}
.panel-two p { font: 600 clamp(13px, 1.4vw, 18px)/2 var(--font-meta); letter-spacing: .14em; text-transform: uppercase; }
.ticket-corner {
  position: absolute; right: 15vw; top: 16vh;
  padding: 18px 23px;
  background: #ead7b9;
  border-left: 5px dotted rgba(196,86,60,.45);
  color: var(--persimmon);
  font: 700 12px/1.5 var(--font-meta);
  letter-spacing: .18em;
  transform: rotate(12deg);
}
.pencil-line { position: absolute; left: 46vw; bottom: 20vh; font: 28px/1 var(--font-hand); color: rgba(59,53,48,.62); transform: rotate(-14deg); }

.scene-receipt {
  background: linear-gradient(150deg, #5e7f9a 0%, var(--cloud) 34%, #ead8c6 74%, var(--sakura) 100%);
}
.vellum-strip {
  position: absolute;
  background: linear-gradient(110deg, rgba(243,231,208,.45), rgba(255,255,255,.18), rgba(231,183,177,.35));
  border: 1px solid rgba(243,231,208,.28);
  backdrop-filter: blur(2px);
  box-shadow: 0 25px 55px rgba(16,24,39,.12);
  clip-path: polygon(0 8%, 12% 4%, 31% 9%, 46% 0, 61% 7%, 82% 3%, 100% 10%, 97% 93%, 80% 98%, 63% 91%, 45% 100%, 24% 93%, 6% 98%);
}
.strip-a { left: -9vw; top: 14vh; width: 76vw; height: 23vh; transform: rotate(-12deg); }
.strip-b { right: -10vw; top: 35vh; width: 83vw; height: 26vh; transform: rotate(9deg); }
.strip-c { left: 12vw; bottom: 9vh; width: 58vw; height: 22vh; transform: rotate(-4deg); }
.receipt-stamp {
  position: absolute; left: 11vw; top: 18vh;
  width: 260px; height: 260px;
  border: 3px double rgba(196,86,60,.68);
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--persimmon);
  transform: rotate(-11deg);
  mix-blend-mode: multiply;
}
.receipt-stamp span { font: 700 13px/1 var(--font-meta); letter-spacing: .28em; }
.receipt-stamp strong { display:block; margin: 18px 0 10px; font: 500 28px/1 var(--font-mincho); }
.receipt-stamp em { font: 500 12px/1.5 var(--font-jp); }
.receipt-lines {
  position: absolute; right: 9vw; top: 26vh;
  width: min(520px, 44vw);
  list-style: none; margin: 0; padding: 0;
  background: rgba(243,231,208,.48);
  border-top: 1px solid rgba(59,53,48,.24);
  color: var(--graphite);
}
.receipt-lines li { display:flex; justify-content:space-between; gap:20px; padding: 22px 12px; border-bottom: 1px solid rgba(59,53,48,.18); }
.receipt-lines b { color: var(--persimmon); font-family: var(--font-jp); }
.receipt-lines span { font: 600 12px/1.4 var(--font-meta); letter-spacing:.12em; text-transform: uppercase; }
.pressed-flower { position:absolute; left: 30vw; bottom: 15vh; width: 180px; height: 220px; opacity:.28; filter: blur(.2px); background: radial-gradient(ellipse at 50% 18%, var(--persimmon) 0 12%, transparent 13%), radial-gradient(ellipse at 38% 29%, var(--sakura) 0 13%, transparent 14%), radial-gradient(ellipse at 62% 31%, var(--sakura) 0 13%, transparent 14%), linear-gradient(95deg, transparent 48%, var(--graphite) 49% 51%, transparent 52%); transform: rotate(18deg); }

.scene-register {
  background: linear-gradient(142deg, var(--cloud) 0%, #d6c4b5 34%, var(--washi) 64%, #f7debf 100%);
  color: var(--graphite);
}
.scene-register h2 {
  position: absolute; left: 9vw; top: 11vh; max-width: 620px;
  margin: 0;
  font: 500 clamp(54px, 8vw, 132px)/.88 var(--font-mincho);
  color: rgba(16,24,39,.88);
}
.register-copy { position:absolute; right: 9vw; top: 23vh; width:min(390px, 34vw); font: 500 17px/1.8 var(--font-jp); }
.scrap-row { position:absolute; left: 15vw; right: 12vw; top: 58vh; display:flex; justify-content:space-between; transform: rotate(-15deg); }
.paper-scrap {
  min-width: 185px;
  padding: 24px 26px;
  border: 0;
  color: var(--graphite);
  background: #f8ead2;
  box-shadow: 0 18px 35px rgba(59,53,48,.18);
  clip-path: polygon(4% 0, 100% 6%, 94% 100%, 0 92%);
  cursor: pointer;
  transform: rotate(var(--tilt, 5deg));
}
.paper-scrap:nth-child(2) { --tilt: -7deg; background: #f3d8cd; }
.paper-scrap:nth-child(3) { --tilt: 9deg; }
.paper-scrap.active { outline: 2px solid var(--brass); background: var(--peach); }
.paper-scrap b { display:block; font: 700 13px/1 var(--font-meta); letter-spacing:.22em; color: var(--persimmon); }
.paper-scrap span { display:block; margin-top: 12px; font: 500 15px/1.25 var(--font-jp); }
.scrap-message { position:absolute; left: 39vw; bottom: 13vh; font: 36px/1 var(--font-hand); color: var(--persimmon); transform: rotate(-4deg); }
.brad { position:absolute; width:22px; height:22px; border-radius:50%; background: radial-gradient(circle at 32% 28%, #fff4be, var(--brass) 42%, #7d5d1d); box-shadow: 0 0 18px rgba(182,138,58,.65); }
.brad-one { left: 21vw; top: 50vh; } .brad-two { right: 24vw; top: 54vh; }

.scene-open {
  background: linear-gradient(145deg, #f8e9d1 0%, var(--washi) 42%, #ffd9b2 100%);
  color: var(--graphite);
}
.scene-open::before {
  width: 52vw; height: 52vw; right: -13vw; top: -12vw;
  background: radial-gradient(circle, var(--peach) 0 36%, rgba(240,160,107,.28) 37% 54%, transparent 55%);
  clip-path: polygon(48% 0, 54% 8%, 64% 2%, 70% 12%, 83% 11%, 86% 24%, 98% 31%, 91% 43%, 100% 56%, 88% 65%, 88% 79%, 72% 81%, 65% 96%, 52% 88%, 39% 100%, 31% 85%, 15% 87%, 14% 70%, 0 62%, 10% 49%, 2% 35%, 17% 28%, 20% 13%, 36% 15%);
  opacity: .86;
}
.open-spread {
  position: absolute; left: 10vw; top: 17vh; width: 58vw; min-height: 56vh;
  padding: 7vw 8vw;
  background: rgba(243,231,208,.74);
  box-shadow: 0 28px 60px rgba(59,53,48,.14);
  clip-path: polygon(0 3%, 47% 0, 51% 5%, 100% 1%, 97% 96%, 53% 100%, 49% 94%, 4% 98%);
}
.final-stamp { display:inline-block; border: 2px solid var(--persimmon); color: var(--persimmon); padding: 12px 18px; transform: rotate(-7deg); font: 500 25px/1 var(--font-mincho); }
.open-spread h2 { margin: 70px 0 24px; font: 500 clamp(42px, 6vw, 94px)/.95 var(--font-mincho); }
.open-spread p { width: min(580px, 44vw); font: 500 19px/1.9 var(--font-jp); }
.arrival-space { position:absolute; right: 10vw; bottom: 13vh; width: 28vw; height: 18vh; border: 1px dashed rgba(196,86,60,.36); background: rgba(255,255,255,.16); transform: rotate(-5deg); }
.vertical-note.final { color: var(--persimmon); right: 8vw; top: 42vh; }

.drag-tab {
  position: fixed;
  left: 0;
  bottom: 9vh;
  z-index: 70;
  width: 148px;
  height: 62px;
  display: grid;
  place-items: center;
  cursor: grab;
  background: var(--washi);
  color: var(--persimmon);
  box-shadow: 0 15px 30px rgba(16,24,39,.24);
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
  transition: transform .35s ease;
}
.drag-tab span { font: 700 10px/1 var(--font-meta); letter-spacing: .16em; text-transform: uppercase; }
.drag-tab.dragging { cursor: grabbing; transition: none; }

.fold-panel, .vellum-strip, .paper-scrap, .open-spread, .postal-mark { transition: transform 900ms cubic-bezier(.2,.7,.1,1), opacity 900ms ease; }
.scene:not(.in-view) .panel-one { transform: rotate(-24deg) skewX(-5deg) translateX(-16vw); }
.scene:not(.in-view) .panel-two { transform: rotate(20deg) translateX(16vw); }
.scene:not(.in-view) .vellum-strip { opacity: .35; }
.scene.in-view .receipt-stamp { animation: inkBloom 1.8s ease both; }
.scene.in-view .brad { animation: pinGlint 2.2s ease-in-out infinite; }

@keyframes inkBloom { from { opacity: .15; filter: blur(3px); transform: rotate(-11deg) scale(.94); } to { opacity: 1; filter: blur(0); transform: rotate(-11deg) scale(1); } }
@keyframes pinGlint { 0%, 100% { box-shadow: 0 0 12px rgba(182,138,58,.45); } 50% { box-shadow: 0 0 28px rgba(255,244,190,.95); } }

@media (max-width: 760px) {
  .scene { padding: 9vw; }
  .stamp-rail { right: 12px; }
  .postal-mark { left: 5vw; width: 285px; }
  .panel-one, .panel-two, .receipt-lines, .open-spread { width: 82vw; left: 5vw; right: auto; }
  .panel-two { bottom: 10vh; }
  .receipt-lines { top: 52vh; }
  .scrap-row { left: 8vw; right: 8vw; top: 49vh; flex-direction: column; gap: 16px; transform: rotate(-8deg); }
  .paper-scrap { min-width: 0; width: 70vw; }
  .register-copy { top: 34vh; left: 10vw; right: auto; width: 72vw; }
  .open-spread p { width: auto; }
  .arrival-space { display: none; }
}