:root {
  --burgundy: #4A1024;
  --cherry: #230812;
  --paper: #E7D0A5;
  --ochre: #B88A54;
  --cyan: #7DE7E0;
  --mint: #C8FFF1;
  --pearl: #F6F1DE;
  --ui: 'Nunito Sans', system-ui, sans-serif;
  --body: 'Noto Sans', system-ui, sans-serif;
  --poem: 'Cormorant Garamond', Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--pearl);
  font-family: var(--body);
  background:
    radial-gradient(circle at 50% 8%, rgba(200, 255, 241, .2), transparent 18rem),
    radial-gradient(circle at 20% 36%, rgba(125, 231, 224, .16), transparent 22rem),
    linear-gradient(90deg, var(--paper) 0, #d7b97e 9%, var(--burgundy) 18%, var(--cherry) 50%, var(--burgundy) 82%, #d7b97e 91%, var(--paper) 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(74, 16, 36, .08) 43px 44px),
    radial-gradient(circle at 14% 18%, rgba(184, 138, 84, .42) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 63%, rgba(184, 138, 84, .36) 0 3px, transparent 4px),
    radial-gradient(circle at 8% 82%, rgba(35, 8, 18, .22), transparent 12rem);
  mix-blend-mode: multiply;
  opacity: .62;
  z-index: -3;
}

.paper-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(246, 241, 222, .32), transparent 20% 80%, rgba(246, 241, 222, .28)),
    repeating-radial-gradient(circle at 24% 48%, rgba(184, 138, 84, .14) 0 1px, transparent 1px 9px);
  animation: stainDrift 18s ease-in-out infinite alternate;
  z-index: -2;
}

.orbital-arc {
  position: fixed;
  width: 86vmin;
  height: 86vmin;
  border: 1px solid rgba(200, 255, 241, .2);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 40px rgba(125, 231, 224, .08), 0 0 30px rgba(125, 231, 224, .08);
  z-index: -1;
}

.arc-one { left: -36vmin; top: 8vh; }
.arc-two { right: -42vmin; bottom: 4vh; width: 110vmin; height: 110vmin; }

.aero-droplets span {
  position: fixed;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, var(--pearl), rgba(200, 255, 241, .38) 20%, rgba(125, 231, 224, .12) 58%, rgba(74, 16, 36, .08));
  border: 1px solid rgba(200, 255, 241, .48);
  box-shadow: inset 8px 8px 18px rgba(246, 241, 222, .42), 0 10px 30px rgba(35, 8, 18, .18);
  pointer-events: none;
  animation: driftBubble 11s ease-in-out infinite alternate;
}

.aero-droplets span:nth-child(1) { left: 9vw; top: 18vh; transform: scale(.8); }
.aero-droplets span:nth-child(2) { right: 12vw; top: 32vh; animation-delay: -2s; }
.aero-droplets span:nth-child(3) { left: 14vw; bottom: 16vh; transform: scale(.55); animation-delay: -5s; }
.aero-droplets span:nth-child(4) { right: 8vw; bottom: 24vh; transform: scale(.7); animation-delay: -7s; }
.aero-droplets span:nth-child(5) { left: 50vw; top: 7vh; transform: scale(.42); animation-delay: -3s; }

.pilgrimage {
  width: min(900px, 100%);
  margin: 0 auto;
  padding: 0 24px;
}

.station {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  padding: 90px 0;
}

.station-label {
  position: absolute;
  top: 11vh;
  left: 50%;
  transform: translateX(-50%);
  padding: 9px 18px;
  border-radius: 999px;
  font: 700 12px/1 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mint);
  background: linear-gradient(180deg, rgba(200, 255, 241, .2), rgba(74, 16, 36, .42));
  border: 1px solid rgba(200, 255, 241, .36);
  box-shadow: inset 0 1px rgba(246, 241, 222, .42), 0 16px 36px rgba(35, 8, 18, .28);
  backdrop-filter: blur(12px);
  white-space: nowrap;
}

