:root {
  --clay: #6F5B4B;
  --murasaki: #4B1D5A;
  --paper: #F3E9D2;
  --iris: #8E5AA8;
  --haze: #C8A7D8;
  --gold: #C8A64B;
  --sumi: #1B1720;
  --lilac: #E6D9EC;
  --title-font: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --serif-jp: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --progress: 0;
  --paper-tint: rgba(243, 233, 210, 0);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sumi);
  color: var(--murasaki);
  font-family: var(--serif-jp);
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--paper-tint);
  pointer-events: none;
  z-index: 15;
  mix-blend-mode: multiply;
  transition: background 900ms ease;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .27;
  background-image:
    radial-gradient(circle at 12% 17%, rgba(27,23,32,.18) 0 1px, transparent 1.7px),
    radial-gradient(circle at 71% 43%, rgba(111,91,75,.16) 0 1px, transparent 1.6px),
    linear-gradient(96deg, transparent 0 47%, rgba(111,91,75,.08) 48% 49%, transparent 50% 100%);
  background-size: 37px 43px, 53px 47px, 11px 100%;
}

.cursor-wash {
  position: fixed;
  width: 28vmin;
  height: 28vmin;
  left: -40vmin;
  top: -40vmin;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  opacity: .36;
  filter: blur(22px);
  background: radial-gradient(circle, rgba(142,90,168,.38), rgba(200,167,216,.14) 45%, transparent 72%);
  transform: translate(-50%, -50%) scale(var(--cursor-scale, 1));
  transition: opacity 700ms ease;
}

