:root {
    /* create manuscript feeling without becoming dark-academia tech-mono dominant. tiny coordinate-like labels */
    --deep-grotto: #120A1F;
    --moonmilk: #CADBFF;
    --pearl-mist: #F4EDE0;
    --malachite: #1C5A53;
    --amethyst: #8D6BE8;
    --salt: #FFFBF2;
    --moth-gold: #D6B45F;
    --ink-plum: #351A3D;
    --fraunces: 'Fraunces', serif;
    --alegreya: 'Alegreya Sans', sans-serif;
    --cormorant: 'Cormorant Garamond', serif;
    --mono: 'Space Mono', monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; background: var(--deep-grotto); color: var(--pearl-mist); }

body { font-family: var(--alegreya); }

button { font: inherit; color: inherit; }

.grotto {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 52% 52%, rgba(202, 219, 255, .16), transparent 18%),
        radial-gradient(circle at 22% 24%, rgba(141, 107, 232, .22), transparent 31%),
        radial-gradient(circle at 78% 71%, rgba(28, 90, 83, .35), transparent 34%),
        linear-gradient(135deg, #120A1F 0%, #1C5A53 58%, #351A3D 100%);
    isolation: isolate;
    cursor: crosshair;
}

.watercolor-field, .grain { position: absolute; inset: -10%; pointer-events: none; z-index: 1; }

.watercolor-field {
    background:
        radial-gradient(ellipse at 35% 45%, rgba(244, 237, 224, .07), transparent 26%),
        radial-gradient(ellipse at 70% 36%, rgba(202, 219, 255, .1), transparent 20%),
        radial-gradient(ellipse at 48% 74%, rgba(141, 107, 232, .12), transparent 24%);
    filter: blur(18px) saturate(125%);
    animation: watercolorBreath 13s ease-in-out infinite alternate;
}

.grain {
    opacity: .22;
    background-image:
        repeating-radial-gradient(circle at 12% 18%, rgba(255, 251, 242, .2) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(37deg, rgba(255, 251, 242, .05) 0 1px, transparent 1px 7px);
    mix-blend-mode: screen;
}

.mineral-veins span { position: absolute; width: 1px; height: 48vh; background: linear-gradient(transparent, rgba(202, 219, 255, .2), transparent); top: 8vh; transform: rotate(var(--rot, 18deg)); z-index: 2; filter: blur(.2px); }
.mineral-veins span:nth-child(1) { left: 14%; --rot: 17deg; }
.mineral-veins span:nth-child(2) { left: 30%; top: 43vh; --rot: -28deg; }
.mineral-veins span:nth-child(3) { right: 21%; top: 2vh; --rot: -13deg; }
.mineral-veins span:nth-child(4) { right: 8%; top: 38vh; --rot: 31deg; }

.veil { position: absolute; inset: -8%; z-index: 18; pointer-events: none; transition: transform 1.6s cubic-bezier(.18,.86,.22,1), opacity 1.4s ease, filter 1.4s ease; backdrop-filter: blur(8px); }
.veil-left { right: 43%; background: linear-gradient(100deg, rgba(202,219,255,.13), rgba(244,237,224,.28), rgba(141,107,232,.09), transparent); clip-path: polygon(0 0, 88% 0, 70% 100%, 0 100%); }
.veil-right { left: 43%; background: linear-gradient(260deg, rgba(202,219,255,.13), rgba(255,251,242,.22), rgba(28,90,83,.12), transparent); clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%); }
.veil-center { background: radial-gradient(ellipse at 50% 50%, rgba(255,251,242,.18), rgba(202,219,255,.08) 34%, transparent 62%); opacity: .72; filter: blur(1px); }
.grotto.parted .veil-left { transform: translateX(-64%) rotate(-3deg); opacity: .25; filter: blur(5px); }
.grotto.parted .veil-right { transform: translateX(64%) rotate(3deg); opacity: .25; filter: blur(5px); }
.grotto.parted .veil-center { opacity: 0; transform: scale(1.22); }

.oracle-basin { position: absolute; left: 50%; top: 52%; width: min(56vw, 62vh); aspect-ratio: 1; transform: translate(-50%, -50%) scale(var(--basin-scale, 1)); z-index: 6; border-radius: 50%; transition: transform 900ms cubic-bezier(.2,.8,.2,1); }
.basin-rings { position: absolute; inset: -10%; width: 120%; height: 120%; overflow: visible; filter: drop-shadow(0 0 22px rgba(202, 219, 255, .18)); }
.ring, .hand-ring, .ripple { fill: none; stroke-linecap: round; }
.ring { stroke: rgba(255,251,242,.16); stroke-width: 1.2; stroke-dasharray: 3 8; }
.r2 { stroke: rgba(214,180,95,.22); stroke-dasharray: 1 13; }
.hand-ring { stroke: rgba(244,237,224,.34); stroke-width: 1.5; stroke-dasharray: 1320; stroke-dashoffset: 1320; animation: drawSalt 5s ease-in-out forwards; }
.ripple { stroke: rgba(202,219,255,.26); stroke-width: 2; stroke-dasharray: 20 24; animation: rippleSlide 4.8s ease-in-out infinite alternate; }
.ripple-b { animation-delay: -1.7s; opacity: .66; }

