:root {
  --moon-parchment: #F2E8D4;
  --dusty-ultramarine: #4C5F8F;
  --night-violet: #29233A;
  --dried-apricot: #D7A36B;
  --faded-mauve: #A9858F;
  --verdigris-smoke: #6F9A92;
  --neon-opal: #B7FFF4;
  --ink-soft: rgba(41, 35, 58, 0.78);
  --paper-shadow: rgba(76, 95, 143, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink-soft);
  background:
    radial-gradient(circle at 18% 12%, rgba(183, 255, 244, 0.24), transparent 24rem),
    radial-gradient(circle at 80% 30%, rgba(169, 133, 143, 0.18), transparent 26rem),
    linear-gradient(180deg, #F2E8D4 0%, #efe1c9 52%, #F2E8D4 100%);
  font-family: "Nunito Sans", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.42;
  background-image:
    linear-gradient(90deg, rgba(41, 35, 58, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(76, 95, 143, 0.025) 1px, transparent 1px),
    radial-gradient(circle, rgba(41, 35, 58, 0.06) 1px, transparent 1.3px);
  background-size: 72px 72px, 72px 72px, 19px 19px;
  mix-blend-mode: multiply;
}

.holo-spine {
  position: fixed;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100vh;
  transform: translateX(-50%);
  z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(183, 255, 244, 0.25), var(--neon-opal), rgba(183, 255, 244, 0.25), transparent);
  box-shadow: 0 0 12px rgba(183, 255, 244, 0.48);
  opacity: 0.62;
  transition: opacity 700ms ease, box-shadow 700ms ease, width 700ms ease;
}

.holo-spine.is-bright {
  width: 3px;
  opacity: 0.98;
  box-shadow: 0 0 26px rgba(183, 255, 244, 0.86), 0 0 70px rgba(183, 255, 244, 0.28);
}

.spine-point {
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--neon-opal);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 18px var(--neon-opal);
  animation: breathe 5.5s ease-in-out infinite;
}

.point-one { top: 22%; }
.point-two { top: 52%; animation-delay: 1.2s; }
.point-three { top: 81%; animation-delay: 2.4s; }

.site-mark {
  position: fixed;
  top: 26px;
  left: 28px;
  z-index: 8;
  color: var(--night-violet);
}

.wordmark {
  font-family: "Handlee", "Comic Sans MS", cursive;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  color: var(--faded-mauve);
  text-shadow: 0 0 18px rgba(183, 255, 244, 0.48);
}

.mark-note {
  margin-top: -2px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(76, 95, 143, 0.72);
}

.narrative {
  position: relative;
  z-index: 4;
}

.chamber {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 8rem 1.5rem 6rem;
  overflow: hidden;
}

.chamber::before {
  content: attr(data-chamber);
  position: absolute;
  top: 12%;
  right: 9%;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(5rem, 14vw, 13rem);
  line-height: 1;
  color: rgba(76, 95, 143, 0.055);
  pointer-events: none;
}

.chamber::after {
  content: "";
  position: absolute;
  inset: 10% auto auto 8%;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(111, 154, 146, 0.22);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(183, 255, 244, 0.12), transparent 58%);
}

