:root {
  --cave-night: #080B20;
  --dome-gold: #D8B14A;
  --pomegranate: #8C1F3D;
  --lapis: #243B8F;
  --jade: #1F7A5A;
  --ice: #EAF8FF;
  --alph: #00A9A5;
  --title: 'Cinzel Decorative', serif;
  --poem: 'Cormorant Garamond', serif;
  --label: 'Marcellus', serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ice);
  background:
    radial-gradient(circle at 78% 8%, rgba(36, 59, 143, .42), transparent 30vw),
    radial-gradient(circle at 15% 72%, rgba(31, 122, 90, .24), transparent 38vw),
    linear-gradient(180deg, #080B20 0%, #101440 38%, #080B20 72%, #13264d 100%);
  font-family: var(--poem);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    linear-gradient(115deg, transparent 0 46%, rgba(216, 177, 74, .12) 47%, transparent 48% 100%),
    radial-gradient(circle, rgba(234, 248, 255, .12) 1px, transparent 1.5px);
  background-size: 180px 180px, 42px 42px;
  mix-blend-mode: screen;
  z-index: 5;
}

.summons {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 52%, rgba(0, 169, 165, .09), transparent 24rem), #030512;
  transition: opacity 1.25s ease, visibility 1.25s ease, transform 1.25s ease;
}

.summons.opened { opacity: 0; visibility: hidden; transform: scale(1.08); }

.summons-river {
  position: absolute;
  width: 120vw;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--alph), var(--ice), var(--alph), transparent);
  filter: drop-shadow(0 0 18px var(--alph));
  transform: rotate(-17deg);
  animation: riverPulse 3.8s ease-in-out infinite;
}

.summons-mark {
  position: absolute;
  top: 19vh;
  font: 900 clamp(2.4rem, 7vw, 7.8rem)/1 var(--title);
  letter-spacing: .07em;
  color: transparent;
  background: linear-gradient(135deg, var(--ice), var(--jade), var(--dome-gold));
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 35px rgba(0, 169, 165, .25);
}

