:root {
  /* IBM Plex Sans** labels use wide tracking so the serif atmosphere has a clean contemporary frame. */
  --compliance-sans-token: "Sans**";
  --ink: #24104F;
  --cream: #FFF6E8;
  --magenta: #FF4FD8;
  --cyan: #00DFF7;
  --lemon: #FFE747;
  --mint: #68FF8E;
  --persimmon: #FF7A3D;
  --display: "Fraunces", Georgia, serif;
  --body: "Newsreader", Georgia, serif;
  --label: "IBM Plex Sans", Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--cream);
  background: var(--ink);
  font-family: var(--body);
  overflow-x: hidden;
}

button { font: inherit; }

.chambers {
  position: relative;
  width: 100%;
}

.chamber {
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(28px, 5vw, 76px);
}

.chamber::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 28% 26%, rgba(0, 223, 247, 0.14), transparent 22%),
              radial-gradient(circle at 74% 66%, rgba(255, 79, 216, 0.13), transparent 25%);
  filter: blur(18px);
  opacity: 0.78;
  z-index: -2;
}

.chamber--opening,
.chamber--violet,
.chamber--return { background: var(--ink); color: var(--cream); }
.chamber--cream { background: var(--cream); color: var(--ink); }
.chamber--cyan { background: var(--cyan); color: var(--ink); }

.chamber--cream::before {
  background: radial-gradient(circle at 18% 72%, rgba(255, 79, 216, 0.18), transparent 20%),
              radial-gradient(circle at 82% 22%, rgba(104, 255, 142, 0.24), transparent 24%);
}

.chamber--cyan::before {
  background: radial-gradient(circle at 20% 20%, rgba(255, 246, 232, 0.42), transparent 22%),
              radial-gradient(circle at 78% 72%, rgba(255, 122, 61, 0.18), transparent 25%);
}

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.24) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 50%, rgba(36,16,79,0.18) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 47%, rgba(255,255,255,0.08) 48% 49%, transparent 50%);
  background-size: 29px 31px, 41px 43px, 160px 100%;
}

.scene-frame {
  width: min(1180px, 100%);
  min-height: 72vh;
  display: grid;
  align-items: center;
  position: relative;
  z-index: 2;
}

.opening-frame,
.return-frame,
.center-frame {
  justify-items: center;
  text-align: center;
}

.split-frame {
  grid-template-columns: minmax(260px, 0.82fr) minmax(360px, 1.18fr);
  gap: clamp(34px, 7vw, 110px);
}

.split-frame.reverse { grid-template-columns: minmax(360px, 1.18fr) minmax(260px, 0.82fr); }
.split-frame.reverse .scene-copy { order: 2; }

.kicker,
.scene-caption,
.bead span,
.enter-chamber {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 11px;
  font-weight: 600;
}

.kicker { margin: 0 0 18px; color: currentColor; opacity: 0.72; }

h1,
h2 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.065em;
  margin: 0;
}

h1 {
  font-size: clamp(72px, 17vw, 248px);
  filter: drop-shadow(0 24px 56px rgba(0,0,0,0.24));
}

h2 { font-size: clamp(68px, 13vw, 180px); }

.subtitle,
.scene-copy p:not(.kicker),
.closing-line {
  font-size: clamp(19px, 2.1vw, 31px);
  line-height: 1.38;
  max-width: 560px;
  margin: 28px 0 0;
}

.subtitle { max-width: 620px; }
.scene-copy.narrow { margin-top: clamp(24px, 3vw, 46px); }
.center-frame .scene-copy.narrow p { margin-inline: auto; }

.enter-chamber {
  margin-top: 42px;
  border: 1px solid currentColor;
  color: var(--cream);
  background: rgba(255, 246, 232, 0.06);
  padding: 14px 18px 13px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 650ms cubic-bezier(.18,1.5,.36,1), background 400ms ease;
}