.pool-surface { position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle at 48% 46%, rgba(202,219,255,.16), rgba(28,90,83,.16) 34%, rgba(18,10,31,.94) 68%), conic-gradient(from 120deg, rgba(141,107,232,.11), rgba(202,219,255,.2), rgba(28,90,83,.25), rgba(53,26,61,.34), rgba(141,107,232,.11)); box-shadow: inset 0 0 72px rgba(0,0,0,.72), 0 0 88px rgba(202,219,255,.11); overflow: hidden; }
.pool-surface::before { content: ''; position: absolute; inset: -18%; border-radius: 45%; background: repeating-radial-gradient(ellipse at center, transparent 0 16px, rgba(202,219,255,.08) 17px 19px, transparent 20px 34px); animation: poolTurn 8s linear infinite; }
.pool-surface::after { content: ''; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(255,251,242,.16), transparent 58%); filter: blur(14px); animation: moonPulse 4s ease-in-out infinite alternate; }

.reflected-word { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%) scaleY(-1); font-family: var(--fraunces); font-size: clamp(2rem, 5vw, 5.8rem); font-weight: 500; color: rgba(244,237,224,.35); letter-spacing: .03em; text-shadow: 0 0 20px rgba(202,219,255,.45); filter: blur(.7px); opacity: .58; animation: reflectedDrift 3.8s ease-in-out infinite alternate; }

.glyphs span { position: absolute; left: 50%; top: 50%; font-family: var(--cormorant); font-size: clamp(1rem, 2vw, 2rem); color: rgba(202,219,255,.7); text-shadow: 0 0 13px rgba(202,219,255,.5); opacity: 0; transform: rotate(var(--ang)) translateX(var(--rad)) rotate(calc(-1 * var(--ang))); animation: glyphCondense 7s ease-in-out infinite; }
.glyphs span:nth-child(1) { --ang: 11deg; --rad: 12vw; animation-delay: .2s; }
.glyphs span:nth-child(2) { --ang: 83deg; --rad: 10vw; animation-delay: 1.1s; }
.glyphs span:nth-child(3) { --ang: 152deg; --rad: 13vw; animation-delay: 2s; }
.glyphs span:nth-child(4) { --ang: 221deg; --rad: 10vw; animation-delay: 3.1s; }
.glyphs span:nth-child(5) { --ang: 294deg; --rad: 13vw; animation-delay: 4s; }
.glyphs span:nth-child(6) { --ang: 338deg; --rad: 8vw; animation-delay: 4.8s; }

.chamber { position: absolute; inset: 0; z-index: 9; opacity: 0; transform: scale(.985); transition: opacity 900ms ease, transform 1200ms ease; pointer-events: none; }
.chamber.active { opacity: 1; transform: scale(1); pointer-events: auto; }
.vellum { position: absolute; max-width: min(38rem, 78vw); padding: clamp(1.2rem, 3vw, 2.4rem); color: var(--pearl-mist); background: linear-gradient(112deg, rgba(244,237,224,.11), rgba(202,219,255,.06), rgba(255,251,242,.025)); border: 1px solid rgba(244,237,224,.14); border-radius: 34% 66% 61% 39% / 26% 35% 65% 74%; box-shadow: 0 22px 80px rgba(18,10,31,.36), inset 0 0 34px rgba(255,251,242,.05); backdrop-filter: blur(10px); animation: vellumFloat 7s ease-in-out infinite alternate; }
.vellum::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(214,180,95,.1); border-radius: inherit; pointer-events: none; }
.strip-one { left: 8vw; top: 13vh; }
.strip-two { right: 8vw; top: 17vh; }
.strip-three { left: 9vw; bottom: 11vh; }
.strip-four { right: 9vw; bottom: 13vh; }
.strip-five { left: 50%; top: 9vh; transform: translateX(-50%); text-align: center; }
.chamber.active .strip-five { transform: translateX(-50%) scale(1); }

