:root {
  --burgundy: #4A1024;
  --shadow: #170711;
  --cream: #F5E6D3;
  --pearl: #FFF7EA;
  --cyan: #76F7FF;
  --magenta: #FF4FD8;
  --amber: #FFB84D;
  --violet: #7B5CFF;
  --display: "Anybody", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --label: "Noto Sans JP", system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--burgundy);
  background: var(--cream);
  font-family: var(--serif);
  overflow-x: hidden;
  cursor: crosshair;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: .18;
  background-image:
    radial-gradient(circle at 20% 40%, rgba(23, 7, 17, .18) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 60%, rgba(255, 247, 234, .25) 0 1px, transparent 1px);
  background-size: 5px 7px, 9px 11px;
  mix-blend-mode: multiply;
}

.cursor-flare {
  position: fixed;
  width: 26rem;
  height: 26rem;
  left: -13rem;
  top: -13rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 30;
  opacity: .42;
  transform: translate3d(var(--mx, 50vw), var(--my, 50vh), 0);
  background:
    radial-gradient(circle, rgba(255, 247, 234, .5), transparent 18%),
    conic-gradient(from 40deg, transparent, rgba(118, 247, 255, .55), transparent, rgba(255, 79, 216, .44), transparent, rgba(255, 184, 77, .55), transparent);
  filter: blur(22px) saturate(160%);
  mix-blend-mode: screen;
}

.timestamp-rail {
  position: fixed;
  z-index: 20;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 1.8rem;
  font-family: var(--label);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .17em;
  writing-mode: vertical-rl;
  color: color-mix(in srgb, var(--burgundy), transparent 18%);
}

.score { position: relative; isolation: isolate; }

.scene {
  position: relative;
  min-height: 105vh;
  padding: clamp(3rem, 7vw, 7rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  perspective: 1000px;
}

.first-ring {
  background:
    radial-gradient(circle at 92% 14%, rgba(118, 247, 255, .34), transparent 12rem),
    linear-gradient(135deg, var(--pearl), var(--cream) 58%, #ead0bd);
}

.hero-copy {
  position: relative;
  z-index: 3;
  width: min(92vw, 105rem);
  transform-style: preserve-3d;
}

.stamp, .movement-label small {
  margin: 0 0 1.2rem;
  font: 700 .8rem/1.2 var(--label);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.foil-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(5rem, 19vw, 19rem);
  line-height: .74;
  letter-spacing: -.1em;
  font-variation-settings: "wdth" var(--title-width, 118), "wght" var(--title-weight, 820);
  color: var(--burgundy);
  text-shadow: .035em .02em 0 rgba(118, 247, 255, .75), -.025em -.025em 0 rgba(255, 79, 216, .65), 0 .09em .12em rgba(23, 7, 17, .18);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: font-variation-settings .25s ease;
}

.foil-title i {
  position: relative;
  color: var(--amber);
  font-style: normal;
  text-shadow: 0 0 1.3rem var(--amber), .08em 0 0 var(--cyan), -.08em 0 0 var(--magenta);
}

.serif-note {
  max-width: 42rem;
  margin: 2rem 0 0 auto;
  font-size: clamp(1.2rem, 2.7vw, 2.7rem);
  line-height: 1.04;
  color: var(--burgundy);
}

.blob, .diagonal-sheet, .sound-flower, .afterimage, .sticker-pass { will-change: transform; transform-style: preserve-3d; }

.hero-blob {
  position: absolute;
  width: min(56vw, 48rem);
  height: min(52vw, 42rem);
  right: 5vw;
  top: 13vh;
  border-radius: 46% 54% 62% 38% / 36% 48% 52% 64%;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 247, 234, .82), transparent 16%),
    radial-gradient(circle at 72% 72%, rgba(123, 92, 255, .45), transparent 28%),
    linear-gradient(135deg, rgba(74, 16, 36, .95), rgba(255, 79, 216, .18));
  box-shadow: inset 0 0 0 .22rem rgba(118, 247, 255, .55), inset 1.5rem -1.5rem 3rem rgba(255, 184, 77, .25), 0 2rem 8rem rgba(74, 16, 36, .35);
  opacity: .88;
  animation: blobDrift 11s ease-in-out infinite alternate;
}