.season-marks {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.season-marks button,
.seal {
  border: 1px solid rgba(200,166,75,.72);
  background: rgba(75,29,90,.86);
  color: var(--paper);
  font-family: var(--gothic);
  font-size: 10px;
  letter-spacing: .22em;
  writing-mode: vertical-rl;
  padding: 9px 5px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(27,23,32,.18);
}

.season-marks button.active { background: var(--gold); color: var(--sumi); }

.screen-poem {
  width: 100%;
  background: var(--sumi);
}

.panel {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  transform-origin: right center;
  transform: perspective(1600px) rotateY(var(--fold, -8deg)) translateX(var(--slide, 5vw));
  transition: transform 900ms cubic-bezier(.2,.7,.15,1), box-shadow 900ms ease;
  box-shadow: -18px 0 60px rgba(27,23,32,.18), inset 0 0 0 1px rgba(111,91,75,.16);
}

.panel.in-view { --fold: 0deg; --slide: 0; box-shadow: -10px 0 50px rgba(27,23,32,.12); }

.panel::before,
.panel::after,
.paper-fibers {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.panel::before {
  opacity: .72;
  background-image:
    linear-gradient(82deg, rgba(255,255,255,.18), transparent 34%),
    radial-gradient(circle at 25% 18%, rgba(200,167,216,.35), transparent 28%),
    radial-gradient(circle at 88% 76%, rgba(111,91,75,.13), transparent 32%);
}

.panel::after {
  opacity: .32;
  background-image: radial-gradient(circle, rgba(27,23,32,.25) 0 1px, transparent 1px);
  background-size: 19px 21px;
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}

.paper-fibers {
  z-index: 1;
  background:
    repeating-linear-gradient(93deg, rgba(111,91,75,.08) 0 1px, transparent 1px 21px),
    repeating-linear-gradient(2deg, rgba(255,255,255,.13) 0 1px, transparent 1px 31px);
  mix-blend-mode: multiply;
}

.hinge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  z-index: 8;
  background: linear-gradient(180deg, transparent, var(--gold) 12%, rgba(200,166,75,.28) 49%, var(--gold) 82%, transparent);
  box-shadow: 0 0 0 1px rgba(75,29,90,.1), 0 0 22px rgba(200,166,75,.27);
}

.hinge-left { left: 0; }
.hinge-right { right: 0; }

.panel-bowl { background: linear-gradient(115deg, var(--paper), var(--lilac) 64%, var(--haze)); }
.panel-paper { background: linear-gradient(104deg, #F3E9D2, #E6D9EC 58%, #F3E9D2); }
.panel-shadow { background: linear-gradient(101deg, #E6D9EC, #C8A7D8 48%, #6F5B4B 140%); }
.panel-cup { background: linear-gradient(108deg, #F3E9D2, #C8A7D8 72%, #8E5AA8); }
.panel-verse { background: linear-gradient(116deg, #1B1720 0%, #4B1D5A 54%, #E6D9EC 130%); color: var(--paper); }

.chapter, .torn-slip, .hanging-poem, .evening-poem { position: relative; z-index: 5; }

.chapter-main {
  padding: 24vh 0 0 12vw;
  max-width: 760px;
}

h1, h2 {
  font-family: var(--title-font);
  font-weight: 500;
  margin: 0;
  letter-spacing: .035em;
}

h1 { font-size: clamp(68px, 13vw, 178px); line-height: .84; color: var(--murasaki); }
h2 { font-size: clamp(40px, 8vw, 112px); line-height: .92; }

.poem-line {
  margin: 28px 0 0 14vw;
  max-width: 360px;
  font-size: clamp(18px, 2vw, 27px);
  line-height: 1.55;
  color: var(--clay);
}

.ratio, .caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(27,23,32,.63);
}

.ink-bloom {
  position: absolute;
  z-index: 2;
  left: 16vw;
  top: 18vh;
  width: clamp(260px, 48vw, 720px);
  height: clamp(260px, 48vw, 720px);
  border-radius: 46% 54% 52% 48%;
  transform: scale(calc(.58 + var(--progress) * .9)) rotate(calc(var(--progress) * 24deg));
  filter: blur(1px) url(#none);
  opacity: .72;
  background:
    radial-gradient(circle at 49% 47%, rgba(75,29,90,.2), rgba(142,90,168,.18) 23%, rgba(200,167,216,.19) 43%, rgba(200,167,216,.08) 61%, transparent 73%),
    repeating-radial-gradient(circle at 48% 52%, transparent 0 18px, rgba(75,29,90,.08) 21px 23px, transparent 27px 42px);
  animation: breatheBloom 9s ease-in-out infinite alternate;
}

@keyframes breatheBloom { from { border-radius: 46% 54% 49% 51%; } to { border-radius: 54% 46% 57% 43%; } }

.tea-bowl {
  position: absolute;
  right: -8vw;
  bottom: -14vh;
  width: 46vmin;
  height: 46vmin;
  border-radius: 50%;
  z-index: 3;
  background: radial-gradient(circle, transparent 36%, rgba(111,91,75,.18) 37% 40%, rgba(243,233,210,.5) 43% 52%, rgba(75,29,90,.28) 56% 60%, transparent 62%);
}

.bowl-ring, .bowl-glaze { position: absolute; inset: 13%; border-radius: 50%; border: 1px solid rgba(75,29,90,.28); }
.ring-b { inset: 25%; border-color: rgba(200,166,75,.42); }
.bowl-glaze { inset: 36%; background: rgba(142,90,168,.13); border: 0; }

.vertical-note {
  position: absolute;
  z-index: 5;
  left: 5vw;
  bottom: 8vh;
  writing-mode: vertical-rl;
  font-family: var(--serif-jp);
  font-size: 14px;
  letter-spacing: .18em;
  color: rgba(75,29,90,.72);
}

.seal { position: absolute; z-index: 9; min-height: 48px; }
.panel-bowl .seal { right: 20vw; top: 20vh; }
.seal-paper { left: 13vw; bottom: 12vh; }
.seal-shadow { right: 20vw; top: 18vh; }
.seal-repair { left: 10vw; top: 19vh; }
.seal-verse { right: 16vw; bottom: 20vh; }

.torn-slip {
  width: min(54vw, 670px);
  margin-left: 30vw;
  top: 18vh;
  padding: 46px 54px 64px;
  background: rgba(243,233,210,.78);
  clip-path: polygon(1% 5%, 96% 0, 100% 88%, 93% 100%, 5% 95%, 0 39%);
  box-shadow: 0 24px 70px rgba(27,23,32,.16);
}

.torn-slip p, .hanging-poem p, .cup-copy p, .evening-poem p:not(.ratio) {
  font-size: clamp(17px, 2vw, 25px);
  line-height: 1.7;
  max-width: 460px;
}

.kana-trace {
  position: absolute;
  z-index: 3;
  left: 8vw;
  top: 15vh;
  writing-mode: vertical-rl;
  font-family: var(--title-font);
  font-size: clamp(38px, 8vw, 102px);
  line-height: 1.6;
  color: rgba(75,29,90,.1);
  transform: rotate(-7deg);
}

.side-caption { position: absolute; right: 10vw; bottom: 8vh; writing-mode: vertical-rl; z-index: 5; }

.dye-river {
  position: absolute;
  z-index: 2;
  left: -10vw;
  top: 44vh;
  width: 124vw;
  height: 28vh;
  transform: rotate(-12deg) scaleX(calc(.7 + var(--progress) * .55));
  background: radial-gradient(ellipse at 30% 50%, rgba(142,90,168,.4), rgba(200,167,216,.2) 45%, transparent 73%);
  filter: blur(12px);
}

.reed-field {
  position: absolute;
  inset: -12vh -8vw;
  z-index: 4;
  opacity: .42;
  transform: translateX(calc(var(--progress) * -5vw));
}

.reed-field span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.3vw;
  background: linear-gradient(90deg, transparent, rgba(27,23,32,.22), transparent);
  transform: rotate(var(--r, -13deg));
  transform-origin: top center;
}

.reed-field span:nth-child(1) { left: 10%; --r: -16deg; }
.reed-field span:nth-child(2) { left: 23%; --r: -9deg; }
.reed-field span:nth-child(3) { left: 39%; --r: -18deg; }
.reed-field span:nth-child(4) { left: 58%; --r: -11deg; }
.reed-field span:nth-child(5) { left: 74%; --r: -20deg; }
.reed-field span:nth-child(6) { left: 89%; --r: -14deg; }

.hanging-poem {
  margin-left: 15vw;
  top: 19vh;
  width: min(420px, 70vw);
  writing-mode: vertical-rl;
  min-height: 62vh;
  padding: 38px 26px;
  border-top: 2px solid rgba(200,166,75,.48);
  background: rgba(243,233,210,.24);
}

.pressed-leaf {
  position: absolute;
  z-index: 5;
  width: 130px;
  height: 56px;
  border-radius: 100% 0 100% 0;
  border: 1px solid rgba(111,91,75,.28);
  background: rgba(111,91,75,.13);
  transform: rotate(-24deg);
}
.leaf-a { right: 22vw; bottom: 18vh; }
.leaf-b { right: 12vw; bottom: 34vh; transform: rotate(28deg) scale(.65); }
.ratio-shadow { position: absolute; right: 9vw; bottom: 9vh; z-index: 5; }

.ceramic-shard {
  position: absolute;
  z-index: 4;
  left: 44vw;
  top: 10vh;
  width: min(42vw, 520px);
  height: 72vh;
  min-width: 310px;
  border-radius: 48% 44% 52% 38% / 37% 55% 36% 61%;
  background:
    radial-gradient(circle at 38% 24%, rgba(255,255,255,.36), transparent 22%),
    radial-gradient(circle at 70% 75%, rgba(142,90,168,.26), transparent 34%),
    linear-gradient(135deg, rgba(243,233,210,.92), rgba(230,217,236,.86));
  box-shadow: 0 34px 90px rgba(27,23,32,.24), inset 0 0 0 2px rgba(111,91,75,.22);
  clip-path: polygon(21% 0, 83% 8%, 100% 42%, 78% 100%, 20% 91%, 0 52%);
}

.ceramic-shard:hover .shard-note { opacity: 1; transform: translateY(0); }
.shard-note {
  position: absolute;
  left: 11%;
  bottom: 10%;
  z-index: 8;
  padding: 10px 14px;
  background: rgba(75,29,90,.83);
  color: var(--paper);
  font-family: var(--gothic);
  font-size: 11px;
  letter-spacing: .12em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.kintsugi { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 7; }
.kintsugi path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(200,166,75,.7));
  stroke-dasharray: 700;
  stroke-dashoffset: calc(700 - var(--progress) * 700);
}
.kintsugi .branch { stroke-width: 2.2; stroke-dasharray: 260; stroke-dashoffset: calc(260 - var(--progress) * 260); }

.cup-copy { padding: 24vh 0 0 10vw; max-width: 360px; }
.gold-flecks span {
  position: absolute;
  z-index: 7;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(200,166,75,.75);
}
.gold-flecks span:nth-child(1) { left: 37vw; top: 31vh; }
.gold-flecks span:nth-child(2) { left: 64vw; top: 22vh; }
.gold-flecks span:nth-child(3) { left: 74vw; top: 68vh; }
.gold-flecks span:nth-child(4) { left: 51vw; top: 83vh; }
.gold-flecks span:nth-child(5) { left: 88vw; top: 47vh; }

.moon-water {
  position: absolute;
  z-index: 3;
  right: 18vw;
  top: 13vh;
  width: 34vmin;
  height: 34vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 39%, rgba(243,233,210,.8), rgba(230,217,236,.35) 41%, rgba(75,29,90,.18) 42% 59%, transparent 60%);
  opacity: .8;
}

.final-ring {
  position: absolute;
  left: 8vw;
  bottom: -18vh;
  width: 70vmin;
  height: 70vmin;
  border-radius: 45% 55% 52% 48%;
  border: 28px solid rgba(200,167,216,.18);
  box-shadow: inset 0 0 0 3px rgba(200,166,75,.16), 0 0 70px rgba(142,90,168,.23);
}

.evening-poem {
  margin-left: 39vw;
  padding-top: 35vh;
  max-width: 520px;
}

.inkstone {
  position: absolute;
  right: 10vw;
  bottom: 9vh;
  width: 22vw;
  height: 16vh;
  background: linear-gradient(135deg, rgba(27,23,32,.86), rgba(75,29,90,.65));
  border-radius: 8px 18px 10px 16px;
  box-shadow: inset 18px 18px 38px rgba(0,0,0,.22), 0 22px 56px rgba(0,0,0,.24);
}

@media (max-width: 760px) {
  .season-marks { right: 8px; }
  .chapter-main { padding-left: 7vw; }
  .poem-line { margin-left: 4vw; }
  .torn-slip { margin-left: 8vw; width: 82vw; padding: 34px 32px 48px; }
  .hanging-poem { margin-left: 8vw; }
  .ceramic-shard { left: 30vw; opacity: .85; }
  .cup-copy { padding-left: 7vw; }
  .evening-poem { margin-left: 9vw; padding-right: 14vw; }
  .inkstone { width: 44vw; }
}