.decree-seal {
  width: 172px;
  height: 172px;
  border: 0;
  border-radius: 50%;
  position: relative;
  color: var(--cave-night);
  cursor: pointer;
  background: radial-gradient(circle at 34% 30%, #fff2a4, var(--dome-gold) 35%, #8f5d18 76%, #080B20 100%);
  box-shadow: 0 0 0 12px rgba(216,177,74,.09), 0 0 70px rgba(216,177,74,.38), inset 0 0 28px rgba(8,11,32,.65);
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .18em;
  transition: transform .7s cubic-bezier(.2,1.4,.2,1), filter .7s ease;
}

.decree-seal:hover { transform: scale(1.08) rotate(5deg); filter: brightness(1.12); }
.summons.cracked .decree-seal { transform: scale(1.35) rotate(-18deg); filter: brightness(1.5); }
.seal-text { position: relative; z-index: 2; font-size: .78rem; }
.seal-crack { position: absolute; background: var(--cave-night); opacity: 0; transform-origin: center; }
.seal-crack.one { width: 3px; height: 86px; left: 48%; top: 16%; transform: rotate(16deg); }
.seal-crack.two { width: 3px; height: 52px; left: 54%; top: 42%; transform: rotate(-52deg); }
.seal-crack.three { width: 2px; height: 48px; left: 39%; top: 38%; transform: rotate(64deg); }
.summons.cracked .seal-crack { opacity: .82; }

.gate-shadow { position: absolute; top: 0; bottom: 0; width: 50vw; background: linear-gradient(90deg, #02030a, #080B20); transition: transform 1.6s cubic-bezier(.7,0,.1,1); }
.gate-shadow.left { left: 0; clip-path: polygon(0 0, 94% 0, 78% 50%, 94% 100%, 0 100%); }
.gate-shadow.right { right: 0; clip-path: polygon(6% 0, 100% 0, 100% 100%, 6% 100%, 22% 50%); }
.summons.cracked .gate-shadow.left { transform: translateX(-70%); }
.summons.cracked .gate-shadow.right { transform: translateX(70%); }

.river-path {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 11px rgba(0,169,165,.85));
}

#alphPath { fill: none; stroke: url(#none); stroke: var(--alph); stroke-width: 1.05; stroke-linecap: round; stroke-dasharray: 9 7; opacity: .72; animation: riverDash 11s linear infinite; }

.procession { position: relative; z-index: 2; }

.chamber {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: center;
  padding: 9vh 8vw;
  isolation: isolate;
  overflow: hidden;
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 4vh 4vw;
  border: 1px solid rgba(216, 177, 74, .22);
  border-radius: 42% 58% 48% 52% / 12% 16% 12% 16%;
  pointer-events: none;
  opacity: .65;
}

.decree { background: radial-gradient(circle at 70% 35%, rgba(31,122,90,.22), transparent 30rem); }
.cedar { background: radial-gradient(circle at 22% 30%, rgba(31,122,90,.38), transparent 27rem); }
.descent { background: radial-gradient(circle at 52% 52%, rgba(0,169,165,.18), transparent 20rem), linear-gradient(180deg, transparent, rgba(8,11,32,.65)); }
.dome { background: radial-gradient(circle at 62% 20%, rgba(216,177,74,.32), transparent 24rem); }
.ice { background: radial-gradient(circle at 50% 20%, rgba(234,248,255,.22), transparent 25rem), linear-gradient(180deg, rgba(36,59,143,.26), transparent); }
.lyre { background: radial-gradient(circle at 80% 45%, rgba(140,31,61,.2), transparent 22rem); }
.paradise { background: radial-gradient(circle at 50% 55%, rgba(234,248,255,.36), transparent 24rem), radial-gradient(circle at 50% 74%, rgba(216,177,74,.24), transparent 28rem); }

article { max-width: 620px; }
.scroll-panel, .silk-screen, .round-window, .arch-panel, .crystal-plaque, .balcony-screen, .final-inscription {
  position: relative;
  padding: clamp(2rem, 5vw, 4rem);
  background: linear-gradient(135deg, rgba(8,11,32,.72), rgba(36,59,143,.25)), rgba(234,248,255,.055);
  border: 1px solid rgba(216,177,74,.34);
  box-shadow: 0 24px 70px rgba(0,0,0,.36), inset 0 0 34px rgba(0,169,165,.08);
  backdrop-filter: blur(9px);
}

.oblique { transform: rotate(-2.7deg); margin-left: 7vw; clip-path: polygon(3% 0, 100% 5%, 94% 100%, 0 93%); }
.tall { width: min(520px, 82vw); min-height: 62vh; clip-path: polygon(8% 0, 92% 0, 100% 14%, 94% 100%, 6% 100%, 0 14%); }
.left-tilt { transform: rotate(2deg); margin-left: 12vw; }
.right-tilt { transform: rotate(-2deg); margin-left: auto; margin-right: 9vw; }
.round-window { margin: auto; text-align: center; border-radius: 50%; width: min(640px, 88vw); min-height: min(640px, 88vw); display: grid; align-content: center; }
.arch-panel { margin-left: auto; margin-right: 10vw; border-radius: 46% 46% 4% 4% / 26% 26% 4% 4%; }
.crystal-plaque { margin-left: 12vw; clip-path: polygon(12% 0, 82% 0, 100% 28%, 88% 100%, 14% 92%, 0 28%); }
.balcony-screen { clip-path: polygon(0 6%, 96% 0, 100% 92%, 8% 100%); }
.final-inscription { margin: 0 auto; text-align: center; border-radius: 999px 999px 34px 34px; max-width: 760px; }

h1, h2 { font-family: var(--title); line-height: .95; margin: .25em 0; color: var(--ice); text-shadow: 0 0 25px rgba(0,169,165,.26); }
h1 { font-size: clamp(3.2rem, 9vw, 9rem); }
h2 { font-size: clamp(2.6rem, 6.5vw, 6.5rem); }
p { font-size: clamp(1.25rem, 2.1vw, 1.9rem); line-height: 1.45; margin: .7rem 0; }
.route-label, .prompt { font-family: var(--label); text-transform: uppercase; letter-spacing: .22em; font-size: .78rem; color: var(--dome-gold); }
.prompt { margin-top: 1.4rem; color: var(--alph); }

.artifact-map {
  position: fixed;
  right: 1.2rem;
  top: 1.2rem;
  z-index: 20;
  width: 190px;
  padding: 1rem;
  color: var(--ice);
  background: rgba(8,11,32,.68);
  border: 1px solid rgba(216,177,74,.38);
  box-shadow: 0 0 25px rgba(0,169,165,.12), inset 0 0 20px rgba(216,177,74,.07);
  clip-path: polygon(10% 0, 90% 0, 100% 16%, 94% 100%, 6% 100%, 0 16%);
  backdrop-filter: blur(8px);
  font-family: var(--label);
}
.map-title { color: var(--dome-gold); text-transform: uppercase; letter-spacing: .15em; font-size: .68rem; }
.map-river { height: 70px; margin: .7rem auto; width: 34px; border-left: 2px solid rgba(0,169,165,.35); border-radius: 50%; position: relative; }
.map-river span { position: absolute; left: -5px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--alph); box-shadow: 0 0 12px var(--alph); transition: top .45s ease; }
.map-room { font-size: .82rem; color: var(--ice); }

.moon-gate, .pleasure-dome, .subterranean-rings, .moon-pool { position: absolute; z-index: -1; }
.moon-gate { width: 42vw; height: 42vw; min-width: 330px; min-height: 330px; right: 5vw; border: 2px solid rgba(234,248,255,.2); border-radius: 50%; box-shadow: inset 0 0 70px rgba(0,169,165,.12), 0 0 90px rgba(36,59,143,.24); animation: iris 8s ease-in-out infinite; }
.pleasure-dome { width: 46vw; height: 24vw; left: 8vw; top: 18vh; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, rgba(216,177,74,.5), rgba(216,177,74,.05)); border-bottom: 5px solid rgba(216,177,74,.68); }
.pleasure-dome span { position: absolute; inset: 30% 12% auto; height: 60%; border: 1px solid rgba(216,177,74,.46); border-radius: 50% 50% 0 0; }
.subterranean-rings { inset: 15vh 10vw; border-radius: 50%; border: 1px solid rgba(0,169,165,.16); box-shadow: 0 0 0 70px rgba(0,169,165,.035), 0 0 0 140px rgba(36,59,143,.045), inset 0 0 90px rgba(0,169,165,.11); animation: breathe 7s ease-in-out infinite; }

