:root {
  --design-font-token-one: "Sans**";
  --design-font-token-two: "Grotesk**";
  --deep: #06281F;
  --bottle: #0B5A43;
  --fern: #6EE7A8;
  --ivory: #F1E9DC;
  --stone: #A9B0A2;
  --bronze: #3A2A18;
  --aqua: #C8FFF0;
  --split: 50;
  --bend: 0px;
  --room-progress: 0;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--deep);
  color: var(--ivory);
  font-family: "IBM Plex Sans", Inter, system-ui, sans-serif;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(circle at 18% 16%, rgba(110, 231, 168, .14), transparent 28%), var(--deep);
}

button {
  font: inherit;
}

.museum {
  position: relative;
  min-height: 400vh;
}

.fixed-world {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--deep);
}

.half {
  position: absolute;
  inset: 0;
}

.half-original {
  clip-path: polygon(0 0, calc(var(--split) * 1%) 0, calc(var(--split) * 1% + var(--bend)) 100%, 0 100%);
  background:
    radial-gradient(circle at 10% 70%, rgba(58, 42, 24, .72), transparent 29%),
    radial-gradient(circle at 26% 16%, rgba(169, 176, 162, .12), transparent 20%),
    linear-gradient(110deg, #06281F 0%, #0B5A43 53%, #06281F 100%);
}

.half-copy {
  clip-path: polygon(calc(var(--split) * 1%) 0, 100% 0, 100% 100%, calc(var(--split) * 1% + var(--bend)) 100%);
  background:
    linear-gradient(135deg, rgba(200,255,240,.28), rgba(11,90,67,.08)),
    radial-gradient(circle at 82% 28%, rgba(200, 255, 240, .2), transparent 28%),
    linear-gradient(90deg, rgba(6, 40, 31, .88), rgba(11, 90, 67, .62));
}

.forest-fog {
  position: absolute;
  inset: -20%;
  background:
    repeating-linear-gradient(98deg, transparent 0 58px, rgba(169,176,162,.045) 60px 62px),
    radial-gradient(ellipse at 42% 105%, rgba(110,231,168,.18), transparent 36%);
  filter: blur(.4px);
  animation: fogDrift 18s ease-in-out infinite alternate;
}

.membrane {
  position: absolute;
  top: -7vh;
  bottom: -7vh;
  left: calc(var(--split) * 1%);
  width: 54px;
  transform: translateX(-50%) skewX(calc(var(--bend) * .035deg));
  border-left: 1px solid rgba(200, 255, 240, .62);
  border-right: 1px solid rgba(110, 231, 168, .34);
  background: linear-gradient(135deg, rgba(200,255,240,.28), rgba(11,90,67,.08));
  box-shadow: 0 0 44px rgba(110, 231, 168, .35), inset 0 0 28px rgba(241,233,220,.16);
  backdrop-filter: blur(18px) saturate(135%);
  border-radius: 999px;
  pointer-events: auto;
  cursor: ew-resize;
  transition: width .35s ease, box-shadow .35s ease;
}

.membrane::before,
.membrane::after {
  content: "";
  position: absolute;
  inset: 8% 18px;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent, rgba(200,255,240,.38), transparent);
  animation: scanner 4.8s linear infinite;
}

.membrane::after {
  inset: 0 26px;
  animation-duration: 7s;
  opacity: .45;
}

.membrane.dragging {
  width: 72px;
  box-shadow: 0 0 78px rgba(110, 231, 168, .58), inset 0 0 34px rgba(241,233,220,.24);
}

.membrane-label {
  position: absolute;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  width: max-content;
  font: 600 12px/1 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--aqua);
  text-shadow: 0 0 16px rgba(200,255,240,.8);
}

.membrane-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(200,255,240,.55);
  border-radius: 50%;
  background: rgba(6,40,31,.42);
  color: var(--ivory);
  font: 600 11px/1 "Space Grotesk", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.specimen-dots {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 18px;
  pointer-events: auto;
  z-index: 50;
}