.chamber-two { background: linear-gradient(180deg, rgba(111, 154, 146, 0.10), rgba(242, 232, 212, 0.08)); }
.chamber-three { background: radial-gradient(circle at 28% 50%, rgba(215, 163, 107, 0.16), transparent 28rem); }
.chamber-four { background: radial-gradient(circle at 50% 50%, rgba(183, 255, 244, 0.20), transparent 22rem); }
.chamber-five {
  color: rgba(242, 232, 212, 0.88);
  background:
    radial-gradient(circle at 50% 38%, rgba(183, 255, 244, 0.24), transparent 24rem),
    linear-gradient(180deg, #F2E8D4 0%, #29233A 24%, #29233A 100%);
}

.chamber-shell {
  width: min(760px, 100%);
  display: grid;
  justify-items: center;
  text-align: center;
  transform: translateY(26px) scale(0.985);
  opacity: 0.58;
  transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 900ms ease;
}

.chamber.is-active .chamber-shell {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.drift-left { margin-left: max(-8vw, -90px); }
.drift-right { margin-left: min(8vw, 90px); }
.narrow { width: min(680px, 100%); }

.kicker {
  margin: 0 0 1rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dusty-ultramarine);
}

.chamber-five .kicker { color: var(--neon-opal); }

h1,
h2 {
  margin: 1.15rem 0 0.65rem;
  font-family: "Handlee", "Comic Sans MS", cursive;
  font-size: clamp(3rem, 8vw, 6.8rem);
  line-height: 0.92;
  font-weight: 400;
  color: var(--faded-mauve);
  text-shadow: 0 0 18px rgba(183, 255, 244, 0.28);
}

.chamber-five h2 {
  color: var(--moon-parchment);
  text-shadow: 0 0 22px rgba(183, 255, 244, 0.52);
}

.copy {
  width: min(520px, 92vw);
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.7;
  font-weight: 300;
}

.incantation {
  margin: 1.4rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-style: italic;
  color: var(--dusty-ultramarine);
}

.chamber-five .incantation { color: var(--neon-opal); }

.crystal-stage {
  position: relative;
  width: min(430px, 82vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 38% 62% 48% 52% / 56% 41% 59% 44%;
  background: radial-gradient(circle, rgba(242, 232, 212, 0.72), rgba(111, 154, 146, 0.12) 62%, transparent 63%);
  filter: drop-shadow(0 28px 34px var(--paper-shadow));
}

.crystal-stage::before,
.crystal-stage::after {
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(183, 255, 244, 0.58);
  border-radius: 50%;
  animation: stagePulse 6s ease-out infinite;
  box-shadow: 0 0 22px rgba(183, 255, 244, 0.32);
}

.crystal-stage::after {
  inset: 7%;
  animation-delay: 2s;
  opacity: 0.55;
}

.crystal-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.facet,
.plate {
  stroke: rgba(41, 35, 58, 0.34);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.facet-cream { fill: rgba(242, 232, 212, 0.84); }
.facet-verdigris { fill: #6F9A92; }
.facet-blue { fill: #4C5F8F; }
.facet-mauve { fill: #A9858F; }
.facet-apricot { fill: #D7A36B; }
.translucent { opacity: 0.68; }

.final-opal {
  fill: rgba(183, 255, 244, 0.12);
  stroke: #B7FFF4;
  stroke-width: 2;
  filter: drop-shadow(0 0 16px rgba(183, 255, 244, 0.55));
}

.final-facet { opacity: 0.72; }
.final-facet.alt { opacity: 0.48; }

.calibration,
.measure,
.contour,
.moon-path,
.constellation,
.bloom-ring {
  fill: none;
  stroke: rgba(76, 95, 143, 0.42);
  stroke-width: 1.3;
  stroke-dasharray: 5 9;
  vector-effect: non-scaling-stroke;
}

.calibration.thin { stroke: rgba(169, 133, 143, 0.42); stroke-dasharray: 2 8; }
.calibration.muted { stroke: rgba(111, 154, 146, 0.34); }
.calibration.final { stroke: rgba(183, 255, 244, 0.62); }
.measure { stroke: rgba(215, 163, 107, 0.58); stroke-dasharray: 9 12; }
.contour { stroke: rgba(169, 133, 143, 0.48); }
.contour.second { stroke: rgba(111, 154, 146, 0.5); }
.moon-path { stroke: rgba(242, 232, 212, 0.82); stroke-width: 3; stroke-dasharray: none; }
.bloom-ring { stroke: rgba(183, 255, 244, 0.58); stroke-dasharray: none; transform-origin: 180px 180px; animation: svgBloom 5.5s ease-in-out infinite; }
.ring-two { animation-delay: 0.8s; opacity: 0.7; }
.ring-three { animation-delay: 1.6s; opacity: 0.46; }

.plate-back { fill: rgba(111, 154, 146, 0.36); }
.plate-mid { fill: rgba(215, 163, 107, 0.34); }
.plate-front { fill: rgba(169, 133, 143, 0.28); }

.vertex {
  fill: #B7FFF4;
  stroke: rgba(41, 35, 58, 0.35);
  stroke-width: 1;
  filter: drop-shadow(0 0 10px rgba(183, 255, 244, 0.9));
  transform-origin: center;
}

.pulse {
  animation: vertexPulse 3.8s ease-in-out infinite;
}

.delay-a { animation-delay: 0.8s; }
.delay-b { animation-delay: 1.55s; }
.delay-c { animation-delay: 2.25s; }

.annotation {
  position: absolute;
  font-family: "Handlee", "Comic Sans MS", cursive;
  color: var(--faded-mauve);
  font-size: clamp(1rem, 2vw, 1.35rem);
  text-shadow: 0 0 12px rgba(183, 255, 244, 0.55);
  opacity: 0;
  transform: translateY(10px) rotate(-3deg);
  transition: opacity 900ms ease 180ms, transform 900ms ease 180ms;
}

.chamber.is-active .annotation {
  opacity: 1;
  transform: translateY(0) rotate(-3deg);
}

.note-a { left: -5%; top: 19%; }
.note-b { right: -12%; top: 26%; transform: rotate(4deg); }
.note-c { left: -8%; bottom: 22%; }
.note-d { right: -17%; bottom: 29%; }
.note-e { left: 50%; bottom: 1%; transform: translateX(-50%) rotate(-2deg); color: var(--neon-opal); white-space: nowrap; }

.paper-corner {
  position: absolute;
  right: 12%;
  bottom: 15%;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, transparent 50%, rgba(215, 163, 107, 0.42) 51%);
  transform: rotate(12deg);
}

.glyph {
  position: absolute;
  font-family: "Cormorant Garamond", Georgia, serif;
  color: rgba(76, 95, 143, 0.55);
  font-size: 2.4rem;
}

.glyph-one { left: 14%; bottom: 21%; }
.glyph-two { right: 16%; top: 15%; }

.warm-oval {
  position: absolute;
  right: 20%;
  top: 18%;
  width: 36px;
  height: 54px;
  border-radius: 50%;
  background: rgba(215, 163, 107, 0.42);
  transform: rotate(25deg);
}

.chamber-index {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  display: grid;
  gap: 0.85rem;
}

.index-dot {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(76, 95, 143, 0.34);
  border-radius: 50%;
  color: rgba(76, 95, 143, 0.72);
  background: rgba(242, 232, 212, 0.66);
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: background 350ms ease, color 350ms ease, box-shadow 350ms ease, transform 350ms ease;
}

.index-dot.is-active {
  color: var(--night-violet);
  background: var(--neon-opal);
  box-shadow: 0 0 18px rgba(183, 255, 244, 0.76);
  transform: scale(1.12);
}

@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(0.72); opacity: 0.42; }
  50% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
}

@keyframes stagePulse {
  0% { transform: scale(0.7); opacity: 0; }
  18% { opacity: 0.75; }
  100% { transform: scale(1.35); opacity: 0; }
}

@keyframes vertexPulse {
  0%, 100% { opacity: 0.66; filter: drop-shadow(0 0 7px rgba(183, 255, 244, 0.55)); }
  50% { opacity: 1; filter: drop-shadow(0 0 18px rgba(183, 255, 244, 1)); }
}

@keyframes svgBloom {
  0%, 100% { transform: scale(0.94); opacity: 0.26; }
  50% { transform: scale(1.04); opacity: 0.78; }
}

@media (max-width: 760px) {
  .site-mark {
    position: absolute;
    top: 18px;
    left: 18px;
  }

  .chamber {
    padding-inline: 1rem;
  }

  .drift-left,
  .drift-right {
    margin-left: 0;
  }

  .chamber-index {
    right: 12px;
    gap: 0.5rem;
  }

  .index-dot {
    width: 28px;
    height: 28px;
    font-size: 0.58rem;
  }

  .annotation {
    max-width: 190px;
  }

  .note-b,
  .note-d {
    right: -1%;
  }
}