.viewing-well {
  width: min(74vmin, 670px);
  height: min(74vmin, 670px);
  min-width: 310px;
  min-height: 310px;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 36% 28%, rgba(246, 241, 222, .32), transparent 11%),
    radial-gradient(circle at 50% 50%, rgba(74, 16, 36, .8), var(--cherry) 68%);
  border: 1px solid rgba(200, 255, 241, .44);
  box-shadow:
    inset 0 0 45px rgba(125, 231, 224, .16),
    inset 0 -40px 100px rgba(35, 8, 18, .64),
    0 0 0 16px rgba(231, 208, 165, .2),
    0 36px 90px rgba(35, 8, 18, .52);
  transition: transform 900ms ease, filter 900ms ease;
}

.station.in-view .viewing-well { transform: scale(1.015); filter: saturate(1.08); }

.viewing-well::before,
.viewing-well::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(125, 231, 224, .28);
  pointer-events: none;
}

.viewing-well::after {
  inset: 18%;
  border-color: rgba(246, 241, 222, .18);
  box-shadow: 0 0 24px rgba(200, 255, 241, .18);
}

.cover-well {
  background: radial-gradient(circle, var(--paper) 0 55%, var(--ochre) 56% 60%, var(--burgundy) 61% 72%, var(--cherry) 100%);
}

.parchment-disc {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background:
    linear-gradient(120deg, transparent 49%, rgba(35, 8, 18, .13) 50%, transparent 51%),
    repeating-radial-gradient(circle, rgba(184, 138, 84, .16) 0 2px, transparent 3px 12px),
    radial-gradient(circle at 40% 30%, var(--pearl), var(--paper) 62%, #d0a967);
  box-shadow: inset 0 0 45px rgba(184, 138, 84, .45);
}

.wax-ring {
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  border: clamp(22px, 5vmin, 48px) solid rgba(74, 16, 36, .92);
  box-shadow: inset 0 0 22px rgba(35, 8, 18, .7), 0 0 28px rgba(35, 8, 18, .36);
}

.reveal-water {
  position: absolute;
  inset: 23%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, rgba(246, 241, 222, .7), rgba(200, 255, 241, .4) 18%, rgba(125, 231, 224, .22) 48%, rgba(74, 16, 36, .35));
  border: 1px solid rgba(200, 255, 241, .55);
  transform: scale(.2);
  opacity: .1;
  animation: waterReveal 2.8s cubic-bezier(.2, .8, .2, 1) .35s forwards;
}

h1 {
  z-index: 2;
  margin: 0;
  font: 800 clamp(2.1rem, 6vw, 5.5rem)/.9 var(--ui);
  letter-spacing: -.05em;
  color: var(--pearl);
  text-shadow: 0 4px 0 rgba(35, 8, 18, .32), 0 0 26px rgba(125, 231, 224, .58);
  opacity: 0;
  animation: titleRise 1.6s ease 1.4s forwards;
}

.inscription {
  z-index: 2;
  position: absolute;
  bottom: 25%;
  width: 58%;
  margin: 0;
  text-align: center;
  color: var(--cherry);
  font: italic 600 clamp(1rem, 2.1vw, 1.35rem)/1.25 var(--poem);
}

.chapter-whisper {
  position: absolute;
  bottom: 12vh;
  color: rgba(246, 241, 222, .78);
  font: italic 500 1.4rem/1 var(--poem);
}

.ripple-field i,
.viewing-well .touch-ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32%;
  height: 32%;
  border-radius: 50%;
  border: 1px solid rgba(200, 255, 241, .64);
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  animation: ripple 4.6s ease-out infinite;
}

.ripple-field i:nth-child(2) { animation-delay: 1.2s; }
.ripple-field i:nth-child(3) { animation-delay: 2.4s; }
.viewing-well .touch-ripple { animation: touchRipple 900ms ease-out forwards; }

.glass-halo, .aqua-lens, .weather-ring, .annotation-ring, .complete-ring {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 18px solid rgba(125, 231, 224, .18);
  box-shadow: inset 0 0 35px rgba(200, 255, 241, .2), 0 0 44px rgba(125, 231, 224, .18);
  backdrop-filter: blur(8px);
}

.ring-slice {
  position: absolute;
  width: 116%;
  height: 46%;
  border-radius: 50%;
  border: 30px solid transparent;
  border-top-color: var(--paper);
  border-bottom-color: rgba(125, 231, 224, .5);
  transform: rotate(-12deg);
  box-shadow: 0 0 40px rgba(200, 255, 241, .25);
}

