:root {
  --uv: #160A2E;
  --murasaki: #6F3CC3;
  --orchid: #D95CFF;
  --lavender: #D8C7FF;
  --cyan: #58F0E5;
  --saffron: #FFCF4A;
  --vermilion: #FF4B5C;
  --ink: #0B0712;
  --display: "Syne", "Inter", system-ui, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --ui: "Noto Sans JP", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--lavender);
  background: var(--uv);
  font-family: var(--ui);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: .24;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.18) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 40%, rgba(88,240,229,.14) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 48%, rgba(255,207,74,.05) 49% 50%, transparent 51%);
  background-size: 27px 31px, 39px 43px, 100% 100%;
  mix-blend-mode: screen;
}

.cursor-orb {
  position: fixed;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 28%, rgba(216,199,255,.38), rgba(88,240,229,.12) 38%, transparent 70%);
  border: 1px solid rgba(88,240,229,.32);
  filter: blur(.2px);
  mix-blend-mode: screen;
  opacity: .56;
}

.exhibit-nav {
  position: fixed;
  left: clamp(18px, 3vw, 42px);
  top: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  font: 500 11px/1 var(--ui);
  text-transform: uppercase;
  letter-spacing: .18em;
}

.nav-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--saffron);
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
}

.nav-line { width: 9vw; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); }
.exhibit-nav a { color: rgba(216,199,255,.76); text-decoration: none; transition: color .4s ease; }
.exhibit-nav a.is-current, .exhibit-nav a:hover { color: var(--cyan); }

.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(86px, 9vw, 130px) clamp(20px, 5vw, 84px);
  overflow: hidden;
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 25%, rgba(217,92,255,.22), transparent 34%),
    radial-gradient(circle at 28% 76%, rgba(88,240,229,.12), transparent 28%);
  opacity: .72;
  z-index: -4;
}

.scene-aperture {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 46% 46%, #2a1156 0%, var(--uv) 54%, var(--ink) 100%);
}

.aperture-hex {
  position: absolute;
  left: 12vw;
  top: 26vh;
  width: min(36vw, 410px);
  aspect-ratio: 1 / 1.13;
  animation: rotateHex 34s linear infinite;
}

.traced-hex svg { width: 100%; height: 100%; overflow: visible; }
.traced-hex polygon {
  fill: rgba(111,60,195,.08);
  stroke: var(--orchid);
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-dasharray: 820;
  stroke-dashoffset: 820;
  filter: drop-shadow(12px -6px 0 rgba(88,240,229,.42)) drop-shadow(-10px 7px 0 rgba(255,207,74,.28));
  animation: traceBorder 5.2s ease-in-out infinite;
}

.title-tiles {
  position: relative;
  z-index: 4;
  display: grid;
  gap: clamp(8px, 1vw, 14px);
  transform: translateX(8vw) rotate(-4deg);
}

.tile {
  display: block;
  width: max-content;
  padding: .02em .18em .08em;
  font-family: var(--display);
  font-size: clamp(58px, 13vw, 184px);
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.08em;
  color: var(--ink);
  background: var(--lavender);
  box-shadow: 18px 12px 0 rgba(88,240,229,.85), -12px -8px 0 rgba(255,75,92,.7);
  transform: translateY(50px) scale(.93);
  opacity: 0;
  animation: tileArrive .95s cubic-bezier(.2,.8,.16,1) forwards;
}

.tile-b { margin-left: 1.1em; animation-delay: .28s; background: var(--orchid); }
.tile-c { margin-left: .34em; animation-delay: .52s; background: var(--saffron); }

.scene-kicker {
  position: absolute;
  right: 7vw;
  bottom: 12vh;
  max-width: 330px;
  font: 600 italic clamp(22px, 2.4vw, 38px)/1.04 var(--serif);
  color: var(--lavender);
}

.orbital-ring {
  position: absolute;
  border: 1px solid rgba(216,199,255,.24);
  border-radius: 50%;
  transform: rotate(-18deg) scaleX(1.9);
}
.ring-one { width: 48vw; height: 18vw; left: 4vw; top: 32vh; }
.ring-two { width: 32vw; height: 12vw; right: 4vw; top: 18vh; border-color: rgba(88,240,229,.32); }

.primitive { position: absolute; display: block; }
.circle { right: 18vw; top: 26vh; width: 76px; height: 76px; border-radius: 50%; background: var(--cyan); }
.triangle { left: 8vw; bottom: 16vh; width: 120px; height: 104px; background: var(--vermilion); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bar { right: 12vw; bottom: 26vh; width: 168px; height: 24px; background: var(--saffron); transform: rotate(28deg); }
.quarter { left: 28vw; top: 13vh; width: 110px; height: 110px; background: var(--murasaki); border-radius: 110px 0 0 0; }

.chapter-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: var(--cyan);
  font: 700 12px/1 var(--ui);
  letter-spacing: .24em;
  text-transform: uppercase;
}
.chapter-label span { color: var(--ink); background: var(--cyan); padding: 8px 10px; clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%); }

