:root {
  --burgundy: #6B1D2A;
  --cream: #F5ECD7;
  --rose: #C4918A;
  --ink: #3A1520;
  --parchment: #EDE0CF;
  --mauve: #9E7B85;
  --wine: #2D0A12;
}

/* IntersectionObserver trigger `.visible` when elements enter the viewport. Stagger paths increments (0.3s */

* { box-sizing: border-box; }

html {
  scroll-snap-type: y proximity;
  background: var(--wine);
}

body {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 1.0625rem;
  line-height: 2;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

.narrative { width: 100%; }

.panel {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  padding: 12vh 8vw;
  isolation: isolate;
}

.panel-dark {
  color: var(--parchment);
  background:
    radial-gradient(circle at 20% 18%, rgba(196, 145, 138, 0.18), transparent 27vw),
    linear-gradient(135deg, var(--wine) 0%, var(--burgundy) 54%, #7b2632 100%);
}

.panel-light {
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 22%, rgba(196, 145, 138, 0.2), transparent 25vw),
    linear-gradient(135deg, var(--cream), var(--parchment));
}

h1, h2, .hero-kanji, .section-mark, .stone-card span, .fortune-kicker, .distribution-label {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 0.92;
  letter-spacing: 0.12em;
}

p { margin: 1.3rem 0 0; }
em { font-style: italic; font-size: 1.125rem; }

.parallax { will-change: transform; }

.path-draw {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
  transition: stroke-dashoffset 2.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.path-draw.visible { stroke-dashoffset: 0; }
.delay-1 { transition-delay: 0.3s; }
.delay-2 { transition-delay: 0.6s; }

.marble {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

.marble-dark { color: var(--rose); opacity: 0.09; }
.marble-light { color: var(--mauve); opacity: 0.12; }

.torii {
  position: absolute;
  color: var(--rose);
  opacity: 0.35;
  pointer-events: none;
}

.torii-hero {
  width: min(78vw, 920px);
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.hero {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(245, 236, 215, 0.13), transparent 18rem),
    linear-gradient(150deg, var(--burgundy) 0%, var(--wine) 48%, var(--cream) 165%);
}

.hero-kanji {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
  font-size: clamp(7rem, 23vw, 24rem);
  letter-spacing: -0.06em;
  color: var(--cream);
  text-shadow: 0 2rem 5rem rgba(45, 10, 18, 0.55);
  mix-blend-mode: normal;
}

.hero-kanji span {
  display: inline-block;
  will-change: transform, opacity;
}

.hero-reveal {
  width: min(880px, 72vw);
  margin: 0 auto;
  text-align: center;
  opacity: 0.18;
  transform: translateY(5vh);
  transition: opacity 0.5s ease;
  z-index: 2;
}

.eyebrow, .section-mark {
  display: block;
  margin: 0 0 1.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: var(--rose);
}

.lead {
  max-width: 48rem;
  margin: 2rem auto 0;
  color: var(--parchment);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.garden {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 50vw) 1fr;
  align-items: center;
  gap: 3vw;
}

.scroll-column {
  grid-column: 2;
  padding: 3vh 0;
  max-width: 46rem;
}

.scroll-column h2, .stream-copy h2 { color: var(--ink); }

.probability-lines {
  position: relative;
  width: 100%;
  max-width: 360px;
  color: var(--mauve);
  opacity: 0.56;
}

.probability-lines.left { justify-self: start; }
.probability-lines.right { justify-self: end; }

.stones { padding-bottom: 8vh; }

.divider {
  top: 2.5vh;
  left: 50%;
  width: 70vw;
  transform: translateX(-50%);
  opacity: 0.24;
}

.section-head {
  max-width: 55rem;
  margin: 0 auto 4vh;
  text-align: center;
}

.section-head h2 { color: var(--cream); }

.stone-field {
  position: relative;
  width: min(1050px, 86vw);
  height: 58vh;
  min-height: 530px;
  margin: 0 auto;
}

.stone-card {
  position: absolute;
  width: clamp(180px, 22vw, 270px);
  min-height: 170px;
  padding: 1.4rem 1.35rem;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(158, 123, 133, 0.11) 0 1px, transparent 1px 100%),
    var(--cream);
  border: 1px solid rgba(107, 29, 42, 0);
  border-radius: 2px;
  box-shadow: 0 1.2rem 3rem rgba(45, 10, 18, 0.3);
  opacity: 0;
  transform: translateY(24px) rotate(var(--tilt, 0deg));
  transition: opacity 1s ease, transform 1s ease, border-color 1.4s ease;
}

.stone-card.visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--tilt, 0deg));
  border-color: rgba(107, 29, 42, 0.78);
}