.dot {
  position: relative;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid rgba(200,255,240,.55);
  border-radius: 50%;
  background: rgba(11,90,67,.5);
  cursor: pointer;
}

.dot.active {
  background: var(--fern);
  box-shadow: 0 0 18px var(--fern);
}

.dot span {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--aqua);
  font: 600 11px/1 "Space Grotesk", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .25s ease;
}

.dot:hover span,
.dot.active span {
  opacity: 1;
}

.room {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  scroll-snap-align: start;
  opacity: .2;
  transition: opacity .6s ease;
}

.room.active {
  opacity: 1;
}

.wordmark {
  position: fixed;
  z-index: 8;
  left: 5vw;
  top: 5vh;
  width: 90vw;
  font-family: "Bungee", "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(3.4rem, 12vw, 11rem);
  line-height: .85;
  letter-spacing: .035em;
  color: rgba(241,233,220,.94);
  text-shadow: 0 14px 0 rgba(58,42,24,.26), 0 0 42px rgba(200,255,240,.16);
  pointer-events: none;
  transform: translateX(calc((var(--split) - 50) * -.16vw));
}

.wordmark::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  clip-path: polygon(calc(var(--split) * 1% - 4%) 0, calc(var(--split) * 1% + 4%) 0, calc(var(--split) * 1% + 6%) 100%, calc(var(--split) * 1% - 6%) 100%);
  color: var(--aqua);
  filter: blur(1px);
  transform: translateX(calc(var(--bend) * .08));
}

.chapter-title {
  position: fixed;
  z-index: 4;
  left: 6vw;
  bottom: 8vh;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: clamp(4rem, 15vw, 14rem);
  letter-spacing: .05em;
  color: rgba(169,176,162,.1);
  -webkit-text-stroke: 1px rgba(241,233,220,.18);
  pointer-events: none;
}

.scene {
  position: fixed;
  z-index: 10;
  top: 27vh;
  width: min(38vw, 560px);
  height: 56vh;
  pointer-events: none;
  transition: transform .9s cubic-bezier(.18,.8,.18,1), opacity .7s ease;
}

.left-scene {
  left: 7vw;
  transform: translateX(calc((50 - var(--split)) * -.22vw));
}

.right-scene {
  right: 7vw;
  transform: translateX(calc((var(--split) - 50) * -.22vw));
}

.room:not(.active) .scene,
.room:not(.active) .caption-rail,
.room:not(.active) .chapter-title {
  opacity: 0;
  transform: translateY(34px) scale(.96);
}

.artifact {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}

