:root {
  --paper: #F5E8C8;
  --sumi: #17120E;
  --vermilion: #B7352B;
  --teal: #176E73;
  --burgundy: #5C1D2E;
  --brass: #C49A45;
  --wisteria: #7A5C92;
  --indigo: #1D3158;
  --shift-x: 0px;
  --shift-y: 0px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--sumi);
  background: var(--paper);
  font-family: 'Noto Serif JP', serif;
  overflow-x: hidden;
}

.paper-grain,
.registration {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}

.paper-grain {
  opacity: .22;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(23,18,14,.18) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(92,29,46,.16) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,18,14,.06) 1px, transparent 1px);
  background-size: 13px 17px, 19px 23px, 7px 100%;
}

.registration-red {
  transform: translate(var(--shift-x), var(--shift-y));
  opacity: .12;
  background: repeating-linear-gradient(72deg, transparent 0 42px, var(--vermilion) 43px 44px, transparent 45px 80px);
  mix-blend-mode: multiply;
}

.registration-teal {
  transform: translate(calc(var(--shift-x) * -1), calc(var(--shift-y) * .7));
  opacity: .1;
  background: repeating-radial-gradient(circle at 74% 28%, transparent 0 28px, var(--teal) 29px 30px, transparent 31px 60px);
  mix-blend-mode: multiply;
}

.prologue {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: .65fr 1.35fr .8fr;
  align-items: center;
  padding: 8vh 7vw;
  overflow: hidden;
  background:
    radial-gradient(circle at 73% 48%, rgba(183,53,43,.14), transparent 0 12%, transparent 24%),
    linear-gradient(102deg, rgba(196,154,69,.24), transparent 34%),
    var(--paper);
}

.wordmark {
  position: absolute;
  top: 34px;
  left: 44px;
  font-family: 'BIZ UDPGothic', sans-serif;
  letter-spacing: .24em;
  color: var(--indigo);
  font-size: 13px;
}

.era-seal {
  justify-self: center;
  width: 116px;
  height: 246px;
  border: 5px double var(--vermilion);
  color: var(--vermilion);
  display: grid;
  place-items: center;
  font-family: 'Shippori Mincho', serif;
  font-size: 58px;
  line-height: 1.05;
  transform: rotate(-2deg);
  background: rgba(245,232,200,.72);
  box-shadow: 14px 14px 0 rgba(196,154,69,.18);
}

.sun-press {
  position: absolute;
  right: 13vw;
  top: 18vh;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--vermilion);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'Zen Antique', serif;
  font-size: 39px;
  opacity: .92;
  transform: scale(.72) rotate(-18deg);
  box-shadow: inset 0 0 0 12px rgba(245,232,200,.2), 0 24px 60px rgba(92,29,46,.25);
  animation: sealPress 1600ms cubic-bezier(.2,.8,.1,1) both;
}

.prologue h1 {
  grid-column: 2 / 4;
  margin: 0;
  max-width: 860px;
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(58px, 9vw, 132px);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--sumi);
  text-shadow: 4px 0 0 rgba(183,53,43,.16), -3px 2px 0 rgba(23,110,115,.14);
}

.prologue p {
  grid-column: 2 / 3;
  max-width: 560px;
  align-self: start;
  font-size: 20px;
  line-height: 1.8;
  color: var(--burgundy);
}

.opening-ticket {
  position: absolute;
  bottom: 10vh;
  right: 8vw;
  padding: 18px 30px;
  border: 2px dashed var(--indigo);
  font-family: 'BIZ UDPGothic', sans-serif;
  color: var(--indigo);
  background: rgba(245,232,200,.78);
  transform: rotate(4deg);
}

.day-dial {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}

.dial-ring {
  width: 132px;
  height: 132px;
  border: 2px solid var(--brass);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(245,232,200,.82);
  box-shadow: inset 0 0 0 10px rgba(23,18,14,.04), 0 15px 35px rgba(23,18,14,.2);
  position: relative;
}