.enter-chamber:hover { transform: translateY(-4px) scale(1.03); background: rgba(255, 246, 232, 0.14); }
.enter-chamber span { color: var(--cyan); padding-left: 8px; }

.corner-glyph {
  position: absolute;
  top: clamp(22px, 4vw, 52px);
  left: clamp(22px, 4vw, 52px);
  font: 600 22px/1 var(--label);
  color: currentColor;
  opacity: 0.72;
  z-index: 4;
}

.corner-glyph--left { color: var(--cyan); }

.collage {
  position: relative;
  min-height: 430px;
  width: min(560px, 78vw);
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: transform 900ms cubic-bezier(.18,1.35,.28,1);
}

.opening-collage {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  pointer-events: none;
}

.shape,
.vow-line,
.elastic-line,
.mint-arch,
.registration,
.diagram-mark,
.sigil,
.paper-strip,
.face-void {
  position: absolute;
  display: block;
}

.circle { border-radius: 50%; }
.square { border-radius: 8%; }
.triangle {
  width: 0;
  height: 0;
  border-left: 92px solid transparent;
  border-right: 92px solid transparent;
  border-bottom: 158px solid var(--persimmon);
  filter: drop-shadow(0 22px 36px rgba(36, 16, 79, 0.22));
}

.cyan { background: var(--cyan); }
.magenta { background: var(--magenta); }
.lemon { background: var(--lemon); }
.mint { background: var(--mint); }
.persimmon { background: var(--persimmon); }
.cream { background: var(--cream); }
.translucent { opacity: 0.64; backdrop-filter: blur(2px); }
.faint { opacity: 0.28; }

.opening-collage .circle { width: clamp(92px, 15vw, 190px); height: clamp(92px, 15vw, 190px); left: 15%; top: 17%; box-shadow: 0 0 80px rgba(0, 223, 247, 0.35); }
.opening-collage .square { width: clamp(84px, 13vw, 164px); height: clamp(84px, 13vw, 164px); right: 18%; bottom: 20%; transform: rotate(9deg); box-shadow: 0 0 76px rgba(255, 79, 216, 0.32); }
.opening-collage .vow-line { width: clamp(160px, 24vw, 320px); height: 13px; left: 50%; top: 24%; transform: translateX(-50%) rotate(-5deg); border-radius: 99px; box-shadow: 0 0 52px rgba(255, 231, 71, 0.38); }

.drift-one { animation: driftOne 9s ease-in-out infinite alternate; }
.drift-two { animation: driftTwo 10s ease-in-out infinite alternate; }
.drift-three { animation: driftThree 8s ease-in-out infinite alternate; }

.registration { width: 24px; height: 24px; border: 1px solid var(--cream); opacity: 0.36; }
.registration::before, .registration::after { content: ""; position: absolute; background: currentColor; opacity: 0.7; }
.registration::before { width: 1px; height: 34px; left: 50%; top: -5px; }
.registration::after { height: 1px; width: 34px; left: -5px; top: 50%; }
.registration--a { color: var(--cyan); left: 29%; bottom: 21%; }
.registration--b { color: var(--magenta); right: 29%; top: 18%; }

.paper,
.shard {
  position: absolute;
  background: linear-gradient(135deg, rgba(255, 246, 232, 0.95), rgba(255, 231, 71, 0.26));
  border: 1px solid rgba(36, 16, 79, 0.18);
  box-shadow: 0 22px 54px rgba(36, 16, 79, 0.18);
}

.shard--one { width: 260px; height: 330px; left: 18%; top: 10%; clip-path: polygon(10% 0, 100% 12%, 84% 100%, 0 82%); }
.shard--two { width: 310px; height: 270px; right: 10%; top: 18%; clip-path: polygon(0 18%, 88% 0, 100% 78%, 20% 100%); }

.hand {
  position: absolute;
  width: 290px;
  height: 96px;
  background: var(--ink);
  opacity: 0.82;
  filter: blur(0.2px) drop-shadow(0 20px 34px rgba(36, 16, 79, 0.24));
  clip-path: polygon(0 54%, 40% 45%, 56% 22%, 66% 26%, 58% 50%, 100% 48%, 100% 73%, 53% 76%, 34% 92%, 0 88%);
}