h1, h2 { margin: .1rem 0 .55rem; font-family: var(--fraunces); font-variation-settings: 'SOFT' 90, 'WONK' 1; font-weight: 560; line-height: .92; color: var(--salt); text-shadow: 0 0 24px rgba(202,219,255,.28); }
h1 { font-size: clamp(3.2rem, 10vw, 9.6rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2.2rem, 6.5vw, 6.8rem); letter-spacing: -.035em; }
p { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.72rem); line-height: 1.25; color: rgba(244,237,224,.84); font-weight: 300; }
.coordinate { font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; color: var(--moth-gold); margin-bottom: .8rem; text-transform: uppercase; }
.whisper, .prophecy { position: absolute; font-family: var(--cormorant); font-style: italic; color: rgba(202,219,255,.74); font-size: clamp(1.2rem, 2.4vw, 2.2rem); letter-spacing: .03em; text-shadow: 0 0 16px rgba(202,219,255,.26); }
.inscription { right: 9vw; bottom: 13vh; max-width: 24rem; }
.prophecy { right: 12vw; top: 18vh; max-width: 20rem; }
.final-name { position: absolute; left: 50%; bottom: 13vh; transform: translateX(-50%); font-family: var(--cormorant); font-size: clamp(2rem, 6vw, 6rem); color: rgba(255,251,242,.8); text-shadow: 0 0 30px rgba(214,180,95,.3); }