.marble-fragment {
  width: 260px;
  height: 315px;
  border-radius: 44% 52% 32% 38% / 18% 22% 18% 20%;
  background:
    linear-gradient(128deg, rgba(169,176,162,.22) 0 1px, transparent 1px 35px),
    radial-gradient(circle at 30% 22%, #F1E9DC, #A9B0A2 62%, #7f877d 100%);
  box-shadow: -34px 46px 76px rgba(58,42,24,.52), inset -24px -22px 30px rgba(58,42,24,.18), inset 18px 16px 24px rgba(255,255,255,.2);
  clip-path: polygon(18% 0, 84% 4%, 95% 36%, 86% 92%, 46% 100%, 14% 82%, 4% 28%);
}

.marble-top,
.marble-chip,
.marble-vein,
.engraving {
  position: absolute;
}

.marble-top {
  left: 42px;
  top: 38px;
  width: 95px;
  height: 62px;
  border-radius: 50%;
  background: rgba(241,233,220,.52);
}

.marble-chip {
  background: var(--deep);
  opacity: .5;
}

.chip-a {
  right: 28px;
  top: 64px;
  width: 32px;
  height: 24px;
  border-radius: 70% 20% 60% 30%;
}

.chip-b {
  left: 38px;
  bottom: 58px;
  width: 42px;
  height: 18px;
  border-radius: 10px;
  transform: rotate(-16deg);
}

.marble-vein {
  height: 2px;
  background: rgba(58,42,24,.32);
  transform-origin: left center;
}

.vein-a {
  left: 35px;
  top: 132px;
  width: 170px;
  transform: rotate(17deg);
}

.vein-b {
  left: 78px;
  top: 204px;
  width: 120px;
  transform: rotate(-27deg);
}

.engraving {
  left: 62px;
  bottom: 42px;
  color: rgba(58,42,24,.7);
  font: 600 11px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .08em;
}

.glass-duplicate {
  width: 276px;
  height: 326px;
  transform: translate(-50%, -50%) rotateY(-18deg) rotateZ(1deg);
  transform-style: preserve-3d;
}

.glass-layer {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(200,255,240,.58);
  border-radius: 44% 52% 32% 38% / 18% 22% 18% 20%;
  background: linear-gradient(135deg, rgba(200,255,240,.28), rgba(11,90,67,.08));
  box-shadow: 0 0 42px rgba(110,231,168,.35), inset 0 0 30px rgba(200,255,240,.22);
  clip-path: polygon(18% 0, 84% 4%, 95% 36%, 86% 92%, 46% 100%, 14% 82%, 4% 28%);
  backdrop-filter: blur(4px);
}

.layer-two { transform: translate(20px, 14px); opacity: .65; }
.layer-three { transform: translate(40px, 28px); opacity: .38; }

.glass-scratch {
  position: absolute;
  height: 2px;
  background: var(--aqua);
  box-shadow: 0 0 14px var(--aqua);
}

.scratch-a { width: 138px; left: 64px; top: 134px; transform: rotate(17deg); }
.scratch-b { width: 96px; left: 104px; top: 214px; transform: rotate(-27deg); }

.plinth {
  position: absolute;
  left: 50%;
  bottom: 7vh;
  transform: translateX(-50%);
  width: 330px;
  height: 96px;
  border-radius: 16px 16px 24px 24px;
  display: grid;
  place-items: center;
  font: 600 12px/1 "Space Grotesk", sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.mossy {
  color: var(--stone);
  background: linear-gradient(180deg, rgba(169,176,162,.32), rgba(58,42,24,.72));
  box-shadow: inset 0 14px 0 rgba(110,231,168,.16), 0 28px 54px rgba(0,0,0,.36);
}

.luminous {
  color: var(--aqua);
  background: linear-gradient(135deg, rgba(200,255,240,.24), rgba(11,90,67,.35));
  border: 1px solid rgba(200,255,240,.34);
  box-shadow: 0 0 42px rgba(110,231,168,.24), inset 0 14px 0 rgba(200,255,240,.12);
  backdrop-filter: blur(12px);
}

.caption-rail {
  position: fixed;
  z-index: 30;
  left: calc(var(--split) * 1% - 235px);
  bottom: 8vh;
  width: min(470px, 80vw);
  padding: 24px 26px;
  border: 1px solid rgba(200,255,240,.28);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(200,255,240,.20), rgba(11,90,67,.18));
  box-shadow: 0 24px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(241,233,220,.22);
  backdrop-filter: blur(18px) saturate(130%);
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease, left .2s ease;
}

.rail-right {
  left: calc(var(--split) * 1% - 80px);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--fern);
  font: 700 12px/1 "Space Grotesk", sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0 0 12px;
  color: var(--ivory);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(1.65rem, 3.2vw, 3.25rem);
  line-height: .96;
  letter-spacing: -.045em;
}

.caption-rail p:last-of-type {
  margin: 0 0 18px;
  color: rgba(241,233,220,.82);
  font-size: 16px;
  line-height: 1.62;
}

.prompt {
  border: 1px solid rgba(110,231,168,.55);
  border-radius: 999px;
  padding: 12px 18px;
  color: var(--deep);
  background: var(--fern);
  box-shadow: 0 0 28px rgba(110,231,168,.24);
  cursor: pointer;
  font: 700 12px/1 "Space Grotesk", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease;
}