.map-lines {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 15deg, transparent 0 16deg, rgba(184, 138, 84, .2) 17deg 18deg, transparent 19deg 36deg);
  opacity: .45;
}

.floating-caption, .glass-tab, .atlas-note, .koan, .closing-mark {
  position: absolute;
  z-index: 3;
  font: 700 .72rem/1 var(--ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mint);
  padding: 10px 13px;
  border: 1px solid rgba(200, 255, 241, .35);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(200, 255, 241, .2), rgba(125, 231, 224, .08));
  box-shadow: inset 0 1px rgba(246, 241, 222, .38), 0 12px 30px rgba(35, 8, 18, .25);
  backdrop-filter: blur(10px);
}

.floating-caption.left { left: 7%; top: 31%; }
.floating-caption.right { right: 6%; bottom: 30%; }

.well-text {
  z-index: 4;
  width: min(72%, 450px);
  margin: 0;
  color: rgba(246, 241, 222, .9);
  text-align: center;
  font: 500 clamp(.98rem, 1.9vw, 1.25rem)/1.7 var(--body);
  text-shadow: 0 2px 12px var(--cherry);
}

.well-text em {
  display: block;
  margin-bottom: 8px;
  color: var(--pearl);
  font: italic 600 clamp(1.6rem, 4vw, 3rem)/1 var(--poem);
}

.ocean-well { background: radial-gradient(circle at 42% 32%, rgba(200, 255, 241, .42), rgba(125, 231, 224, .18) 30%, var(--burgundy) 60%, var(--cherry)); }
.aqua-lens { inset: 18%; border-width: 28px; animation: slowSpin 20s linear infinite; }
.orbital-water { position: absolute; inset: 31% -20%; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(125, 231, 224, .64), rgba(200, 255, 241, .34), transparent); transform: rotate(8deg); filter: blur(.3px); }
.droplet-moon { position: absolute; right: 25%; top: 22%; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 28% 24%, var(--pearl), rgba(200, 255, 241, .44) 28%, rgba(125, 231, 224, .16)); border: 1px solid rgba(200, 255, 241, .6); box-shadow: inset 12px 12px 18px rgba(246, 241, 222, .32); }
.glass-tab { bottom: 20%; right: 15%; }

.crystal-well { background: radial-gradient(circle, rgba(74, 16, 36, .78), var(--cherry) 72%); }
.weather-ring { inset: 16%; border-style: dashed; animation: slowSpin 28s linear infinite reverse; }
.prism { position: absolute; width: 82px; height: 150px; clip-path: polygon(50% 0, 100% 38%, 72% 100%, 18% 86%, 0 35%); background: linear-gradient(135deg, rgba(246, 241, 222, .68), rgba(200, 255, 241, .72), rgba(125, 231, 224, .18), rgba(184, 138, 84, .18)); border: 1px solid rgba(200, 255, 241, .42); filter: drop-shadow(0 0 24px rgba(125, 231, 224, .28)); animation: crystalTurn 10s ease-in-out infinite alternate; }
.prism-a { left: 18%; top: 24%; }
.prism-b { right: 20%; top: 20%; transform: scale(.75) rotate(28deg); animation-delay: -3s; }
.prism-c { left: 45%; bottom: 13%; transform: scale(.62) rotate(-18deg); animation-delay: -6s; }
.koan { bottom: 22%; left: 50%; transform: translateX(-50%); color: var(--cherry); background: rgba(231, 208, 165, .74); border-color: rgba(246, 241, 222, .56); white-space: nowrap; }

