:root {
  /* Space Grotesk** only for tiny coordinate-like labels */
  --black-marble: #0B0711;
  --garnet: #8E1F3F;
  --matcha: #2F7A55;
  --amethyst: #4A2C7A;
  --amber: #D89A32;
  --cream: #F4E6C8;
  --lacquer: #B72D25;
  --rain-blue: #6FB7C8;
  --gold: #E8C766;
  --font-display: "Dela Gothic One", system-ui, sans-serif;
  --font-serif-jp: "Noto Serif JP", serif;
  --font-editorial: "Fraunces", Georgia, serif;
  --font-label: "Space Grotesk", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--black-marble);
}

body {
  margin: 0;
  color: var(--cream);
  background:
    radial-gradient(circle at 15% 10%, rgba(74, 44, 122, .36), transparent 34rem),
    radial-gradient(circle at 82% 12%, rgba(111, 183, 200, .18), transparent 27rem),
    linear-gradient(135deg, #08050d 0%, var(--black-marble) 47%, #140713 100%);
  font-family: var(--font-editorial);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(113deg, transparent 0 27%, rgba(232, 199, 102, .08) 27.15%, transparent 27.45% 100%),
    linear-gradient(71deg, transparent 0 63%, rgba(244, 230, 200, .045) 63.2%, transparent 63.55% 100%),
    radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, .62) 100%);
  z-index: 30;
}

.grain,
.rain-glass {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.grain {
  opacity: .19;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(244, 230, 200, .55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 43%, rgba(232, 199, 102, .45) 0 1px, transparent 1.7px),
    radial-gradient(circle at 41% 79%, rgba(111, 183, 200, .38) 0 1px, transparent 1.5px);
  background-size: 93px 121px, 131px 83px, 157px 109px;
  mix-blend-mode: screen;
}

.rain-glass {
  opacity: .24;
  background:
    repeating-linear-gradient(91deg, transparent 0 38px, rgba(111, 183, 200, .1) 39px, transparent 41px),
    radial-gradient(ellipse at 20% 18%, rgba(111, 183, 200, .26) 0 1px, transparent 4px),
    radial-gradient(ellipse at 76% 32%, rgba(244, 230, 200, .2) 0 1px, transparent 5px),
    radial-gradient(ellipse at 64% 74%, rgba(111, 183, 200, .2) 0 1px, transparent 6px);
  background-size: auto, 190px 260px, 240px 230px, 310px 270px;
  animation: rainDrift 19s linear infinite;
}

#cursor-aura {
  position: fixed;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(216, 154, 50, .13), rgba(142, 31, 63, .07) 34%, transparent 69%);
  z-index: 1;
}

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(232, 199, 102, .13);
}

.scene::before {
  content: attr(data-scene);
  position: absolute;
  top: 2.25rem;
  right: 2.4rem;
  font: 700 .78rem/1 var(--font-label);
  letter-spacing: .42em;
  color: rgba(232, 199, 102, .52);
  z-index: 4;
}

.split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  position: relative;
}

.split::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), var(--rain-blue), transparent);
  box-shadow: 0 0 28px rgba(232, 199, 102, .85), 0 0 80px rgba(111, 183, 200, .25);
  z-index: 5;
  animation: seamBreath 5.5s ease-in-out infinite;
}

.split-diagonal::after {
  width: 120px;
  left: calc(50% - 60px);
  transform: skewX(-14deg);
  background: linear-gradient(90deg, transparent, rgba(232, 199, 102, .24), rgba(111, 183, 200, .12), transparent);
}

.split-inverted::after { transform: skewX(11deg); }
.split-knife::after { width: 8px; left: calc(48% - 4px); }

.panel {
  position: relative;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panel-title {
  background: radial-gradient(circle at 9% 70%, rgba(142, 31, 63, .34), transparent 26rem);
  overflow: hidden;
}

.scene-kicker,
.scene-number,
.magnet-tag,
.menu-poem {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: .28em;
}

.scene-kicker {
  color: var(--gold);
  font-size: clamp(.72rem, 1.2vw, .9rem);
  margin: 0 0 1.3rem;
}

.mega-title {
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 17vw, 18rem);
  letter-spacing: -.09em;
  line-height: .75;
  margin: 0 0 0 -1.1rem;
  color: var(--cream);
  text-shadow: 0 0 50px rgba(216, 154, 50, .22);
  animation: titleSlide 1.3s cubic-bezier(.2, .9, .2, 1) both;
}