.prompt:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 42px rgba(110,231,168,.42);
}

.scanner {
  position: absolute;
  left: 0;
  right: 0;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(200,255,240,.78), transparent);
  filter: blur(2px);
  animation: sweep 4s ease-in-out infinite;
}

.beam-one { top: 8vh; }

.stone-hand {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 300px;
  height: 280px;
  transform: translate(-50%, -50%);
}

.palm,
.finger {
  position: absolute;
  background: radial-gradient(circle at 30% 20%, #F1E9DC, #A9B0A2 70%);
  box-shadow: inset -14px -14px 20px rgba(58,42,24,.18);
}

.palm { left: 72px; bottom: 38px; width: 162px; height: 126px; border-radius: 54% 46% 38% 45%; transform: rotate(-9deg); }
.finger { width: 46px; height: 135px; border-radius: 999px; bottom: 120px; }
.f1 { left: 82px; transform: rotate(-22deg); }
.f2 { left: 132px; height: 154px; transform: rotate(-4deg); }
.f3 { left: 184px; transform: rotate(14deg); }
.capsule-shadow { position: absolute; left: 92px; top: 98px; width: 154px; height: 54px; border-radius: 999px; background: rgba(200,255,240,.24); border: 1px solid rgba(200,255,240,.45); box-shadow: 0 0 30px rgba(110,231,168,.3); }

.slide-stack {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 330px;
  height: 300px;
  transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-28deg);
  transform-style: preserve-3d;
}

.slide {
  position: absolute;
  inset: 32px 0 auto;
  height: 120px;
  border: 1px solid rgba(200,255,240,.52);
  border-radius: 24px;
  display: grid;
  place-items: center;
  color: var(--aqua);
  background: linear-gradient(135deg, rgba(200,255,240,.22), rgba(11,90,67,.15));
  box-shadow: 0 0 35px rgba(110,231,168,.25), inset 0 0 28px rgba(200,255,240,.12);
  backdrop-filter: blur(8px);
}

.slide code { font-family: "IBM Plex Sans", sans-serif; letter-spacing: .12em; }
.s1 { transform: translateZ(0); }
.s2 { transform: translate(24px, 42px) translateZ(34px); }
.s3 { transform: translate(48px, 84px) translateZ(68px); }
.beam-two { top: 94px; transform: rotate(28deg); }

.bust {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 280px;
  height: 330px;
  transform: translate(-50%, -50%);
}

.head,
.neck,
.shoulder,
.nose,
.visor {
  position: absolute;
}

.bust-original .head,
.bust-original .neck,
.bust-original .shoulder,
.bust-original .nose {
  background: radial-gradient(circle at 35% 22%, #F1E9DC, #A9B0A2 72%);
  box-shadow: inset -16px -16px 24px rgba(58,42,24,.18);
}

.head { left: 78px; top: 8px; width: 130px; height: 166px; border-radius: 48% 52% 46% 42%; }
.nose { left: 178px; top: 72px; width: 48px; height: 34px; border-radius: 8px 40px 40px 8px; }
.neck { left: 103px; top: 154px; width: 86px; height: 86px; border-radius: 0 0 26px 26px; }
.shoulder { left: 42px; top: 218px; width: 198px; height: 88px; border-radius: 56% 56% 18px 18px; }
.visor { left: 58px; top: 58px; width: 184px; height: 48px; border: 1px solid rgba(200,255,240,.62); border-radius: 999px; background: linear-gradient(135deg, rgba(200,255,240,.25), rgba(11,90,67,.18)); box-shadow: 0 0 26px rgba(110,231,168,.28); }

.bust-wire .head,
.bust-wire .neck,
.bust-wire .shoulder,
.bust-wire .nose {
  border: 2px solid rgba(200,255,240,.7);
  background: repeating-linear-gradient(90deg, rgba(200,255,240,.08) 0 6px, transparent 6px 15px);
  box-shadow: 0 0 26px rgba(110,231,168,.28), inset 0 0 18px rgba(200,255,240,.1);
}

.checkmark {
  position: absolute;
  right: 12px;
  top: 20px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--deep);
  background: var(--fern);
  font: 700 34px/1 "Space Grotesk", sans-serif;
  box-shadow: 0 0 30px rgba(110,231,168,.65);
}