.hand--offering { left: 6%; bottom: 22%; transform: rotate(-5deg); }
.hand--receiving { right: 2%; bottom: 22%; transform: scaleX(-1) rotate(4deg); }

.gesture-collage .large { width: 245px; height: 245px; right: 6%; top: 8%; opacity: 0.82; }
.gesture-collage .square { width: 180px; height: 180px; left: 44%; bottom: 13%; transform: rotate(15deg); }

.sigil { width: 82px; height: 58px; left: 2%; top: 7%; }
.sigil i, .sigil b, .sigil em { position: absolute; display: block; }
.sigil i { width: 28px; height: 28px; border-radius: 50%; background: var(--cyan); left: 0; top: 9px; }
.sigil b { width: 34px; height: 34px; background: var(--magenta); left: 25px; top: 0; transform: rotate(9deg); }
.sigil em { width: 54px; height: 7px; background: var(--lemon); left: 24px; bottom: 6px; border-radius: 9px; }

.boundary-collage { min-height: 310px; }
.elastic-line {
  width: min(620px, 80vw);
  height: 18px;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%) scaleX(0.92);
  box-shadow: 0 0 46px rgba(255, 231, 71, 0.45);
  animation: bendLine 4.8s cubic-bezier(.6,-0.35,.18,1.35) infinite;
}
.boundary-collage .triangle { right: 10%; top: 14%; transform: rotate(17deg) scale(0.76); }
.boundary-collage .circle { width: 220px; height: 220px; left: 6%; top: 4%; }

.diagram-mark { border: 1px solid currentColor; color: var(--cream); opacity: 0.34; }
.diagram-mark--one { width: 170px; height: 100px; left: 18%; bottom: 0; border-radius: 50%; border-top-color: transparent; }
.diagram-mark--two { width: 2px; height: 170px; right: 31%; bottom: 8%; background: currentColor; }

.mint-arch {
  width: 270px;
  height: 270px;
  border: 38px solid var(--mint);
  border-bottom: 0;
  border-radius: 180px 180px 0 0;
  filter: drop-shadow(0 22px 42px rgba(104, 255, 142, 0.34));
}
.offering-collage .mint-arch { left: 12%; bottom: 10%; }
.offering-collage .circle { width: 90px; height: 90px; left: 45%; top: 34%; box-shadow: 0 0 36px rgba(255, 246, 232, 0.5); }
.offering-collage .short { width: 170px; height: 11px; left: 30%; top: 23%; transform: rotate(11deg); border-radius: 99px; }

.mask-collage { min-height: 450px; }
.face-void {
  width: 230px;
  height: 310px;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  background: var(--ink);
  border-radius: 48% 48% 42% 42%;
  box-shadow: inset 0 0 0 12px rgba(255, 246, 232, 0.16), 0 24px 60px rgba(36, 16, 79, 0.22);
}
.veil { width: 230px; height: 230px; opacity: 0.58; }
.veil--one { left: 25%; top: 12%; transform: rotate(-14deg); }
.veil--two { right: 22%; bottom: 8%; transform: rotate(13deg); }
.mask-collage .triangle.small { left: 17%; bottom: 18%; transform: scale(0.42) rotate(-24deg); border-bottom-color: var(--lemon); }
.paper-strip { width: 350px; height: 46px; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg); background: rgba(255, 246, 232, 0.74); border: 1px solid rgba(36,16,79,0.15); }

