:root {
  --abyss: #07040F;
  --violet: #5E2BFF;
  --mint: #62FFD1;
  --rose: #F4A7B9;
  --plum: #2A123D;
  --bone: #F6EBD2;
  --saffron: #FFCA3A;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--bone);
  background:
    radial-gradient(circle at 50% 34%, rgba(94, 43, 255, .22), transparent 28rem),
    radial-gradient(circle at 82% 18%, rgba(244, 167, 185, .12), transparent 18rem),
    radial-gradient(circle at 12% 80%, rgba(98, 255, 209, .12), transparent 24rem),
    linear-gradient(180deg, var(--abyss), #10061f 44%, var(--abyss));
  font-family: "Alegreya Sans", sans-serif;
  overflow-x: hidden;
}

a { color: inherit; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: .28;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(246, 235, 210, .16) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(98, 255, 209, .12) 0 1px, transparent 1px),
    radial-gradient(circle at 42% 82%, rgba(244, 167, 185, .14) 0 1px, transparent 1px);
  background-size: 17px 19px, 23px 29px, 31px 37px;
}

.triptych {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  perspective: 1200px;
}

.plane {
  position: absolute;
  top: -8vh;
  bottom: -8vh;
  width: 31vw;
  border: 1px solid rgba(246, 235, 210, .12);
  background:
    linear-gradient(90deg, rgba(246, 235, 210, .03), transparent 35%, rgba(98, 255, 209, .05)),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(246, 235, 210, .035) 35px 36px),
    rgba(42, 18, 61, .42);
  box-shadow: inset 0 0 70px rgba(94, 43, 255, .18), 0 0 80px rgba(7, 4, 15, .7);
  transform-origin: center;
  transition: transform .7s ease, opacity .7s ease;
}

.plane-left { left: 2vw; transform: rotate(-2.5deg) translateY(var(--plane-a, 0)); mix-blend-mode: lighten; }
.plane-center { left: 34.5vw; transform: rotate(1.3deg) translateY(var(--plane-b, 0)); opacity: .55; mix-blend-mode: color-dodge; }
.plane-right { right: 2vw; transform: rotate(2.1deg) translateY(var(--plane-c, 0)); mix-blend-mode: screen; }

.central-slit {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 50%;
  width: var(--slit-width, 4px);
  height: 100vh;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--violet) 18%, var(--mint) 50%, var(--violet) 82%, transparent);
  filter: drop-shadow(0 0 18px var(--violet)) drop-shadow(0 0 36px rgba(98, 255, 209, .42));
  opacity: var(--slit-opacity, .46);
}

.central-slit span {
  position: absolute;
  inset: 12vh -18px;
  border-left: 1px solid rgba(255, 202, 58, .34);
  border-right: 1px solid rgba(244, 167, 185, .32);
}

.rite { position: relative; z-index: 3; }

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(246, 235, 210, .07);
}

.chapter-mark,
.scene-title span,
.overline,
.lane-labels,
.tile,
.door-glyph,
.enter-way {
  font-family: "Syne", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: "Cormorant Unicase", serif;
  font-weight: 700;
  line-height: .86;
  text-shadow: 0 0 28px rgba(94, 43, 255, .45);
}

h1 { font-size: clamp(4rem, 13vw, 13.5rem); }
h2 { font-size: clamp(3.3rem, 9vw, 10rem); max-width: 10ch; }
p { font-size: clamp(1.05rem, 1.45vw, 1.55rem); line-height: 1.45; }

.chamber-open { min-height: 116vh; }

.opening-riddle {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(76vw, 980px);
  transform: translate(-50%, -50%);
  text-align: center;
}

.overline { color: var(--mint); font-size: .82rem; }
.riddle { max-width: 630px; margin: 1.6rem auto 0; color: var(--bone); font-size: clamp(1.35rem, 2.2vw, 2.35rem); }
.chapter-mark { position: absolute; top: 2rem; left: 3rem; color: var(--rose); font-size: .8rem; }
.chapter-mark b { color: var(--saffron); }