.jp-seal {
  position: absolute;
  right: 2.2rem;
  top: 20%;
  font: 700 clamp(3rem, 8vw, 8rem)/.9 var(--font-display);
  writing-mode: vertical-rl;
  color: rgba(244, 230, 200, .11);
  text-shadow: 0 0 22px rgba(232, 199, 102, .16);
}

.panel-object {
  align-items: center;
  background:
    radial-gradient(circle at 50% 48%, rgba(216, 154, 50, .32), transparent 18rem),
    radial-gradient(circle at 65% 24%, rgba(111, 183, 200, .18), transparent 23rem);
}

.noren-line {
  position: absolute;
  inset: 8% 18% auto auto;
  width: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lacquer), var(--gold));
  box-shadow: 0 0 30px rgba(183, 45, 37, .7);
}

.sweet {
  position: relative;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .7s ease;
}

.sweet:hover { filter: brightness(1.18) saturate(1.18); }

.sweet-jewel {
  width: clamp(14rem, 34vw, 31rem);
  aspect-ratio: 1;
  border-radius: 34% 66% 42% 58% / 42% 34% 66% 58%;
  background:
    linear-gradient(135deg, rgba(244, 230, 200, .72), rgba(216, 154, 50, .75) 34%, rgba(142, 31, 63, .8) 62%, rgba(74, 44, 122, .82)),
    radial-gradient(circle at 38% 26%, #F4E6C8, transparent 22%);
  box-shadow: inset -38px -44px 80px rgba(11, 7, 17, .48), inset 28px 23px 60px rgba(244, 230, 200, .32), 0 32px 100px rgba(216, 154, 50, .23);
  transform: rotate(45deg);
  animation: jewelCatch 7s ease-in-out infinite;
}

.jelly-core {
  position: absolute;
  inset: 22%;
  border-radius: 28% 72% 48% 52%;
  border: 1px solid rgba(244, 230, 200, .42);
  background: radial-gradient(circle at 35% 22%, rgba(244, 230, 200, .85), transparent 22%), rgba(111, 183, 200, .18);
}

.gold-fleck,
.constellation span {
  position: absolute;
  width: .42rem;
  height: .42rem;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 16px var(--gold);
  animation: fleckOrbit 6s ease-in-out infinite;
}

.fleck-one { top: 8%; left: 52%; }
.fleck-two { right: 10%; top: 58%; animation-delay: -1.6s; }
.fleck-three { bottom: 9%; left: 30%; animation-delay: -3.2s; }

.caption-stack {
  margin-top: 3.2rem;
  text-align: center;
}

.subcaption,
.story-copy,
.final-copy {
  font: 300 clamp(1.15rem, 2vw, 1.75rem)/1.45 var(--font-editorial);
  color: rgba(244, 230, 200, .86);
}

.mirror-caption {
  margin: -.8rem 0 0;
  color: rgba(111, 183, 200, .16);
  transform: scaleY(-1);
  filter: blur(1px);
}

.magnet-tag {
  position: absolute;
  z-index: 10;
  border: 1px solid rgba(232, 199, 102, .42);
  color: var(--cream);
  background: rgba(11, 7, 17, .42);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: .7rem .95rem;
  font-size: .67rem;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(232, 199, 102, .09);
  transition: border-color .35s ease, color .35s ease, background .35s ease;
}

.magnet-tag:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(74, 44, 122, .38);
}

.tag-one { left: 12%; top: 28%; }
.tag-two { right: 10%; bottom: 22%; }
.tag-three { left: 8%; bottom: 18%; }
.tag-four { right: 16%; top: 18%; }
.tag-five { left: 18%; top: 18%; }
.tag-six { right: 10%; bottom: 24%; }
.tag-seven { left: 10%; top: 24%; }
.tag-eight { right: 14%; bottom: 18%; }

.text-panel h2,
.final-title {
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 10rem);
  line-height: .84;
  letter-spacing: -.07em;
  margin: .8rem 0 2rem;
}

.scene-number {
  color: var(--rain-blue);
  font-size: .72rem;
}

.vertical-note {
  position: absolute;
  right: clamp(1.5rem, 4vw, 4rem);
  top: 15%;
  writing-mode: vertical-rl;
  font: 600 clamp(1rem, 2vw, 1.55rem)/1.8 var(--font-serif-jp);
  color: rgba(244, 230, 200, .72);
}