.final-sigil {
  position: relative;
  width: min(520px, 80vw);
  height: 390px;
  margin-bottom: 22px;
}
.final-sigil .circle { width: 150px; height: 150px; left: 48px; top: 88px; }
.final-sigil .square { width: 132px; height: 132px; right: 80px; top: 70px; transform: rotate(8deg); }
.final-sigil .triangle { left: 170px; bottom: 70px; transform: scale(0.55) rotate(-3deg); }
.final-sigil .mint-arch { left: 50%; top: 42%; transform: translate(-50%, -50%) scale(0.72); }
.final-sigil .vow-line { width: 330px; height: 12px; left: 50%; bottom: 54px; transform: translateX(-50%); border-radius: 99px; }
.closing-line { font-size: clamp(25px, 3.2vw, 46px); max-width: 760px; }

.bead-nav {
  position: fixed;
  right: clamp(16px, 3vw, 42px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 18px;
  z-index: 20;
}
.bead-nav::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 1px;
  background: currentColor;
  opacity: 0.25;
}
.bead {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: var(--cream);
  color: var(--cream);
  cursor: pointer;
  position: relative;
  padding: 0;
  transform: scale(1);
  transition: transform 650ms cubic-bezier(.2,1.6,.32,1), background 350ms ease, border-color 350ms ease;
}
.bead span {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  color: currentColor;
  transition: opacity 260ms ease, transform 460ms cubic-bezier(.18,1.4,.34,1);
}
.bead:hover span,
.bead.is-active span { opacity: 1; transform: translate(-4px, -50%); }
.bead.is-active { transform: scale(1.95, 1.28); background: var(--cyan); border-color: var(--cyan); }
.bead.is-pulse { animation: beadPulse 620ms cubic-bezier(.18,1.55,.38,1); }

.scene-caption {
  position: fixed;
  left: clamp(18px, 3vw, 42px);
  bottom: clamp(18px, 3vw, 42px);
  z-index: 18;
  color: var(--cream);
  mix-blend-mode: difference;
}

.chamber .scene-copy,
.chamber .collage,
.chamber .final-sigil,
.chamber h1,
.chamber .subtitle,
.chamber .enter-chamber {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  transition: opacity 900ms ease, transform 1050ms cubic-bezier(.16,1.38,.34,1);
}
.chamber.is-active .scene-copy,
.chamber.is-active .collage,
.chamber.is-active .final-sigil,
.chamber.is-active h1,
.chamber.is-active .subtitle,
.chamber.is-active .enter-chamber {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.chamber.is-active h2 { animation: titleSettle 1000ms cubic-bezier(.18,1.58,.33,1) both; }

@keyframes driftOne { from { transform: translate(0,0) scale(1); } to { transform: translate(22px, -16px) scale(1.04); } }
@keyframes driftTwo { from { transform: translate(0,0) rotate(9deg); } to { transform: translate(-24px, 20px) rotate(15deg); } }
@keyframes driftThree { from { transform: translateX(-50%) rotate(-5deg) scaleX(1); } to { transform: translateX(-50%) translateY(18px) rotate(2deg) scaleX(0.88); } }
@keyframes bendLine { 0%,100% { border-radius: 999px; transform: translate(-50%, -50%) scaleX(0.92) skewY(0deg); } 45% { transform: translate(-50%, -50%) scaleX(1.08) skewY(-4deg); } 62% { transform: translate(-50%, -50%) scaleX(0.98) skewY(2deg); } }
@keyframes titleSettle { from { opacity: 0; transform: translateY(42px) scale(0.94); } 72% { transform: translateY(-8px) scale(1.025); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes beadPulse { 0% { transform: scale(1); } 42% { transform: scale(2.25, 0.82); } 100% { transform: scale(1.95, 1.28); } }

@media (max-width: 820px) {
  .split-frame,
  .split-frame.reverse { grid-template-columns: 1fr; gap: 24px; }
  .split-frame.reverse .scene-copy { order: 0; }
  .scene-frame { min-height: 78vh; }
  .collage { width: min(470px, 88vw); min-height: 360px; }
  .bead-nav { right: 14px; gap: 14px; }
  .bead span { display: none; }
  h1 { font-size: clamp(58px, 18vw, 120px); }
  h2 { font-size: clamp(56px, 17vw, 112px); }
}