.scene-lab {
  background: linear-gradient(145deg, var(--uv), #221049 45%, #39166a);
}
.scene-lab h1, .scene-transit h2, .scene-archive h2 {
  max-width: 860px;
  margin: 0;
  font: 800 clamp(48px, 8vw, 120px)/.86 var(--display);
  letter-spacing: -.06em;
  color: var(--lavender);
}
.poem, .transit-copy p {
  max-width: 560px;
  font: 600 italic clamp(22px, 2.2vw, 34px)/1.1 var(--serif);
  color: rgba(216,199,255,.86);
}

.honeycomb {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  grid-auto-rows: minmax(110px, 12vw);
  gap: 14px;
  width: min(980px, 92vw);
  margin-left: auto;
  transform: translateY(-4vh) rotate(-7deg);
}

.hex-cell {
  position: relative;
  min-height: 126px;
  display: grid;
  place-items: center;
  padding: 22px;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  background: rgba(111,60,195,.18);
  color: var(--lavender);
  font: 800 clamp(18px, 2.5vw, 34px)/.9 var(--display);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: -.04em;
  opacity: .2;
  transform: translateY(70px) scale(.88);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.16,1), filter .5s ease;
}

.scene.is-active .hex-cell, .hex-cell.in-view { opacity: 1; transform: translateY(0) scale(1); }
.hex-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from var(--spin, 0deg), var(--orchid), var(--cyan), var(--saffron), var(--vermilion), var(--orchid));
  opacity: .9;
  z-index: -2;
}
.hex-cell::after {
  content: attr(data-label);
  position: absolute;
  inset: 4px;
  display: grid;
  place-items: end center;
  padding-bottom: 22px;
  clip-path: inherit;
  background: var(--uv);
  color: rgba(216,199,255,.72);
  font: 500 10px/1 var(--ui);
  letter-spacing: .22em;
  text-transform: uppercase;
  z-index: -1;
}
.hex-cell:hover { filter: drop-shadow(8px -4px 0 rgba(88,240,229,.6)) drop-shadow(-8px 5px 0 rgba(255,75,92,.48)); }
.wide { grid-column: span 2; }
.tall { grid-row: span 2; }
.cell-fill::after { background: var(--murasaki); }
.cell-fill.saffron::after { background: var(--saffron); }
.cell-fill.cyan::after { background: var(--cyan); }
.cell-fill.orchid::after { background: var(--orchid); }
.cell-fill span { color: var(--ink); z-index: 2; }
.cell-outline::after { background: rgba(22,10,46,.92); }
.cell-outline.thick::before { opacity: 1; }