.speaker-rings {
  position: absolute;
  left: -20vw;
  top: 8vh;
  width: 75vw;
  height: 75vw;
  pointer-events: none;
}

.speaker-rings span {
  position: absolute;
  inset: calc(var(--i, 0) * 8%);
  border: 1px solid rgba(74, 16, 36, .18);
  border-radius: 48% 52% 53% 47% / 49% 43% 57% 51%;
  animation: ringPulse 5.4s ease-out infinite;
}
.speaker-rings span:nth-child(1) { --i: 0; }
.speaker-rings span:nth-child(2) { --i: 1; animation-delay: .5s; }
.speaker-rings span:nth-child(3) { --i: 2; animation-delay: 1s; }
.speaker-rings span:nth-child(4) { --i: 3; animation-delay: 1.5s; }
.speaker-rings span:nth-child(5) { --i: 4; animation-delay: 2s; }

.lens-slice {
  position: absolute;
  z-index: 4;
  left: 38vw;
  top: 35vh;
  width: 64vw;
  height: .85rem;
  transform: rotate(-16deg);
  background: linear-gradient(90deg, transparent, var(--cyan), var(--pearl), var(--magenta), var(--amber), transparent);
  filter: blur(.5px) drop-shadow(0 0 1.4rem var(--amber));
  mix-blend-mode: screen;
  animation: flareSweep 6s ease-in-out infinite;
}

.curve-text, .path-copy {
  position: absolute;
  inset: auto 4vw 5vh auto;
  width: min(70vw, 54rem);
  font: 800 1.05rem/1 var(--display);
  letter-spacing: .18em;
  fill: rgba(74, 16, 36, .55);
}

.heat-bend {
  min-height: 110vh;
  background:
    radial-gradient(circle at 82% 28%, rgba(255, 184, 77, .5), transparent 18rem),
    linear-gradient(145deg, var(--cream) 0 42%, var(--burgundy) 42% 67%, var(--pearl) 67% 100%);
  clip-path: polygon(0 4%, 100% 0, 100% 94%, 0 100%);
}

.diagonal-sheet {
  position: absolute;
  width: 74vw;
  height: 52vh;
  right: -10vw;
  top: 18vh;
  transform: rotate(-14deg);
  border-radius: 25% 75% 34% 66% / 68% 36% 64% 32%;
  background: linear-gradient(100deg, rgba(118, 247, 255, .42), rgba(255, 79, 216, .34), rgba(255, 184, 77, .55));
  box-shadow: inset 0 0 0 2px rgba(255, 247, 234, .7), 0 2rem 6rem rgba(23, 7, 17, .32);
  mix-blend-mode: hard-light;
}

.movement-label {
  position: relative;
  z-index: 3;
  align-self: start;
  max-width: 60rem;
}
.movement-label h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4rem, 12vw, 13rem);
  line-height: .78;
  letter-spacing: -.08em;
  font-variation-settings: "wdth" 132, "wght" 860;
  color: var(--pearl);
  text-shadow: .04em .02em 0 var(--cyan), -.035em -.02em 0 var(--magenta);
}
.heat-bend .movement-label small { color: var(--amber); }

.lyric {
  position: absolute;
  z-index: 4;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 3.4rem);
  line-height: .95;
  color: var(--pearl);
  max-width: 26rem;
  transform: rotate(-8deg);
}
.lyric-a { left: 11vw; bottom: 18vh; }
.lyric-b { right: 9vw; top: 15vh; color: var(--burgundy); transform: rotate(11deg); }