.cypress { position: absolute; bottom: 5vh; width: 70px; height: 62vh; background: linear-gradient(180deg, transparent, rgba(31,122,90,.9)); clip-path: polygon(50% 0, 72% 22%, 58% 22%, 86% 50%, 64% 49%, 100% 86%, 58% 78%, 52% 100%, 46% 100%, 42% 78%, 0 86%, 36% 49%, 14% 50%, 42% 22%, 28% 22%); opacity: .65; }
.c1 { left: 6vw; }.c2 { right: 20vw; height: 50vh; }.c3 { right: 6vw; height: 70vh; }
.lotus-compass { position: absolute; right: 14vw; top: 18vh; width: 132px; height: 132px; border-radius: 50%; border: 1px solid var(--dome-gold); display: grid; place-items: center; text-align: center; color: var(--dome-gold); font-family: var(--label); animation: rotateSlow 22s linear infinite; }
.lotus-compass span { font-size: 3rem; color: var(--alph); }
.droplet-stair { position: absolute; left: 18vw; bottom: 12vh; width: 140px; height: 220px; border-radius: 70% 70% 80% 80%; border: 1px solid rgba(0,169,165,.55); }
.droplet-stair i { position: absolute; width: 44px; height: 4px; background: var(--dome-gold); left: 48px; box-shadow: 0 0 12px var(--dome-gold); }
.droplet-stair i:nth-child(1) { bottom: 44px; }.droplet-stair i:nth-child(2) { bottom: 78px; left: 34px; }.droplet-stair i:nth-child(3) { bottom: 112px; left: 56px; }.droplet-stair i:nth-child(4) { bottom: 146px; left: 42px; }
.stalactites { position: absolute; top: 0; left: 0; right: 0; height: 28vh; display: flex; justify-content: space-around; }
.stalactites span { width: 8vw; max-width: 90px; background: linear-gradient(180deg, var(--ice), rgba(234,248,255,.04)); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 0 18px rgba(234,248,255,.45)); transform-origin: top; animation: crystal 4s ease-in-out infinite alternate; }
.star-carp span { position: absolute; width: 52px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 30% 50%, var(--ice), var(--alph)); opacity: .65; animation: swim 9s ease-in-out infinite; }
.star-carp span:nth-child(1) { left: 12vw; bottom: 18vh; }.star-carp span:nth-child(2) { left: 46vw; bottom: 9vh; animation-delay: -3s; }.star-carp span:nth-child(3) { right: 14vw; bottom: 26vh; animation-delay: -5s; }
.lyre-strings { position: absolute; left: 12vw; top: 12vh; bottom: 10vh; width: 28vw; border-top: 3px solid var(--dome-gold); border-bottom: 3px solid var(--dome-gold); border-radius: 50%; }
.lyre-strings span { position: absolute; top: 5%; bottom: 5%; width: 1px; background: linear-gradient(var(--dome-gold), var(--alph)); animation: stringVibe 1.8s ease-in-out infinite; }
.lyre-strings span:nth-child(1) { left: 18%; }.lyre-strings span:nth-child(2) { left: 34%; animation-delay: -.2s; }.lyre-strings span:nth-child(3) { left: 50%; animation-delay: -.4s; }.lyre-strings span:nth-child(4) { left: 66%; animation-delay: -.6s; }.lyre-strings span:nth-child(5) { left: 82%; animation-delay: -.8s; }
.moon-pool { width: min(70vw, 720px); height: min(70vw, 720px); left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(234,248,255,.28), rgba(0,169,165,.14) 38%, rgba(216,177,74,.15) 52%, transparent 70%); box-shadow: 0 0 90px rgba(234,248,255,.25); }
.moon-pool span { position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed rgba(216,177,74,.5); display: grid; place-items: start center; padding-top: 1rem; font-family: var(--title); color: var(--dome-gold); letter-spacing: .2em; animation: rotateSlow 28s linear infinite reverse; }