.stone-card span {
  display: block;
  font-size: 1.55rem;
  letter-spacing: 0.16em;
  color: var(--burgundy);
}

.stone-card p { font-size: 0.97rem; line-height: 1.8; }
.stone-a { left: 1%; top: 11%; --tilt: -2deg; transition-delay: 0s; }
.stone-b { left: 36%; top: 0; --tilt: 1deg; transition-delay: 0.18s; }
.stone-c { right: 2%; top: 24%; --tilt: -1deg; transition-delay: 0.36s; }
.stone-d { left: 18%; bottom: 3%; --tilt: 2deg; transition-delay: 0.54s; }
.stone-e { right: 24%; bottom: 0; --tilt: -2deg; transition-delay: 0.72s; }

.stream {
  display: grid;
  align-content: center;
}

.stream-copy {
  position: relative;
  z-index: 2;
  width: min(720px, 68vw);
}

.distribution {
  position: absolute;
  left: 4vw;
  right: 4vw;
  bottom: 9vh;
  width: 92vw;
  height: 58vh;
  color: var(--burgundy);
  overflow: visible;
}

#distributionPath {
  stroke: var(--burgundy);
  stroke-width: 5;
  filter: drop-shadow(0 1rem 1.2rem rgba(196, 145, 138, 0.24));
}

.axis { stroke: var(--mauve); opacity: 0.45; stroke-width: 1; }

.distribution-label {
  position: absolute;
  right: 8vw;
  bottom: 10vh;
  color: var(--burgundy);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
}

.fortune {
  display: grid;
  place-items: center;
  text-align: center;
}

.wheel {
  position: absolute;
  width: min(72vw, 720px);
  height: auto;
  color: var(--rose);
  opacity: 0.13;
  animation: wheelTurn 38s linear infinite;
}

.wheel circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.fortune-stage { width: min(720px, 82vw); }

.omikuji {
  width: min(430px, 78vw);
  min-height: 310px;
  margin: 3rem auto;
  padding: 3rem 2.2rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--burgundy);
  border-radius: 2px;
  box-shadow: 0 2rem 6rem rgba(45, 10, 18, 0.45);
  transform: rotate(-2deg) translateY(0);
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.45s ease;
}

.omikuji:hover, .omikuji.drawn {
  transform: rotate(1deg) translateY(-12px);
  background: var(--parchment);
}

.fortune-kicker {
  display: block;
  color: var(--burgundy);
  font-size: 1rem;
  letter-spacing: 0.25em;
}

.omikuji p {
  margin-top: 2rem;
  font-size: 1.18rem;
  line-height: 1.9;
}

.closing {
  max-width: 46rem;
  margin: 0 auto;
  color: var(--parchment);
}

.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rose);
  opacity: 0.4;
}

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

@media (max-width: 760px) {
  .panel { padding: 12vh 6vw; }
  .garden { grid-template-columns: 1fr; }
  .scroll-column { grid-column: 1; }
  .probability-lines { position: absolute; width: 38vw; opacity: 0.24; }
  .probability-lines.left { left: 2vw; top: 12vh; }
  .probability-lines.right { right: 2vw; bottom: 8vh; }
  .hero-reveal, .stream-copy { width: 88vw; }
  .stone-field { height: auto; min-height: 0; display: grid; gap: 1rem; }
  .stone-card { position: relative; inset: auto; width: 100%; }
  .distribution { bottom: 6vh; height: 44vh; }
}