.flare-stack { position: absolute; right: 15vw; bottom: 13vh; width: 22rem; height: 22rem; }
.flare-stack span {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 247, 234, .7);
  background: radial-gradient(circle, rgba(255, 247, 234, .85), rgba(255, 184, 77, .22) 30%, transparent 62%);
  box-shadow: 0 0 2rem rgba(255, 184, 77, .8);
}
.flare-stack span:nth-child(1) { inset: 0; }
.flare-stack span:nth-child(2) { inset: 24%; transform: translateX(-62%); background-color: rgba(118, 247, 255, .18); }
.flare-stack span:nth-child(3) { inset: 38%; transform: translate(88%, -38%); background-color: rgba(255, 79, 216, .18); }

.path-copy { left: 10vw; bottom: 8vh; fill: rgba(255, 247, 234, .75); }

.feedback-garden {
  background:
    radial-gradient(circle at 22% 22%, rgba(255, 79, 216, .38), transparent 18rem),
    radial-gradient(circle at 78% 72%, rgba(118, 247, 255, .35), transparent 18rem),
    var(--burgundy);
  color: var(--pearl);
  clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 92%);
}

.movement-label.dark h2 { color: var(--cream); }
.movement-label.dark small { color: var(--cyan); }

.garden-field {
  position: absolute;
  inset: 10vh 4vw 6vh 10vw;
  z-index: 2;
}

.sound-flower {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(10rem, 22vw, 22rem);
  aspect-ratio: 1;
  border-radius: 52% 48% 37% 63% / 42% 68% 32% 58%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 247, 234, .75), transparent 13%),
    conic-gradient(from 20deg, rgba(118, 247, 255, .65), rgba(255, 79, 216, .43), rgba(255, 184, 77, .58), rgba(123, 92, 255, .5), rgba(118, 247, 255, .65));
  box-shadow: inset 0 0 0 .16rem rgba(255, 247, 234, .62), 0 1.4rem 4rem rgba(23, 7, 17, .48);
  animation: flowerFloat 7s ease-in-out infinite alternate;
}
.sound-flower:nth-child(1) { left: 7%; top: 42%; }
.sound-flower:nth-child(2) { left: 36%; top: 17%; animation-delay: -2s; }
.sound-flower:nth-child(3) { right: 10%; top: 36%; animation-delay: -3.4s; }
.sound-flower:nth-child(4) { right: 31%; bottom: 4%; animation-delay: -1.1s; }
.sound-flower.hot { filter: hue-rotate(18deg) saturate(145%); }
.sound-flower.cyan { filter: hue-rotate(120deg) saturate(140%); }
.sound-flower.violet { filter: hue-rotate(240deg) saturate(150%); }
.sound-flower b {
  font: 900 clamp(2rem, 6vw, 6rem)/1 var(--display);
  letter-spacing: -.08em;
  color: var(--shadow);
  mix-blend-mode: multiply;
}
.sound-flower span {
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(23, 7, 17, .28);
  border-radius: inherit;
  transform: rotate(25deg);
}

.garden-caption {
  position: absolute;
  z-index: 5;
  right: 8vw;
  bottom: 9vh;
  max-width: 29rem;
  font-size: clamp(1.2rem, 2.1vw, 2.2rem);
  line-height: 1.05;
}

.scratch {
  position: absolute;
  height: .22rem;
  width: 42vw;
  background: repeating-linear-gradient(90deg, transparent 0 1rem, var(--cyan) 1rem 1.2rem, var(--magenta) 1.2rem 1.35rem, transparent 1.35rem 2.1rem);
  transform: rotate(-22deg);
  opacity: .8;
  filter: drop-shadow(0 0 .5rem var(--cyan));
}
.scratch-one { right: -4vw; top: 18vh; }
.scratch-two { left: 2vw; bottom: 18vh; transform: rotate(13deg); }

.aftertone {
  min-height: 112vh;
  background:
    radial-gradient(circle at 55% 50%, rgba(123, 92, 255, .28), transparent 19rem),
    radial-gradient(circle at 18% 72%, rgba(255, 79, 216, .18), transparent 14rem),
    var(--shadow);
  color: var(--pearl);
}
.movement-label.midnight small { color: var(--amber); }
.movement-label.midnight h2 { color: var(--pearl); }