.ritual-ring { position: absolute; left: 50%; top: 52%; width: min(78vw, 86vh); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 15; pointer-events: none; }
.charm { position: absolute; left: 50%; top: 50%; width: 4.8rem; height: 4.8rem; margin: -2.4rem; transform: rotate(var(--a)) translateX(calc(min(39vw, 43vh))) rotate(calc(-1 * var(--a))); border: 0; background: transparent; pointer-events: auto; cursor: pointer; }
.object { display: block; width: 1.12rem; height: 1.12rem; margin: 0 auto .42rem; transition: transform 550ms ease, filter 550ms ease; filter: drop-shadow(0 0 9px rgba(202,219,255,.4)); }
.charm em { display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; color: rgba(244,237,224,.58); font-style: normal; text-transform: uppercase; opacity: .65; transition: color 550ms ease, opacity 550ms ease; }
.charm.active .object, .charm:hover .object { transform: scale(1.28); filter: drop-shadow(0 0 15px rgba(214,180,95,.7)); }
.charm.active em, .charm:hover em { color: var(--moth-gold); opacity: 1; }
.pearl { border-radius: 50%; background: radial-gradient(circle at 30% 30%, #FFFBF2, #CADBFF 55%, #8D6BE8); }
.leaf { border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #CADBFF, #1C5A53); transform: rotate(35deg); }
.ink { border-radius: 54% 46% 62% 38%; background: #351A3D; box-shadow: inset 0 0 0 2px rgba(202,219,255,.2); }
.scale { border-radius: 50% 50% 12% 50%; background: linear-gradient(135deg, #D6B45F, #8D6BE8); transform: rotate(45deg); }
.pin { width: .28rem; height: 1.7rem; border-radius: 1rem; background: linear-gradient(#FFFBF2, #CADBFF); position: relative; }
.pin::before { content: ''; position: absolute; top: -.28rem; left: 50%; width: .72rem; height: .72rem; border-radius: 50%; transform: translateX(-50%); background: #D6B45F; }

.salt-arc { position: absolute; right: 12vw; bottom: 12vh; width: 20rem; aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(255,251,242,.42); box-shadow: 0 0 30px rgba(255,251,242,.08), inset 0 0 40px rgba(214,180,95,.08); animation: saltPulse 5s ease-in-out infinite; }
.thread { position: absolute; width: 1px; height: 54vh; top: -3vh; transform-origin: top; }
.thread-red { left: 21vw; background: linear-gradient(transparent, rgba(141, 45, 72, .9), transparent); transform: rotate(-8deg); }
.thread-silver { right: 23vw; background: linear-gradient(transparent, rgba(202,219,255,.72), transparent); transform: rotate(6deg); }

.moth-orbit { position: absolute; left: 12vw; top: 14vh; width: 20rem; height: 20rem; border-radius: 50%; }
.moth-orbit i, .moths span { position: absolute; width: 1rem; height: .7rem; background: radial-gradient(circle, #D6B45F, transparent 65%); filter: drop-shadow(0 0 10px #D6B45F); opacity: .78; }
.moth-orbit i::before, .moth-orbit i::after, .moths span::before, .moths span::after { content: ''; position: absolute; top: 0; width: .55rem; height: .72rem; border-radius: 70% 30% 70% 30%; background: rgba(244,237,224,.56); }
.moth-orbit i::before, .moths span::before { left: -.28rem; transform: rotate(-28deg); }
.moth-orbit i::after, .moths span::after { right: -.28rem; transform: rotate(28deg) scaleX(-1); }
.moth-orbit i { left: 50%; top: 50%; animation: orbitMoth 9s linear infinite; transform-origin: -5rem -5rem; }
.moth-orbit i:nth-child(2) { animation-duration: 12s; animation-delay: -3s; }
.moth-orbit i:nth-child(3) { animation-duration: 15s; animation-delay: -6s; }
.moth-orbit i:nth-child(4) { animation-duration: 10s; animation-delay: -8s; }
.moths { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.moths span { left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(var(--s)); animation: freeMoth var(--d) ease-in-out infinite alternate; }
.moths span:nth-child(1) { --x: 16%; --y: 73%; --s: .9; --d: 8s; }
.moths span:nth-child(2) { --x: 74%; --y: 19%; --s: .7; --d: 7s; }
.moths span:nth-child(3) { --x: 84%; --y: 61%; --s: .55; --d: 9s; }
.moths span:nth-child(4) { --x: 31%; --y: 29%; --s: .45; --d: 6s; }
.moths span:nth-child(5) { --x: 62%; --y: 82%; --s: .6; --d: 10s; }
.moths span:nth-child(6) { --x: 10%; --y: 39%; --s: .5; --d: 7.5s; }

.botanicals span { position: absolute; z-index: 3; width: 12rem; height: 22rem; opacity: .13; filter: blur(.3px); }
.fern-a { left: 2vw; bottom: -4vh; background: repeating-linear-gradient(110deg, transparent 0 14px, rgba(202,219,255,.5) 15px 17px, transparent 18px 34px); transform: rotate(-18deg); clip-path: polygon(48% 0, 55% 0, 54% 100%, 45% 100%); }
.fern-b { right: 4vw; top: 8vh; background: repeating-linear-gradient(72deg, transparent 0 13px, rgba(244,237,224,.42) 14px 16px, transparent 17px 32px); transform: rotate(23deg); clip-path: polygon(48% 0, 56% 0, 54% 100%, 44% 100%); }

.artifact { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); z-index: 16; border: 1px solid rgba(214,180,95,.28); background: rgba(18,10,31,.28); backdrop-filter: blur(9px); border-radius: 999px; padding: .72rem 1.05rem .72rem .72rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,251,242,.72); cursor: pointer; transition: border-color 400ms ease, color 400ms ease, transform 400ms ease; }
.artifact span { display: inline-block; vertical-align: middle; width: .9rem; height: .9rem; margin-right: .56rem; border-radius: 50%; background: radial-gradient(circle at 28% 28%, #FFFBF2, #CADBFF 55%, #8D6BE8); box-shadow: 0 0 14px rgba(202,219,255,.55); }
.artifact:hover, .artifact.stirring { color: var(--salt); border-color: rgba(214,180,95,.7); transform: translateX(-50%) translateY(-2px); }
.artifact.stirring span { animation: pearlStir 650ms ease; }

@keyframes watercolorBreath { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.06) rotate(2deg); } }
@keyframes drawSalt { to { stroke-dashoffset: 0; } }
@keyframes rippleSlide { to { stroke-dashoffset: -58; transform: translateY(7px); } }
@keyframes poolTurn { to { transform: rotate(360deg); } }
@keyframes moonPulse { to { opacity: .58; transform: scale(1.18); } }
@keyframes reflectedDrift { from { letter-spacing: .02em; clip-path: polygon(0 8%,100% 0,100% 92%,0 100%); } to { letter-spacing: .075em; clip-path: polygon(0 0,100% 11%,100% 100%,0 88%); } }
@keyframes glyphCondense { 0%, 100% { opacity: 0; filter: blur(9px); } 36%, 62% { opacity: .8; filter: blur(.2px); } }
@keyframes vellumFloat { to { margin-top: -1.2vh; margin-left: .8vw; border-radius: 59% 41% 38% 62% / 48% 61% 39% 52%; } }
@keyframes saltPulse { 50% { transform: scale(1.06) rotate(4deg); opacity: .74; } }
@keyframes orbitMoth { to { transform: rotate(360deg) translateX(7rem) rotate(-360deg); } }
@keyframes freeMoth { to { margin-left: 3vw; margin-top: -5vh; opacity: .35; } }
@keyframes pearlStir { 50% { transform: rotate(180deg) translateX(6px) scale(1.2); } }

@media (max-width: 760px) {
    .oracle-basin { width: 76vw; top: 55%; }
    .ritual-ring { width: 94vw; }
    .charm { transform: rotate(var(--a)) translateX(45vw) rotate(calc(-1 * var(--a))); }
    .charm em { display: none; }
    .vellum { max-width: 82vw; }
    .strip-one, .strip-two, .strip-three, .strip-four { left: 7vw; right: auto; top: 8vh; bottom: auto; }
    .prophecy, .inscription { right: 8vw; bottom: 12vh; top: auto; max-width: 70vw; }
    .salt-arc, .moth-orbit { display: none; }
}