.door {
  position: absolute;
  top: 13vh;
  width: clamp(150px, 19vw, 290px);
  height: 72vh;
  border: 2px solid rgba(244, 167, 185, .5);
  border-radius: 48% 48% 8px 8px / 9% 9% 8px 8px;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 202, 58, .12), transparent 20%),
    repeating-linear-gradient(90deg, rgba(246, 235, 210, .04) 0 8px, transparent 8px 20px),
    linear-gradient(180deg, rgba(42, 18, 61, .94), rgba(7, 4, 15, .88));
  box-shadow: inset 0 0 55px rgba(94, 43, 255, .32), 0 0 45px rgba(244, 167, 185, .12);
  transition: opacity .45s ease, filter .45s ease, transform .45s ease;
}

.door-left { left: 2vw; transform: rotate(-2deg); }
.door-right { right: 2vw; transform: rotate(2deg); }
.door.dimmed { opacity: .28; filter: grayscale(.7); transform: scale(.96) rotate(0deg); }
.door:hover { box-shadow: inset 0 0 55px rgba(94, 43, 255, .45), 0 0 62px rgba(98, 255, 209, .22); }
.door-glyph { position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); color: var(--rose); font-size: .72rem; }
.door-eye { position: absolute; inset: 22% 36% auto; height: 36px; border: 1px solid var(--mint); border-radius: 50%; box-shadow: 0 0 20px var(--mint); }
.door-eye::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--saffron); }
.door-lines { position: absolute; inset: 38% 18% 12%; display: grid; gap: 16px; }
.door-lines i { border: 1px solid rgba(246, 235, 210, .18); border-radius: 50%; }

.tri-moons { position: absolute; bottom: 4rem; left: 50%; display: flex; gap: 1rem; transform: translateX(-50%); }
.tri-moons i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--bone); box-shadow: inset -8px 0 0 rgba(94, 43, 255, .5); }
.tri-moons i:nth-child(3) { border-color: var(--saffron); animation: thirdFlash 6s steps(3) infinite; }

.scene-title { position: absolute; left: 8vw; top: 10vh; z-index: 2; }
.scene-title span { display: block; margin-bottom: 1rem; color: var(--mint); font-size: .8rem; }
.title-bottom { top: auto; bottom: 9vh; left: 9vw; }
.title-side { left: auto; right: 6vw; top: 15vh; text-align: right; }
.lore { position: absolute; max-width: 330px; color: rgba(246, 235, 210, .84); }
.lore-left { left: 7vw; bottom: 13vh; }
.lore-right { right: 8vw; top: 21vh; }

.map-orbit { position: absolute; inset: 13vh 14vw; transform: rotate(-6deg); }
.map-layer { position: absolute; inset: 0; border: 1px solid rgba(246, 235, 210, .12); clip-path: polygon(50% 0, 96% 25%, 82% 82%, 28% 96%, 3% 39%); }
.layer-one { background: rgba(94, 43, 255, .16); transform: translate(-5%, 4%) rotate(4deg); }
.layer-two { background: rgba(244, 167, 185, .12); transform: translate(5%, -4%) rotate(-6deg); mix-blend-mode: screen; }
.layer-three { background: rgba(98, 255, 209, .13); transform: translate(0, 2%) rotate(9deg); mix-blend-mode: color-dodge; animation: reverseThird 12s linear infinite; }
.constellation i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 28px var(--saffron); }
.constellation i:nth-child(1) { left: 26%; top: 25%; }
.constellation i:nth-child(2) { left: 73%; top: 38%; }
.constellation i:nth-child(3) { left: 50%; top: 72%; background: var(--mint); box-shadow: 0 0 28px var(--mint); }