.glyph-field { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.glyph { position: absolute; color: var(--alph); font-family: var(--title); opacity: .55; text-shadow: 0 0 12px var(--alph); animation: glyphDrift linear forwards; }

.reveal { opacity: 0; transform: translateY(55px) rotate(var(--tilt, 0deg)); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,1,.2,1), filter 1.1s ease; filter: blur(8px); }
.reveal.in-view { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); filter: blur(0); }

@keyframes riverPulse { 50% { opacity: .5; filter: drop-shadow(0 0 30px var(--alph)); } }
@keyframes riverDash { to { stroke-dashoffset: -160; } }
@keyframes iris { 50% { transform: scale(.92); box-shadow: inset 0 0 120px rgba(0,169,165,.18), 0 0 120px rgba(36,59,143,.32); } }
@keyframes breathe { 50% { transform: scale(1.05); opacity: .62; } }
@keyframes rotateSlow { to { transform: rotate(360deg); } }
@keyframes crystal { to { transform: scaleY(1.15); opacity: .72; } }
@keyframes swim { 50% { transform: translate(18vw, -4vh) rotate(12deg); } }
@keyframes stringVibe { 50% { transform: translateX(6px); filter: drop-shadow(0 0 10px var(--dome-gold)); } }
@keyframes glyphDrift { to { transform: translate3d(var(--gx), -120vh, 0) rotate(180deg); opacity: 0; } }

@media (max-width: 760px) {
  .artifact-map { width: 146px; right: .6rem; top: .6rem; }
  .chamber { padding: 16vh 5vw 8vh; }
  .oblique, .left-tilt, .right-tilt, .arch-panel, .crystal-plaque { margin-left: auto; margin-right: auto; transform: none; }
  .round-window { border-radius: 28px; min-height: auto; }
  .lyre-strings, .pleasure-dome { opacity: .32; }
}