.dial-core {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--vermilion);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'Shippori Mincho', serif;
  font-size: 33px;
  transition: background .55s ease, transform .55s ease;
}

.dial-hand {
  position: absolute;
  width: 2px;
  height: 58px;
  background: var(--sumi);
  left: 65px;
  top: 8px;
  transform-origin: 50% 58px;
  transition: transform .5s ease;
}

.dial-caption {
  position: absolute;
  right: 148px;
  top: 50%;
  width: 190px;
  transform: translateY(-50%);
  font-family: 'BIZ UDPGothic', sans-serif;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--sumi);
  padding: 10px 12px;
}

.accordion {
  position: relative;
  background: var(--sumi);
}

.scene {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 8vh 8vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  clip-path: polygon(0 0, 92% 0, 100% 8%, 100% 100%, 8% 100%, 0 92%);
  margin-top: -8vh;
  box-shadow: 0 -28px 80px rgba(23,18,14,.28);
}

.scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: 82px 82px;
  opacity: .24;
}

.scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, rgba(245,232,200,.32), transparent 30%, rgba(23,18,14,.12) 31%, transparent 34%);
  transform: translateX(-8%);
  transition: transform .9s ease;
}

.scene.active::after { transform: translateX(0); }

.dawn { background: linear-gradient(120deg, var(--paper), #f0d9a9 55%, rgba(196,154,69,.72)); }
.tram { background: linear-gradient(128deg, var(--paper), rgba(23,110,115,.52), var(--indigo)); color: var(--paper); }
.cafe { background: radial-gradient(circle at 69% 43%, rgba(183,53,43,.8), transparent 0 18%, transparent 30%), linear-gradient(125deg, var(--paper), #d8b87b 42%, var(--burgundy)); }
.moga { background: linear-gradient(130deg, var(--wisteria), var(--indigo) 52%, var(--sumi)); color: var(--paper); }
.printer { background: linear-gradient(115deg, var(--paper), #d5bf85 40%, var(--teal)); }
.quake { background: radial-gradient(circle at 60% 52%, rgba(183,53,43,.35), transparent 0 22%, transparent 45%), linear-gradient(135deg, var(--burgundy), var(--sumi)); color: var(--paper); }
.jazz { background: radial-gradient(circle at 72% 24%, rgba(196,154,69,.65), transparent 0 9%, transparent 20%), linear-gradient(130deg, var(--indigo), var(--sumi) 62%, #080605); color: var(--paper); }

.dawn::before { background-image: linear-gradient(30deg, transparent 47%, rgba(183,53,43,.22) 48% 52%, transparent 53%), linear-gradient(150deg, transparent 47%, rgba(23,18,14,.18) 48% 52%, transparent 53%); }
.tram::before { background-image: repeating-linear-gradient(63deg, transparent 0 38px, rgba(196,154,69,.35) 39px 41px, transparent 42px 80px); }
.cafe::before { background-image: radial-gradient(circle, rgba(92,29,46,.26) 0 3px, transparent 4px); }
.moga::before { background-image: conic-gradient(from 45deg, rgba(196,154,69,.28), transparent, rgba(245,232,200,.12), transparent); }
.printer::before { background-image: radial-gradient(circle, rgba(122,92,146,.35) 0 2px, transparent 3px); background-size: 16px 16px; }
.quake::before { background-image: linear-gradient(72deg, transparent 48%, rgba(245,232,200,.16) 49% 50%, transparent 51%); }
.jazz::before { background-image: repeating-linear-gradient(0deg, transparent 0 23px, rgba(196,154,69,.18) 24px 25px, transparent 26px 52px); }

.fold-number {
  position: absolute;
  top: 34px;
  left: 34px;
  font-family: 'BIZ UDPGothic', sans-serif;
  letter-spacing: .32em;
  font-size: 12px;
  opacity: .72;
}

.vertical-title {
  position: absolute;
  top: 12vh;
  left: 5vw;
  writing-mode: vertical-rl;
  font-family: 'Zen Antique', serif;
  font-size: clamp(38px, 5vw, 76px);
  letter-spacing: .18em;
  opacity: .78;
}

.fan-copy {
  width: min(520px, 86vw);
  padding: 46px 48px 54px;
  background: rgba(245,232,200,.9);
  color: var(--sumi);
  clip-path: polygon(0 14%, 18% 0, 100% 0, 88% 100%, 0 91%);
  box-shadow: 18px 18px 0 rgba(23,18,14,.18), -6px 0 0 rgba(183,53,43,.16);
  transform: rotate(-2deg);
  position: relative;
  z-index: 3;
}

.fan-copy.right {
  grid-column: 2;
  justify-self: end;
  transform: rotate(2deg);
  box-shadow: -18px 18px 0 rgba(23,18,14,.18), 6px 0 0 rgba(23,110,115,.22);
}

.dark-panel { background: rgba(29,49,88,.86); color: var(--paper); }

.label {
  font-family: 'BIZ UDPGothic', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--vermilion);
}

.dark-panel .label { color: var(--brass); }

h2 {
  margin: 14px 0 18px;
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(38px, 5.6vw, 82px);
  line-height: .94;
  letter-spacing: -.04em;
}

.fan-copy p {
  margin: 0;
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.78;
}

.motif {
  position: absolute;
  inset: 10vh 7vw 8vh auto;
  width: min(48vw, 680px);
  z-index: 1;
}

.fan-copy.right + .motif,
.tram .motif,
.moga .motif,
.quake .motif { left: 7vw; right: auto; }

.sun-disc, .wheel, .table-ring, .record, .quake-ring {
  position: absolute;
  border-radius: 50%;
}

.sun-disc {
  width: 420px;
  height: 420px;
  right: 2vw;
  top: 14vh;
  background: var(--vermilion);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'Shippori Mincho', serif;
  font-size: 74px;
  box-shadow: inset 0 0 0 20px rgba(245,232,200,.18), 26px 24px 0 rgba(196,154,69,.25);
}

.asa-pattern {
  position: absolute;
  width: 360px;
  height: 500px;
  right: 280px;
  top: 3vh;
  background: repeating-linear-gradient(60deg, rgba(23,18,14,.15) 0 2px, transparent 3px 35px), repeating-linear-gradient(-60deg, rgba(23,18,14,.15) 0 2px, transparent 3px 35px);
  clip-path: polygon(20% 0, 100% 18%, 72% 100%, 0 82%);
}

.wire-map, .seismo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.wire-map path, .seismo path {
  fill: none;
  stroke: var(--brass);
  stroke-width: 4;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.7s ease;
}

.scene.active .wire-map path, .scene.active .seismo path { stroke-dashoffset: 0; }

.wheel {
  width: 390px;
  height: 390px;
  top: 20vh;
  left: 4vw;
  border: 22px solid var(--brass);
  box-shadow: inset 0 0 0 24px rgba(245,232,200,.18), 0 0 0 2px var(--paper);
  animation: rotateSlow 16s linear infinite;
}

.wheel span, .record span {
  position: absolute;
  inset: 46%;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 -150px 0 -4px currentColor, 0 150px 0 -4px currentColor, 150px 0 0 -4px currentColor, -150px 0 0 -4px currentColor;
}

.ticket, .menu-card, .newspaper {
  font-family: 'BIZ UDPGothic', sans-serif;
  background: var(--paper);
  color: var(--indigo);
  border: 2px dashed currentColor;
}

.ticket {
  position: absolute;
  top: 8vh;
  left: 25vw;
  padding: 24px 36px;
  font-size: 20px;
  transform: rotate(-9deg);
}

.rail { position: absolute; width: 78vw; height: 5px; background: var(--brass); left: -10vw; transform: rotate(-18deg); opacity: .8; }
.rail-one { top: 68vh; }
.rail-two { top: 74vh; }

.table-ring {
  width: 440px;
  height: 440px;
  right: 5vw;
  top: 17vh;
  background: radial-gradient(circle, var(--paper) 0 24%, transparent 25% 42%, var(--burgundy) 43% 48%, transparent 49%);
  border: 20px solid var(--vermilion);
}

.chair { position: absolute; width: 100px; height: 150px; border: 12px solid var(--sumi); border-bottom: 0; border-radius: 70px 70px 0 0; }
.chair-a { right: 31vw; top: 10vh; transform: rotate(-30deg); }
.chair-b { right: 4vw; top: 56vh; transform: rotate(142deg); }
.speech { position: absolute; padding: 13px 30px; background: var(--burgundy); color: var(--paper); font-family: 'Zen Antique', serif; clip-path: polygon(0 0, 94% 0, 100% 48%, 94% 100%, 0 100%, 8% 50%); }
.speech-a { right: 24vw; top: 20vh; }
.speech-b { right: 2vw; top: 42vh; background: var(--teal); }
.menu-card { position: absolute; right: 22vw; top: 58vh; padding: 18px 24px; transform: rotate(8deg); }

.lamp { position: absolute; left: 22vw; top: 7vh; width: 24px; height: 70vh; background: var(--sumi); box-shadow: 0 0 0 5px rgba(196,154,69,.35); }
.lamp span { position: absolute; top: -28px; left: -53px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, var(--brass), rgba(196,154,69,.18) 54%, transparent 70%); }
.moga-silhouette { position: absolute; left: 7vw; top: 24vh; width: 190px; height: 430px; background: var(--sumi); clip-path: polygon(32% 0, 66% 0, 78% 14%, 70% 22%, 82% 31%, 67% 100%, 34% 100%, 18% 31%, 30% 22%, 22% 14%); }
.moga-silhouette::before { content: ''; position: absolute; left: 31px; top: -3px; width: 128px; height: 88px; background: var(--sumi); border-radius: 48% 48% 26% 26%; }
.perfume { position: absolute; left: 32vw; top: 46vh; width: 110px; height: 170px; border: 7px solid var(--brass); background: rgba(245,232,200,.16); clip-path: polygon(35% 0, 65% 0, 65% 18%, 88% 30%, 75% 100%, 25% 100%, 12% 30%, 35% 18%); }
.deco-rays { position: absolute; left: 5vw; top: 2vh; width: 480px; height: 480px; background: conic-gradient(from 0deg, transparent, rgba(196,154,69,.34), transparent 12%, transparent 18%, rgba(245,232,200,.22), transparent 28%); border-radius: 50%; }

.type-bed { position: absolute; right: 1vw; top: 17vh; display: grid; grid-template-columns: repeat(4, 92px); gap: 12px; transform: rotate(5deg); }
.type-bed span { height: 92px; display: grid; place-items: center; color: var(--paper); background: var(--sumi); font-family: 'Shippori Mincho', serif; font-size: 43px; box-shadow: 8px 8px 0 rgba(92,29,46,.26); }
.newspaper { position: absolute; right: 23vw; top: 54vh; padding: 34px 44px; font-family: 'Zen Antique', serif; font-size: 48px; transform: rotate(-7deg); }
.newspaper small { font-family: 'BIZ UDPGothic', sans-serif; font-size: 13px; }
.ribbon { position: absolute; right: 1vw; top: 72vh; padding: 16px 80px; background: var(--vermilion); color: var(--paper); font-family: 'BIZ UDPGothic', sans-serif; letter-spacing: .14em; transform: rotate(3deg); }

.seismo path { stroke: var(--vermilion); stroke-width: 8; }
.quake-ring { width: 430px; height: 430px; left: 7vw; top: 18vh; border: 18px solid var(--wisteria); box-shadow: inset 0 0 0 25px rgba(245,232,200,.1), 0 0 0 2px var(--brass); }
.crack { position: absolute; background: var(--paper); transform-origin: top; opacity: .82; }
.crack-a { left: 20vw; top: 8vh; width: 7px; height: 62vh; transform: rotate(16deg); clip-path: polygon(40% 0, 100% 20%, 50% 44%, 95% 70%, 30% 100%, 0 74%, 46% 45%, 0 18%); }
.crack-b { left: 7vw; top: 36vh; width: 5px; height: 34vh; transform: rotate(-45deg); }
.crack-c { left: 30vw; top: 32vh; width: 4px; height: 28vh; transform: rotate(58deg); }

.record {
  width: 470px;
  height: 470px;
  right: 3vw;
  top: 16vh;
  background: repeating-radial-gradient(circle, var(--sumi) 0 16px, #241b16 17px 19px, var(--sumi) 20px 28px);
  border: 18px solid var(--brass);
  animation: rotateSlow 9s linear infinite;
}
.record::after { content: 'taisho jazz'; position: absolute; inset: 38%; border-radius: 50%; display: grid; place-items: center; background: var(--vermilion); color: var(--paper); font-family: 'BIZ UDPGothic', sans-serif; font-size: 11px; letter-spacing: .12em; }
.horn { position: absolute; right: 31vw; top: 10vh; width: 250px; height: 250px; background: radial-gradient(circle at 80% 50%, transparent 0 30%, var(--brass) 31% 70%, transparent 71%); clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%); }
.lantern { position: absolute; width: 94px; height: 126px; border-radius: 46% 46% 40% 40%; background: rgba(245,232,200,.86); color: var(--vermilion); display: grid; place-items: center; font-family: 'Shippori Mincho', serif; font-size: 35px; box-shadow: 0 0 45px rgba(196,154,69,.58); }
.lantern-a { right: 4vw; top: 7vh; }
.lantern-b { right: 36vw; top: 63vh; transform: rotate(-8deg); }
.music-staves { position: absolute; right: -8vw; top: 64vh; width: 70vw; height: 120px; background: repeating-linear-gradient(0deg, transparent 0 17px, var(--brass) 18px 20px, transparent 21px 27px); transform: rotate(-12deg); opacity: .58; }

.epilogue {
  min-height: 34vh;
  display: grid;
  place-items: center;
  background: var(--sumi);
  color: var(--paper);
  font-family: 'Zen Antique', serif;
  font-size: clamp(20px, 3vw, 40px);
  text-align: center;
  padding: 5vw;
}

@keyframes sealPress {
  0% { opacity: 0; transform: scale(1.7) rotate(-35deg); filter: blur(10px); }
  62% { opacity: .96; transform: scale(.67) rotate(-18deg); filter: blur(0); }
  100% { transform: scale(.72) rotate(-18deg); }
}

@keyframes rotateSlow { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  .prologue, .scene { grid-template-columns: 1fr; padding: 9vh 7vw; }
  .prologue h1, .prologue p { grid-column: 1; }
  .era-seal { justify-self: start; margin-bottom: 7vh; }
  .sun-press { right: -40px; top: 16vh; }
  .day-dial { right: 12px; transform: translateY(-50%) scale(.76); transform-origin: right center; }
  .dial-caption { display: none; }
  .scene { margin-top: -4vh; clip-path: polygon(0 0, 100% 0, 100% 96%, 8% 100%, 0 94%); }
  .fan-copy, .fan-copy.right { grid-column: 1; justify-self: start; width: calc(100vw - 70px); padding: 36px 32px; }
  .vertical-title { left: auto; right: 18px; font-size: 34px; opacity: .42; }
  .motif, .tram .motif, .moga .motif, .quake .motif { inset: auto 0 4vh 0; width: 100vw; opacity: .5; transform: scale(.7); transform-origin: bottom right; }
}