.jade-stage {
  background: radial-gradient(circle at 54% 47%, rgba(47, 122, 85, .42), transparent 21rem);
  align-items: center;
}

.lacquer-tray,
.plinth {
  position: absolute;
  width: min(72%, 40rem);
  height: 18%;
  bottom: 18%;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(183, 45, 37, .72), rgba(11, 7, 17, .9), rgba(142, 31, 63, .6));
  box-shadow: inset 0 12px 40px rgba(244, 230, 200, .08), 0 24px 70px rgba(0, 0, 0, .55);
}

.mochi-moon {
  width: clamp(12rem, 24vw, 21rem);
  aspect-ratio: 1;
  border-radius: 50% 50% 46% 54%;
  background: radial-gradient(circle at 32% 24%, #fff6d9, var(--cream) 25%, rgba(47, 122, 85, .58) 72%);
  box-shadow: inset -30px -34px 70px rgba(11, 7, 17, .42), 0 38px 80px rgba(47, 122, 85, .28);
}

.bean-dot {
  position: absolute;
  width: 5.5rem;
  aspect-ratio: 1;
  right: 28%;
  bottom: 33%;
  border-radius: 49% 51% 45% 55%;
  background: var(--garnet);
  box-shadow: inset 1rem .4rem 2rem rgba(244, 230, 200, .08), 0 0 40px rgba(142, 31, 63, .45);
}

.steam {
  position: absolute;
  bottom: 39%;
  width: 3px;
  height: 34%;
  border-radius: 999px;
  background: linear-gradient(transparent, rgba(244, 230, 200, .44), transparent);
  filter: blur(.4px);
  animation: steamRise 5.8s ease-in-out infinite;
}
.steam-a { left: 42%; transform: rotate(-10deg); }
.steam-b { left: 51%; animation-delay: -1.8s; }
.steam-c { left: 58%; transform: rotate(12deg); animation-delay: -3s; }

.amber-stage {
  align-items: center;
  background: radial-gradient(circle at 45% 48%, rgba(216, 154, 50, .34), transparent 22rem);
}

.syrup-arc {
  position: absolute;
  inset: 12% 8%;
  width: 84%;
  height: 72%;
  fill: none;
  stroke: var(--amber);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 16px rgba(216, 154, 50, .8));
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: drawArc 5s ease-in-out infinite alternate;
}

.amber-cylinder {
  width: clamp(12rem, 25vw, 23rem);
  height: clamp(16rem, 32vw, 27rem);
  border-radius: 50% 50% 18% 18% / 17% 17% 12% 12%;
  background: linear-gradient(105deg, rgba(244, 230, 200, .7), rgba(216, 154, 50, .86) 34%, rgba(183, 45, 37, .74) 68%, rgba(74, 44, 122, .62));
  box-shadow: inset -32px 0 70px rgba(11, 7, 17, .5), 0 36px 100px rgba(216, 154, 50, .2);
}

.washi-fold {
  position: absolute;
  right: 15%;
  top: 18%;
  width: 12rem;
  height: 12rem;
  clip-path: polygon(0 0, 100% 26%, 65% 100%, 12% 72%);
  background: linear-gradient(135deg, rgba(244, 230, 200, .22), rgba(111, 183, 200, .1));
  border: 1px solid rgba(244, 230, 200, .2);
}

.jp-fragment {
  font: 700 clamp(2rem, 5vw, 5rem)/1 var(--font-serif-jp);
  color: var(--amber);
}

.counter-stage {
  align-items: center;
  background: radial-gradient(circle at 48% 46%, rgba(74, 44, 122, .44), transparent 22rem);
}

.plinth {
  height: 28%;
  bottom: 12%;
  border-radius: 7rem 7rem 2rem 2rem;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(244, 230, 200, .08) 18.2%, transparent 18.8%),
    linear-gradient(70deg, transparent 0 58%, rgba(111, 183, 200, .08) 58.2%, transparent 58.8%),
    #120d19;
}

.cameo-frame {
  width: clamp(16rem, 31vw, 28rem);
  aspect-ratio: .78;
  border-radius: 50%;
  border: 1px solid rgba(232, 199, 102, .62);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 45px rgba(232, 199, 102, .12), 0 0 70px rgba(74, 44, 122, .35);
}