.laurel-ring {
  position: absolute;
  left: 50%;
  top: 37%;
  width: 270px;
  height: 270px;
  transform: translate(-50%, -50%);
  border: 24px solid rgba(110,231,168,.3);
  border-left-color: rgba(241,233,220,.7);
  border-right-color: rgba(241,233,220,.7);
  border-radius: 50%;
  animation: slowSpin 16s linear infinite;
}

.laurel-ring span {
  position: absolute;
  color: var(--ivory);
  font: 700 13px/1 "Space Grotesk", sans-serif;
}
.laurel-ring span:nth-child(1) { left: 14px; top: 42px; }
.laurel-ring span:nth-child(2) { right: 16px; top: 64px; }
.laurel-ring span:nth-child(3) { left: 44px; bottom: 22px; }
.laurel-ring span:nth-child(4) { right: 38px; bottom: 28px; }

.checksum-tablet {
  position: absolute;
  left: 50%;
  top: 41%;
  transform: translate(-50%, -50%) rotate(-5deg);
  width: 178px;
  height: 116px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 20px;
  color: var(--bronze);
  background: radial-gradient(circle at 20% 15%, #F1E9DC, #A9B0A2 82%);
  font: 700 18px/1.2 "Space Grotesk", sans-serif;
  letter-spacing: .08em;
  box-shadow: 0 30px 50px rgba(0,0,0,.28);
}

.capsules {
  position: absolute;
  inset: 5vh 0 auto;
  height: 330px;
}

.capsule {
  position: absolute;
  width: 96px;
  height: 178px;
  border: 1px solid rgba(200,255,240,.62);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--aqua);
  background: linear-gradient(135deg, rgba(200,255,240,.24), rgba(11,90,67,.16));
  box-shadow: 0 0 40px rgba(110,231,168,.28), inset 0 0 26px rgba(200,255,240,.18);
  backdrop-filter: blur(10px);
  font: 700 13px/1 "Space Grotesk", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  animation: floatCapsule 5.5s ease-in-out infinite;
}
.c1 { left: 12%; top: 50px; }
.c2 { left: 42%; top: 0; animation-delay: -1.8s; }
.c3 { right: 10%; top: 82px; animation-delay: -3.2s; }

.glass-sarcophagus {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 88px;
  border: 1px solid rgba(200,255,240,.55);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--aqua);
  background: linear-gradient(135deg, rgba(200,255,240,.22), rgba(11,90,67,.22));
  box-shadow: 0 0 50px rgba(110,231,168,.28), inset 0 0 24px rgba(241,233,220,.12);
}

.glass-sarcophagus code { font-family: "IBM Plex Sans", sans-serif; }

@keyframes fogDrift {
  from { transform: translate3d(-2%, -1%, 0) rotate(-1deg); }
  to { transform: translate3d(2%, 1%, 0) rotate(1deg); }
}

@keyframes scanner {
  from { transform: translateY(-28%); opacity: .15; }
  45% { opacity: .85; }
  to { transform: translateY(28%); opacity: .15; }
}

@keyframes sweep {
  0%, 100% { transform: translateY(0); opacity: .25; }
  50% { transform: translateY(280px); opacity: .85; }
}

@keyframes slowSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes floatCapsule {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(34px) rotate(5deg); }
}

@media (max-width: 820px) {
  .scene {
    top: 25vh;
    width: 50vw;
    scale: .72;
  }

  .left-scene { left: -5vw; }
  .right-scene { right: -5vw; }

  .caption-rail,
  .rail-right {
    left: 5vw;
    bottom: 4vh;
    width: 82vw;
  }

  .specimen-dots { right: 14px; }
}