.duotone {
  position: absolute;
  inset: 4px;
  clip-path: inherit;
  background-blend-mode: screen, multiply, normal;
  filter: saturate(1.5) contrast(1.15);
}
.photo-hands { background: radial-gradient(ellipse at 30% 35%, rgba(255,207,74,.85), transparent 16%), radial-gradient(ellipse at 70% 60%, rgba(88,240,229,.78), transparent 18%), repeating-linear-gradient(28deg, #2a1454 0 13px, #D95CFF 14px 25px, #160A2E 26px 36px); }
.photo-clock { background: radial-gradient(circle, transparent 0 30%, #58F0E5 31% 33%, transparent 34%), conic-gradient(from 30deg, #D8C7FF, #6F3CC3, #0B0712, #FFCF4A, #D8C7FF); }
.photo-train { background: linear-gradient(90deg, transparent 0 20%, rgba(88,240,229,.8) 21% 23%, transparent 24% 60%, rgba(255,207,74,.7) 61% 63%, transparent 64%), repeating-linear-gradient(100deg, #160A2E 0 14px, #6F3CC3 15px 30px, #D95CFF 31px 38px); }
.photo-fan { background: repeating-conic-gradient(from -20deg at 15% 100%, #D8C7FF 0 10deg, #6F3CC3 11deg 18deg, #160A2E 19deg 24deg), radial-gradient(circle at 20% 80%, #FFCF4A, transparent 18%); }
.photo-wall { background: linear-gradient(115deg, #D8C7FF 0 24%, #6F3CC3 25% 45%, #160A2E 46% 70%, #58F0E5 71% 73%, #D95CFF 74%); }

.cell-note { position: absolute; z-index: 3; bottom: 24px; font: 500 11px var(--ui); letter-spacing: .24em; color: var(--cyan); text-transform: uppercase; }
.ruler { width: 76%; height: 2px; background: repeating-linear-gradient(90deg, var(--cyan) 0 6px, transparent 6px 12px); }
.swatch-strip { display: flex; gap: 10px; margin: -2vh 0 0 7vw; }
.swatch-strip b { width: 46px; height: 46px; background: var(--sw); clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }

.scene-transit { background: radial-gradient(circle at 72% 42%, rgba(217,92,255,.32), transparent 38%), var(--uv); }
.transit-copy { position: relative; z-index: 5; max-width: 720px; margin-left: auto; }
.honeycomb-transit { margin: 8vh auto 0 4vw; grid-template-columns: repeat(4, minmax(120px, 1fr)); transform: rotate(8deg); }
.orbiting::after { background: radial-gradient(circle, transparent 33%, rgba(88,240,229,.22) 34% 35%, transparent 36%), var(--uv); }
.split { filter: drop-shadow(13px 0 0 rgba(255,207,74,.4)) drop-shadow(-13px 0 0 rgba(255,75,92,.4)); }
.orbit-map { position: absolute; inset: 13vh 3vw auto auto; width: min(72vw, 900px); height: auto; opacity: .55; z-index: 1; }
.orbit-map path { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 8 16; animation: dashMove 14s linear infinite; }

.bubble-field { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.bubble {
  position: absolute;
  bottom: -160px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  border: 1px solid rgba(88,240,229,.58);
  background: radial-gradient(circle at 30% 25%, rgba(216,199,255,.58), rgba(217,92,255,.18) 36%, rgba(88,240,229,.08) 72%, transparent);
  box-shadow: inset -10px -14px 24px rgba(22,10,46,.35), 0 0 34px rgba(88,240,229,.18);
  backdrop-filter: blur(2px);
  animation: bubbleRise var(--d) linear infinite;
  animation-delay: var(--delay);
}

.scene-archive {
  background: var(--lavender);
  color: var(--ink);
  display: grid;
  align-items: center;
}
.scene-archive::before { background: radial-gradient(circle at 20% 28%, rgba(217,92,255,.28), transparent 36%), radial-gradient(circle at 76% 68%, rgba(88,240,229,.28), transparent 30%); }
.archive-panel { position: relative; z-index: 5; max-width: 780px; }
.scene-archive h2 { color: var(--ink); }
.scene-archive .poem { color: rgba(11,7,18,.72); }
.glyph-tiles { position: absolute; right: 6vw; bottom: 10vh; display: grid; grid-template-columns: repeat(4, 70px); gap: 10px; transform: rotate(-8deg); }
.glyph-tiles span {
  height: 70px;
  display: grid;
  place-items: center;
  font: 800 36px/.8 var(--display);
  color: var(--lavender);
  background: var(--ink);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  opacity: .86;
  transform: translate(var(--gx, 0), var(--gy, 0)) rotate(var(--gr, 0deg));
  transition: transform .9s cubic-bezier(.2,.8,.16,1);
}
.afterimage-cloud { position: absolute; inset: 0; z-index: 1; }
.afterimage-cloud i { position: absolute; width: 130px; height: 146px; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); border: 2px solid rgba(111,60,195,.38); }
.afterimage-cloud i:nth-child(1) { left: 5%; top: 22%; }.afterimage-cloud i:nth-child(2) { left: 16%; bottom: 11%; }.afterimage-cloud i:nth-child(3) { left: 52%; top: 16%; }.afterimage-cloud i:nth-child(4) { right: 12%; top: 25%; }.afterimage-cloud i:nth-child(5) { right: 5%; bottom: 20%; }.afterimage-cloud i:nth-child(6) { left: 38%; bottom: 8%; }.afterimage-cloud i:nth-child(7) { left: 72%; top: 54%; }.afterimage-cloud i:nth-child(8) { left: 28%; top: 42%; }.afterimage-cloud i:nth-child(9) { right: 32%; bottom: 24%; }

@keyframes rotateHex { to { transform: rotate(360deg); } }
@keyframes traceBorder { 0%, 12% { stroke-dashoffset: 820; } 46%, 74% { stroke-dashoffset: 0; } 82% { filter: drop-shadow(20px -8px 0 rgba(88,240,229,.72)) drop-shadow(-20px 10px 0 rgba(255,75,92,.55)); } 100% { stroke-dashoffset: -820; } }
@keyframes tileArrive { to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes bubbleRise { from { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; } 10% { opacity: .8; } 85% { opacity: .62; } to { transform: translate3d(var(--drift), -125vh, 0) scale(1.25); opacity: 0; } }
@keyframes dashMove { to { stroke-dashoffset: -240; } }

@media (max-width: 820px) {
  .exhibit-nav a { display: none; }
  .title-tiles { transform: translateX(0) rotate(-4deg); }
  .aperture-hex { left: 5vw; width: 72vw; opacity: .72; }
  .honeycomb, .honeycomb-transit { grid-template-columns: repeat(2, minmax(120px, 1fr)); transform: none; margin: 6vh auto 0; }
  .wide, .tall { grid-column: span 1; grid-row: span 1; }
  .glyph-tiles { position: relative; right: auto; bottom: auto; grid-template-columns: repeat(4, 54px); margin-top: 42px; }
  .glyph-tiles span { height: 54px; font-size: 28px; }
  .scene-kicker { left: 7vw; right: 7vw; bottom: 8vh; }
}