.after-orbit { position: absolute; inset: 0; pointer-events: none; }
.after-orbit span {
  position: absolute;
  width: 18rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 247, 234, .22);
  border-radius: 50%;
  box-shadow: inset 0 0 2rem rgba(118, 247, 255, .12);
}
.after-orbit span:nth-child(1) { left: 9vw; top: 18vh; }
.after-orbit span:nth-child(2) { right: 12vw; top: 28vh; width: 28rem; }
.after-orbit span:nth-child(3) { left: 42vw; bottom: 9vh; width: 10rem; }

.pearl-caption {
  position: absolute;
  max-width: 23rem;
  font-size: clamp(1.15rem, 2vw, 2.05rem);
  line-height: 1.06;
  color: var(--cream);
}
.cap-one { left: 12vw; bottom: 26vh; }
.cap-two { right: 11vw; top: 22vh; }

.afterimage {
  position: relative;
  z-index: 4;
  justify-self: center;
  margin-top: 15vh;
  font: 900 clamp(4rem, 14vw, 15rem)/.78 var(--display);
  letter-spacing: -.1em;
  color: transparent;
  -webkit-text-stroke: 1px var(--pearl);
  text-shadow: .05em 0 0 var(--cyan), -.04em 0 0 var(--magenta), 0 0 2rem rgba(255, 247, 234, .4);
}

.sticker-pass {
  position: absolute;
  right: 12vw;
  bottom: 10vh;
  padding: 1.1rem 1.6rem;
  border-radius: 999px 48% 999px 46%;
  font: 800 .88rem/1 var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--shadow);
  background: linear-gradient(110deg, var(--cyan), var(--pearl), var(--magenta), var(--amber));
  box-shadow: 0 1rem 3rem rgba(0,0,0,.42);
  transform: rotate(-8deg);
}

.is-inview .movement-label h2 { animation: wordBend 1.8s ease both; }
.is-inview .lyric { animation: lyricSlide 1.2s ease both; }

@keyframes blobDrift {
  from { transform: translate3d(0, 0, -40px) rotate(-6deg) scale(1); border-radius: 46% 54% 62% 38% / 36% 48% 52% 64%; }
  to { transform: translate3d(-4vw, 5vh, -20px) rotate(9deg) scale(1.06); border-radius: 61% 39% 45% 55% / 55% 34% 66% 45%; }
}

@keyframes ringPulse {
  0% { transform: scale(.86); opacity: .04; }
  35% { opacity: .55; }
  100% { transform: scale(1.1); opacity: .08; }
}

@keyframes flareSweep {
  0%, 100% { transform: translateX(-15vw) rotate(-16deg); opacity: .16; }
  45%, 58% { transform: translateX(8vw) rotate(-16deg); opacity: .95; }
}

@keyframes flowerFloat {
  from { transform: translate3d(0, 0, 0) rotateX(0) rotateZ(-4deg); border-radius: 52% 48% 37% 63% / 42% 68% 32% 58%; }
  to { transform: translate3d(2vw, -3vh, 30px) rotateX(12deg) rotateZ(10deg); border-radius: 38% 62% 55% 45% / 63% 39% 61% 37%; }
}

@keyframes wordBend {
  from { font-variation-settings: "wdth" 78, "wght" 520; transform: translateY(2rem) skewX(-8deg); }
  to { font-variation-settings: "wdth" 132, "wght" 860; transform: translateY(0) skewX(0); }
}

@keyframes lyricSlide {
  from { opacity: 0; translate: 0 3rem; }
  to { opacity: 1; translate: 0 0; }
}

@media (max-width: 760px) {
  .timestamp-rail { display: none; }
  .scene { padding: 2rem; min-height: 100vh; }
  .serif-note { margin-left: 0; }
  .movement-label h2 { font-size: clamp(3.5rem, 18vw, 8rem); }
  .garden-field { position: relative; inset: auto; min-height: 55vh; }
  .sound-flower { width: 11rem; }
  .garden-caption, .pearl-caption, .lyric { position: relative; inset: auto; margin: 1rem 0; }
  .afterimage { justify-self: start; }
}