.faceted-jelly {
  width: 58%;
  aspect-ratio: 1;
  clip-path: polygon(50% 0, 89% 17%, 100% 58%, 72% 100%, 24% 92%, 0 48%, 15% 14%);
  background: linear-gradient(135deg, rgba(111, 183, 200, .9), rgba(244, 230, 200, .5) 35%, rgba(74, 44, 122, .85));
  box-shadow: inset -1.2rem -1.1rem 2.4rem rgba(11, 7, 17, .45), 0 0 70px rgba(111, 183, 200, .28);
}

.gold-inlay {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.inlay-one { width: 55%; top: 28%; transform: rotate(-12deg); }
.inlay-two { width: 44%; bottom: 26%; transform: rotate(10deg); }

.afterimage-wrap {
  margin: auto;
  width: min(86vw, 72rem);
  text-align: center;
  position: relative;
  padding: 8rem 0;
}

.final-title {
  color: var(--cream);
  margin: 0;
  text-shadow: 0 0 60px rgba(216, 154, 50, .24);
}

.final-title span { color: rgba(244, 230, 200, .18); }

.final-copy {
  max-width: 44rem;
  margin: 2rem auto;
}

.constellation {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.constellation span:nth-child(1) { left: 14%; top: 22%; }
.constellation span:nth-child(2) { left: 31%; bottom: 12%; background: var(--rain-blue); }
.constellation span:nth-child(3) { right: 18%; top: 19%; background: var(--matcha); }
.constellation span:nth-child(4) { right: 28%; bottom: 20%; background: var(--garnet); }
.constellation span:nth-child(5) { left: 50%; top: 8%; }

.menu-poem {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  color: rgba(232, 199, 102, .7);
  font-size: .68rem;
}

.marble-veins {
  position: absolute;
  inset: 0;
  opacity: .36;
  z-index: -1;
}

.marble-veins svg { width: 100%; height: 100%; }
.marble-veins path {
  fill: none;
  stroke: rgba(244, 230, 200, .2);
  stroke-width: 1.3;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: veinDraw 9s ease-in-out infinite alternate;
}

.scene-rail {
  position: fixed;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: grid;
  gap: .55rem;
}

.scene-rail a {
  font: 500 .68rem/1 var(--font-label);
  letter-spacing: .18em;
  color: rgba(244, 230, 200, .42);
  text-decoration: none;
  padding: .45rem .3rem;
  transition: color .25s ease, transform .25s ease;
}
.scene-rail a:hover,
.scene-rail a.active { color: var(--gold); transform: translateX(.18rem); }

.scene.is-visible .text-panel h2,
.scene.is-visible .story-copy,
.scene.is-visible .vertical-note,
.scene.is-visible .final-title,
.scene.is-visible .final-copy {
  animation: subtitleDrift 1s cubic-bezier(.2, .9, .2, 1) both;
}

@keyframes titleSlide {
  from { transform: translateX(-18vw); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes seamBreath {
  0%, 100% { opacity: .55; filter: blur(0); }
  50% { opacity: 1; filter: blur(1px); }
}

@keyframes jewelCatch {
  0%, 100% { transform: rotate(45deg) scale(1); }
  50% { transform: rotate(50deg) scale(1.035); }
}

@keyframes fleckOrbit {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.8); opacity: .55; }
  50% { transform: translate3d(.8rem, -1rem, 0) scale(1.3); opacity: 1; }
}

@keyframes rainDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 24px 260px, -30px 230px, 42px 270px; }
}

@keyframes steamRise {
  0%, 100% { transform: translateY(1.2rem) rotate(-8deg) scaleY(.72); opacity: .18; }
  50% { transform: translateY(-2rem) rotate(8deg) scaleY(1.1); opacity: .66; }
}

@keyframes drawArc {
  to { stroke-dashoffset: 0; }
}

@keyframes veinDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes subtitleDrift {
  from { opacity: 0; transform: translateY(2rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split::after { left: 0; right: 0; top: 50%; width: auto; height: 2px; }
  .panel { min-height: 58vh; padding: 4.5rem 1.5rem; }
  .mega-title { font-size: clamp(4rem, 24vw, 8rem); }
  .jp-seal { right: 1rem; top: 10%; }
  .vertical-note { position: static; writing-mode: horizontal-tb; margin: 1rem 0; }
  .scene-rail { display: none; }
  .tag-one, .tag-three, .tag-five, .tag-seven { left: 1rem; }
  .tag-two, .tag-four, .tag-six, .tag-eight { right: 1rem; }
}