.archive-well { background: radial-gradient(circle, rgba(231, 208, 165, .94), #d7b97e 56%, rgba(74, 16, 36, .9) 57%, var(--cherry)); }
.archive-well .well-text { color: var(--cherry); text-shadow: none; }
.archive-well .well-text em { color: var(--burgundy); }
.annotation-ring { inset: 10%; border-color: rgba(74, 16, 36, .18); box-shadow: inset 0 0 35px rgba(184, 138, 84, .2); }
.fold-corner { position: absolute; right: 17%; top: 16%; width: 110px; height: 110px; background: linear-gradient(135deg, rgba(246, 241, 222, .1) 0 49%, rgba(184, 138, 84, .52) 50%, rgba(246, 241, 222, .78)); clip-path: polygon(100% 0, 0 0, 100% 100%); }
.atlas-note { color: var(--burgundy); background: rgba(246, 241, 222, .48); border-color: rgba(74, 16, 36, .22); }
.note-one { left: 10%; top: 28%; transform: rotate(-8deg); }
.note-two { right: 9%; top: 46%; transform: rotate(6deg); }
.note-three { left: 24%; bottom: 18%; transform: rotate(3deg); }

.observatory-well { background: radial-gradient(circle at center, rgba(74, 16, 36, .85), var(--cherry) 74%); }
.complete-ring { inset: 18%; border: 8px solid var(--cyan); box-shadow: 0 0 34px rgba(125, 231, 224, .78), inset 0 0 34px rgba(200, 255, 241, .34); }
.eye-observatory { position: absolute; width: 48%; height: 18%; border-radius: 50%; background: radial-gradient(circle, var(--mint) 0 10%, rgba(125, 231, 224, .28) 11% 32%, transparent 33%), linear-gradient(90deg, transparent, rgba(246, 241, 222, .2), transparent); border: 1px solid rgba(200, 255, 241, .36); box-shadow: 0 0 40px rgba(125, 231, 224, .25); }
.quiet-stars span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--cyan); }
.quiet-stars span:nth-child(1) { left: 28%; top: 24%; }
.quiet-stars span:nth-child(2) { right: 26%; top: 32%; }
.quiet-stars span:nth-child(3) { left: 35%; bottom: 25%; }
.quiet-stars span:nth-child(4) { right: 34%; bottom: 18%; }
.closing-mark { bottom: 16%; left: 50%; transform: translateX(-50%); }

.bead-nav {
  position: fixed;
  right: clamp(14px, 4vw, 54px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 16px;
  z-index: 20;
}

.bead {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: block;
  position: relative;
  background: radial-gradient(circle at 32% 25%, var(--pearl), rgba(200, 255, 241, .35), rgba(74, 16, 36, .42));
  border: 1px solid rgba(200, 255, 241, .44);
  box-shadow: inset 3px 3px 7px rgba(246, 241, 222, .42), 0 5px 18px rgba(35, 8, 18, .34);
  transition: transform .35s ease, box-shadow .35s ease;
}

.bead.active { transform: scale(1.45); box-shadow: inset 3px 3px 7px rgba(246, 241, 222, .55), 0 0 22px rgba(125, 231, 224, .95); background: radial-gradient(circle at 32% 25%, var(--pearl), var(--mint) 22%, var(--cyan) 70%); }
.bead span { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; color: var(--mint); font: 700 11px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; transition: opacity .3s ease; }
.bead:hover span { opacity: 1; }

@keyframes waterReveal { to { opacity: 1; transform: scale(1); } }
@keyframes titleRise { to { opacity: 1; transform: translateY(0); } from { transform: translateY(12px); } }
@keyframes ripple { 0% { opacity: .65; transform: translate(-50%, -50%) scale(.2); } 75%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.3); } }
@keyframes touchRipple { to { opacity: 0; transform: translate(-50%, -50%) scale(4); } from { opacity: .75; transform: translate(-50%, -50%) scale(.1); } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes crystalTurn { to { filter: hue-rotate(18deg) drop-shadow(0 0 28px rgba(200, 255, 241, .45)); transform: rotate(8deg) translateY(-8px); } }
@keyframes stainDrift { to { transform: translate3d(0, -18px, 0); opacity: .78; } }
@keyframes driftBubble { to { transform: translate3d(12px, -24px, 0) scale(.9); } }

@media (max-width: 760px) {
  .pilgrimage { padding: 0 16px; }
  .viewing-well { width: 88vmin; height: 88vmin; }
  .bead-nav { right: 10px; gap: 12px; }
  .station-label { top: 8vh; font-size: 10px; }
  .floating-caption, .atlas-note, .glass-tab { display: none; }
  .well-text { width: 76%; font-size: .92rem; }
  .inscription { bottom: 20%; width: 70%; }
}