.bell-cord { position: absolute; top: 0; left: 50%; width: 2px; height: 45vh; background: linear-gradient(var(--bone), transparent); }
.bells { position: absolute; top: 30vh; left: 50%; display: flex; gap: 4vw; transform: translateX(-50%); }
.bell { width: 96px; height: 86px; border: 2px solid rgba(246, 235, 210, .45); border-radius: 50% 50% 10% 10%; background: linear-gradient(180deg, rgba(244, 167, 185, .24), rgba(42, 18, 61, .86)); transform-origin: 50% -120px; animation: bellSwing 3.6s ease-in-out infinite; }
.bell:nth-child(2) { animation-delay: .2s; }
.bell-third { border-color: var(--saffron); animation: thirdBell 3.6s ease-in-out infinite; }
.bell span { position: absolute; bottom: -11px; left: 50%; width: 20px; height: 20px; transform: translateX(-50%); border-radius: 50%; background: var(--mint); }
.ripple-field i { position: absolute; left: 50%; top: 43vh; width: 14vmin; height: 14vmin; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--mint); opacity: 0; animation: rippleThird 4.8s ease-out infinite; }
.ripple-field i:nth-child(2) { animation-delay: .35s; }
.ripple-field i:nth-child(3) { animation-delay: .7s; border-color: var(--saffron); }
.whisper { position: absolute; right: 9vw; bottom: 16vh; color: var(--rose); }

.oracle-grid { position: absolute; inset: 24vh 10vw 12vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 2vw, 2rem); transform: rotate(-3deg); }
.tile { min-height: 16vh; border: 1px solid rgba(246, 235, 210, .22); color: var(--bone); background: rgba(42, 18, 61, .76); font-family: "Changa", sans-serif; font-size: clamp(1rem, 2.6vw, 2.5rem); box-shadow: inset 0 0 36px rgba(94, 43, 255, .18); cursor: pointer; transition: transform .45s ease, color .45s ease, border-color .45s ease, background .45s ease; }
.tile:hover { transform: rotate(120deg) scale(.92); }
.tile.true-hint { color: var(--mint); border-color: rgba(98, 255, 209, .5); }
.tile.revealed { color: var(--saffron); border-color: var(--saffron); background: rgba(94, 43, 255, .36); transform: rotate(120deg); }
.moth { position: absolute; right: 10vw; top: 9vh; width: 110px; height: 80px; }
.moth i { position: absolute; width: 46px; height: 54px; border-radius: 80% 12%; border: 1px solid var(--rose); background: rgba(244, 167, 185, .08); }
.moth i:nth-child(1) { left: 0; transform: rotate(-28deg); }
.moth i:nth-child(2) { right: 0; transform: rotate(28deg) scaleX(-1); }
.moth i:nth-child(3) { left: 32px; top: 22px; width: 42px; height: 42px; border-radius: 50%; border-color: var(--mint); }
.moth span { position: absolute; left: 50%; top: 8px; width: 8px; height: 70px; background: var(--bone); transform: translateX(-50%); }

.braid-svg { position: absolute; inset: 8vh 0; width: 100%; height: 84vh; }
.braid { fill: none; stroke-width: 18; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: calc(1200 - (var(--braid-progress, .18) * 1200)); transition: stroke-dashoffset .25s linear; }
.braid-one { stroke: rgba(244, 167, 185, .72); }
.braid-two { stroke: rgba(94, 43, 255, .8); }
.braid-three { stroke: rgba(98, 255, 209, .78); filter: drop-shadow(0 0 12px rgba(98,255,209,.52)); }
.lane-labels { position: absolute; left: 6vw; right: 6vw; bottom: 8vh; display: flex; justify-content: space-between; color: var(--rose); font-size: .78rem; }

.hingeless-door { position: absolute; inset: 10vh 20vw; border: 1px solid rgba(246, 235, 210, .14); background: rgba(42, 18, 61, .34); }
.subtraction { position: absolute; top: 0; bottom: 0; width: calc(50% - var(--hinge-open, 1.2vw)); background: linear-gradient(180deg, rgba(7,4,15,.94), rgba(42,18,61,.92)); transition: width .4s ease; }
.left-cut { left: 0; }
.right-cut { right: 0; }
.slit-light { position: absolute; left: 50%; top: 0; bottom: 0; width: calc(var(--hinge-open, 1.2vw) * 2); transform: translateX(-50%); background: linear-gradient(90deg, var(--violet), var(--mint), var(--saffron), var(--mint), var(--violet)); filter: blur(1px) drop-shadow(0 0 32px var(--mint)); }
.incantation { position: absolute; left: 12vw; bottom: 10vh; max-width: 460px; color: var(--bone); }

.chamber-final { min-height: 110vh; display: grid; place-items: center; text-align: center; }
.horizons { position: absolute; inset: 0; }
.horizons i { position: absolute; left: 0; right: 0; height: 34vh; border-top: 1px solid rgba(246,235,210,.12); background: linear-gradient(180deg, transparent, rgba(94,43,255,.12)); }
.horizons i:nth-child(1) { top: 7vh; }
.horizons i:nth-child(2) { top: 35vh; background: linear-gradient(180deg, transparent, rgba(244,167,185,.1)); }
.horizons i:nth-child(3) { top: 63vh; background: linear-gradient(180deg, transparent, rgba(98,255,209,.1)); border-color: rgba(255,202,58,.26); }
.final-emblem { position: relative; width: 190px; height: 190px; margin: 0 auto 2rem; border-radius: 50%; border: 1px solid rgba(246,235,210,.22); display: grid; place-items: center; box-shadow: 0 0 60px rgba(94,43,255,.28); }
.final-emblem p { font-family: "Changa", sans-serif; color: var(--saffron); font-size: 2.4rem; margin: 0; }
.triskelion span { position: absolute; left: 50%; top: 50%; width: 80px; height: 24px; border: 1px solid var(--mint); border-radius: 50%; transform-origin: 0 50%; }
.triskelion span:nth-child(1) { transform: rotate(0deg); }
.triskelion span:nth-child(2) { transform: rotate(120deg); }
.triskelion span:nth-child(3) { transform: rotate(240deg); border-color: var(--saffron); }
.final-copy { position: relative; max-width: 780px; padding: 0 2rem; }
.final-copy span { font-family: "Syne", sans-serif; color: var(--mint); text-transform: uppercase; letter-spacing: .16em; }
.final-copy h2 { max-width: none; margin: 1rem auto; }
.enter-way { display: inline-block; margin-top: 1.6rem; padding: 1rem 1.3rem; color: var(--saffron); text-decoration: none; border: 1px solid rgba(255,202,58,.42); background: rgba(7,4,15,.48); box-shadow: inset 0 0 24px rgba(255,202,58,.08); }

@keyframes thirdFlash {
  0%, 66% { box-shadow: inset -8px 0 0 rgba(94, 43, 255, .5), 0 0 0 transparent; }
  67%, 100% { box-shadow: inset -8px 0 0 rgba(94, 43, 255, .5), 0 0 26px var(--saffron); }
}

@keyframes reverseThird { to { transform: translate(0, 2%) rotate(-351deg); } }
@keyframes bellSwing { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes thirdBell { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-8deg); } }
@keyframes rippleThird { 0%, 42% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 55% { opacity: .72; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(5.4); } }

@media (max-width: 760px) {
  .door { width: 28vw; height: 58vh; top: 18vh; }
  .opening-riddle { width: 86vw; }
  .scene-title, .title-bottom, .title-side { left: 6vw; right: auto; top: 8vh; text-align: left; }
  .oracle-grid { grid-template-columns: 1fr; inset: 26vh 8vw 6vh; }
  .tile { min-height: 8vh; }
  .lore, .whisper, .incantation { left: 7vw; right: 7vw; bottom: 7vh; top: auto; max-width: none; }
  .hingeless-door { inset: 17vh 8vw; }
}