:root {
  /* Design typography compliance: IBM Plex Mono only for ledger numbers. Interactions can include cursor-caused ink ripples. */
  --shrine-ink: #18121B;
  --lacquer-vermilion: #D94A38;
  --merit-gold: #F4C95D;
  --jade-patina: #4E8F74;
  --rice-paper: #F3E7CC;
  --moon-lilac: #B9A7E8;
  --charcoal-umber: #3A2A24;
  --scroll-progress: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--rice-paper);
  background: var(--shrine-ink);
  font-family: "Nunito Sans", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(185, 167, 232, .18), transparent 28%),
    radial-gradient(circle at 84% 20%, rgba(217, 74, 56, .14), transparent 24%),
    radial-gradient(circle at 50% 92%, rgba(78, 143, 116, .16), transparent 34%),
    linear-gradient(135deg, #18121B 0%, #241828 46%, #3A2A24 100%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: .2;
  mix-blend-mode: soft-light;
  background-image:
    repeating-linear-gradient(0deg, rgba(243, 231, 204, .05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(24, 18, 27, .35) 0 1px, transparent 1px 7px);
}

#particleField {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 3;
  pointer-events: none;
}

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

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  padding: clamp(28px, 5vw, 82px);
}

.chamber::before,
.chamber::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(2px);
  pointer-events: none;
}

.chamber::before {
  width: 86vmin;
  height: 86vmin;
  border: 1px solid rgba(244, 201, 93, .16);
  transform: rotate(calc(var(--scroll-progress) * 180deg));
}

.chamber::after {
  width: 48vmin;
  height: 48vmin;
  border: 1px dashed rgba(185, 167, 232, .2);
  transform: rotate(calc(var(--scroll-progress) * -260deg));
}

.rosary {
  position: fixed;
  right: clamp(14px, 3vw, 44px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.rosary-thread {
  position: absolute;
  top: -18px;
  bottom: -18px;
  width: 2px;
  background: linear-gradient(#D94A38, #F4C95D, #4E8F74);
  opacity: .65;
}

.bead {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--rice-paper);
  text-decoration: none;
  transform: rotate(calc(var(--scroll-progress) * 360deg));
}

.bead i {
  width: 20px;
  height: 20px;
  border-radius: 44% 56% 52% 48%;
  background: radial-gradient(circle at 34% 30%, #F3E7CC, #B9A7E8 42%, #3A2A24 75%);
  border: 2px solid rgba(244, 201, 93, .45);
  box-shadow: 0 0 0 4px rgba(24, 18, 27, .85), 0 0 18px rgba(244, 201, 93, .22);
  transition: transform .35s ease, background .35s ease;
}

.bead em {
  position: absolute;
  right: 42px;
  top: 8px;
  opacity: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--moon-lilac);
  transition: opacity .25s ease;
}

.bead.active i {
  transform: scale(1.35);
  background: conic-gradient(from 30deg, #F4C95D, #D94A38, #B9A7E8, #F4C95D);
}

.bead.active em { opacity: 1; }

.traveling-badge {
  position: fixed;
  left: 50vw;
  top: 50vh;
  width: clamp(132px, 18vmin, 240px);
  height: clamp(132px, 18vmin, 240px);
  transform: translate(-50%, -50%);
  z-index: 45;
  pointer-events: none;
  filter: drop-shadow(0 24px 32px rgba(0, 0, 0, .38));
}

.badge-halo {
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  opacity: calc(.15 + var(--scroll-progress) * .85);
  background: conic-gradient(from 20deg, transparent, rgba(244, 201, 93, .48), rgba(185, 167, 232, .34), transparent, rgba(217, 74, 56, .28), transparent);
  animation: haloDrift 11s linear infinite;
  filter: blur(.4px);
}

.badge-shell,
.badge-face,
.badge-rim { position: absolute; inset: 0; border-radius: 48% 52% 50% 46%; }

.badge-shell {
  background: radial-gradient(circle at 35% 22%, #F3E7CC, #b78853 30%, #3A2A24 78%);
  clip-path: polygon(50% 0%, 58% 6%, 68% 4%, 75% 12%, 85% 14%, 89% 25%, 98% 32%, 94% 44%, 100% 54%, 92% 64%, 91% 76%, 79% 82%, 74% 93%, 62% 92%, 51% 100%, 40% 93%, 28% 96%, 21% 85%, 9% 81%, 8% 67%, 0% 58%, 6% 47%, 2% 35%, 12% 28%, 16% 16%, 28% 13%, 37% 5%);
}

.badge-face {
  inset: 13%;
  overflow: hidden;
  background:
    radial-gradient(circle at 46% 34%, rgba(185, 167, 232, .08), transparent 22%),
    radial-gradient(circle at 50% 50%, #8d6a4a, #4b332c 72%);
  border: 2px solid rgba(24, 18, 27, .32);
}

.badge-rim {
  border: clamp(8px, 1.2vmin, 14px) solid rgba(244, 201, 93, .48);
  box-shadow: inset 0 0 18px rgba(244, 201, 93, .34), 0 0 34px rgba(244, 201, 93, .16);
  opacity: calc(.35 + var(--scroll-progress) * .65);
}

.ink-mark {
  position: absolute;
  inset: 22%;
  border-radius: 48% 52% 38% 62%;
  opacity: 0;
  transform: scale(.25) rotate(-12deg);
  background: radial-gradient(circle at 45% 45%, #18121B, #4E8F74 64%, transparent 68%);
  mix-blend-mode: multiply;
}

.thread-wrap {
  position: absolute;
  left: -10%;
  right: -10%;
  height: 8px;
  top: 48%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #D94A38 16%, #F4C95D 48%, #D94A38 82%, transparent);
  opacity: 0;
  box-shadow: 0 2px 7px rgba(24, 18, 27, .42);
}

.thread-a { transform: rotate(28deg); }
.thread-b { transform: rotate(-30deg); top: 51%; }

.enamel-shine {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 70% 22%, rgba(243, 231, 204, .86), transparent 13%),
    conic-gradient(from 120deg, rgba(217, 74, 56, .55), rgba(244, 201, 93, .45), rgba(78, 143, 116, .48), rgba(185, 167, 232, .42), rgba(217, 74, 56, .55));
  mix-blend-mode: screen;
}

.seal-symbol {
  position: absolute;
  inset: 30%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #F3E7CC;
  background: rgba(217, 74, 56, .82);
  border: 2px solid rgba(243, 231, 204, .62);
  font-family: "Yeseva One", serif;
  font-size: clamp(28px, 5vmin, 60px);
  opacity: 0;
  transform: scale(1.8) rotate(8deg);
}

.traveling-badge.stage-1 .ink-mark { opacity: .88; transform: scale(1) rotate(-12deg); transition: .8s ease; }
.traveling-badge.stage-2 .thread-wrap { opacity: .95; transition: .8s ease; }
.traveling-badge.stage-3 .enamel-shine { opacity: .76; transition: .8s ease; }
.traveling-badge.stage-3 .badge-shell { background: radial-gradient(circle at 32% 20%, #F3E7CC, #F4C95D 27%, #D94A38 58%, #3A2A24 100%); }
.traveling-badge.stage-4 .seal-symbol { opacity: 1; transform: scale(1) rotate(-4deg); transition: .55s cubic-bezier(.2, 1.5, .3, 1); }

.orbit {
  position: absolute;
  inset: -24%;
  border: 1px dashed rgba(243, 231, 204, .18);
  border-radius: 50%;
  animation: orbitSpin 14s linear infinite;
  opacity: calc(.08 + var(--scroll-progress) * .7);
}

.orbit-two { inset: -38%; animation-duration: 20s; animation-direction: reverse; }
.orbit-three { inset: -52%; animation-duration: 28s; }

.charm {
  position: absolute;
  top: 0;
  left: 50%;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #18121B;
  background: #F4C95D;
  font-family: "Yeseva One", serif;
}

.plaque,
.altar-copy,
.paper-slip,
.ema-plaque {
  background: linear-gradient(135deg, rgba(243, 231, 204, .95), rgba(243, 231, 204, .76));
  color: var(--charcoal-umber);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(58, 42, 36, .18);
}

.wordmark-plaque {
  position: absolute;
  top: 8vh;
  left: 10vw;
  max-width: min(720px, 82vw);
  padding: clamp(24px, 4vw, 52px) clamp(28px, 5vw, 68px);
  transform: rotate(-4deg);
  clip-path: polygon(2% 8%, 94% 0, 100% 84%, 9% 100%);
}

.wordmark-plaque h1 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(56px, 11vw, 150px);
  line-height: .8;
  letter-spacing: .04em;
  color: var(--shrine-ink);
  text-shadow: 0 2px rgba(244, 201, 93, .42), 0 -1px rgba(58, 42, 36, .24);
}

.receipt-line,
.final-receipt {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.embossed-domain {
  display: block;
  margin-top: 16px;
  font-family: "Yeseva One", serif;
  letter-spacing: .08em;
  color: var(--lacquer-vermilion);
}

.altar-copy {
  position: absolute;
  width: min(470px, 84vw);
  padding: clamp(24px, 4vw, 48px);
  border-radius: 34px 8px 44px 12px;
  transform-origin: center;
}

.chamber-kicker {
  margin: 0 0 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--jade-patina);
  text-transform: uppercase;
}

.altar-copy h2 {
  margin: 0 0 16px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(44px, 6vw, 92px);
  line-height: .9;
  letter-spacing: .03em;
  color: var(--shrine-ink);
}

.altar-copy p:not(.chamber-kicker):not(.final-receipt) {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.62;
}

.spiral-pos-one { right: 9vw; bottom: 8vh; transform: rotate(2deg); }
.spiral-pos-two { left: 8vw; top: 16vh; transform: rotate(-2deg); }
.spiral-pos-three { right: 9vw; top: 15vh; transform: rotate(3deg); }
.spiral-pos-four { left: 10vw; bottom: 12vh; transform: rotate(-3deg); }
.spiral-pos-five { right: 12vw; bottom: 15vh; transform: rotate(2deg); }

.ritual-prompt,
.ring-charm {
  border: 0;
  cursor: pointer;
  font-family: "Yeseva One", serif;
  color: #F3E7CC;
  background: #D94A38;
  box-shadow: 0 10px 0 rgba(58, 42, 36, .38), 0 18px 28px rgba(0, 0, 0, .22);
  transition: transform .2s ease, box-shadow .2s ease;
}

.ritual-prompt {
  padding: 15px 22px;
  border-radius: 999px;
  font-size: 15px;
  letter-spacing: .04em;
}

.ritual-prompt:hover,
.ring-charm:hover { transform: translateY(4px); box-shadow: 0 5px 0 rgba(58, 42, 36, .5), 0 10px 18px rgba(0, 0, 0, .18); }

.pool-reflection,
.ink-pool {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(185, 167, 232, .2), transparent 36%),
    radial-gradient(ellipse at 50% 55%, rgba(78, 143, 116, .24), rgba(24, 18, 27, .95) 68%);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .72), 0 0 80px rgba(78, 143, 116, .14);
}

.pool-reflection { width: 72vw; height: 20vh; left: 14vw; bottom: 4vh; transform: perspective(600px) rotateX(64deg); }
.ink-pool { width: 58vmin; height: 58vmin; right: 7vw; bottom: 12vh; }

.paint-cloud { position: absolute; border-radius: 50%; filter: blur(28px); opacity: .38; }
.cloud-one { width: 42vw; height: 28vh; left: -8vw; top: 32vh; background: #B9A7E8; }
.cloud-two { width: 32vw; height: 26vh; right: -5vw; top: 10vh; background: #D94A38; }

.blank-badges span,
.lantern,
.lotus-coins i {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #F3E7CC, #3A2A24 72%);
  border: 1px solid rgba(244, 201, 93, .32);
  opacity: .55;
}

.blank-badges span:nth-child(1) { width: 56px; height: 56px; left: 8vw; top: 42vh; animation: floatBadge 7s ease-in-out infinite; }
.blank-badges span:nth-child(2) { width: 42px; height: 42px; right: 18vw; top: 18vh; animation: floatBadge 9s ease-in-out infinite reverse; }
.blank-badges span:nth-child(3) { width: 68px; height: 68px; left: 42vw; top: 13vh; animation: floatBadge 11s ease-in-out infinite; }
.blank-badges span:nth-child(4) { width: 34px; height: 34px; right: 8vw; bottom: 32vh; animation: floatBadge 8s ease-in-out infinite reverse; }
.blank-badges span:nth-child(5) { width: 48px; height: 48px; left: 30vw; bottom: 11vh; animation: floatBadge 10s ease-in-out infinite; }

.lantern { width: 18px; height: 86px; background: linear-gradient(#F4C95D, #D94A38, transparent); filter: blur(4px); opacity: .78; }
.lantern-left { left: 23vw; bottom: 11vh; }
.lantern-right { right: 28vw; bottom: 10vh; }

.ripple {
  position: absolute;
  border: 1px solid rgba(185, 167, 232, .5);
  border-radius: 50%;
  inset: 22%;
  animation: ripple 3.5s ease-out infinite;
}
.ripple-b { animation-delay: 1.2s; }
.cursor-ripple { position: absolute; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 2px solid #B9A7E8; pointer-events: none; animation: cursorRipple .8s ease-out forwards; }

.ledger-slips .paper-slip {
  position: absolute;
  padding: 20px 24px;
  width: 230px;
  border-radius: 10px 26px 12px 28px;
  transform: rotate(var(--tilt));
}
.paper-slip b { display: block; font-family: "IBM Plex Mono", monospace; color: #D94A38; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.paper-slip span { display: block; margin-top: 8px; line-height: 1.35; }
.slip-one { --tilt: 7deg; left: 17vw; bottom: 18vh; }
.slip-two { --tilt: -11deg; right: 16vw; top: 12vh; }
.slip-three { --tilt: 4deg; right: 11vw; bottom: 9vh; }

.moon-scale { position: absolute; left: 50%; top: 68%; width: 250px; height: 90px; opacity: .55; transform: translateX(-50%); }
.moon-scale i { position: absolute; left: 50%; top: 0; width: 2px; height: 80px; background: #F4C95D; }
.moon-scale span { position: absolute; bottom: 0; width: 78px; height: 38px; border-bottom: 4px solid #B9A7E8; border-radius: 0 0 80px 80px; }
.moon-scale span:first-child { left: 14px; }
.moon-scale span:last-child { right: 14px; }

.loom-frame {
  position: absolute;
  inset: 8vh 10vw;
  border: 2px solid rgba(244, 201, 93, .2);
  border-radius: 45% 55% 40% 60%;
  transform: rotate(-10deg);
}
.loom-thread { position: absolute; height: 4px; left: -5vw; right: -5vw; background: linear-gradient(90deg, transparent, #D94A38, #F4C95D, #D94A38, transparent); transform-origin: center; animation: threadPulse 4s ease-in-out infinite; }
.t1 { top: 18%; transform: rotate(12deg); }
.t2 { top: 34%; transform: rotate(-8deg); animation-delay: .2s; }
.t3 { top: 50%; transform: rotate(5deg); animation-delay: .4s; }
.t4 { top: 66%; transform: rotate(-13deg); animation-delay: .6s; }
.t5 { top: 82%; transform: rotate(9deg); animation-delay: .8s; }

.hanging-charms { position: absolute; left: 12vw; bottom: 16vh; display: flex; gap: 22px; transform: rotate(-7deg); }
.ring-charm { width: 82px; height: 82px; border-radius: 50%; }
.ring-charm.ringing { animation: ringCharm .55s ease; }
.ema-plaque { position: absolute; left: 18vw; top: 14vh; padding: 24px 34px; font-family: "Yeseva One", serif; color: #D94A38; transform: rotate(-8deg); }

.kiln-mouth {
  position: absolute;
  right: 7vw;
  top: 12vh;
  width: min(680px, 72vw);
  height: min(680px, 72vw);
  border-radius: 50% 50% 44% 56%;
  background: radial-gradient(circle at 50% 60%, #F4C95D 0 9%, #D94A38 23%, #3A2A24 56%, #18121B 76%);
  box-shadow: inset 0 0 90px #18121B, 0 0 90px rgba(217, 74, 56, .38);
}
.ember { position: absolute; bottom: 20%; width: 12px; height: 12px; border-radius: 50%; background: #F4C95D; box-shadow: 0 0 22px #D94A38; animation: emberRise 3s ease-in infinite; }
.e1 { left: 24%; }
.e2 { left: 42%; animation-delay: .7s; }
.e3 { left: 58%; animation-delay: 1.3s; }
.e4 { left: 72%; animation-delay: 2s; }

.stamp-pad { width: 112px; height: 112px; margin-top: 22px; border-radius: 26px; display: grid; place-items: center; color: #F3E7CC; background: #D94A38; font-family: "Yeseva One", serif; font-size: 24px; box-shadow: inset 0 0 0 8px rgba(243, 231, 204, .15), 0 14px 0 rgba(58, 42, 36, .45); cursor: pointer; }
.stamp-pad.stamped { animation: stampSquash .52s cubic-bezier(.2, 1.55, .35, 1); }
.lotus-coins i { width: 42px; height: 42px; background: conic-gradient(#F4C95D, #D94A38, #F4C95D); opacity: .85; }
.lotus-coins i:nth-child(1) { left: 22vw; top: 18vh; }
.lotus-coins i:nth-child(2) { left: 46vw; top: 11vh; }
.lotus-coins i:nth-child(3) { right: 9vw; bottom: 16vh; }
.lotus-coins i:nth-child(4) { left: 55vw; bottom: 8vh; }

.return-gate { position: absolute; inset: 8vh 12vw; opacity: .85; }
.gate-post,
.gate-beam { position: absolute; background: linear-gradient(90deg, #D94A38, #F4C95D, #D94A38); box-shadow: 0 0 46px rgba(244, 201, 93, .28); }
.gate-post { width: 34px; top: 10vh; bottom: 4vh; border-radius: 999px; }
.gate-post.left { left: 14vw; }
.gate-post.right { right: 14vw; }
.gate-beam { left: 8vw; right: 8vw; top: 11vh; height: 34px; border-radius: 999px; }
.halo-script { position: absolute; left: 10vw; top: 24vh; width: 360px; font-family: "Cormorant Garamond", serif; font-size: clamp(38px, 5vw, 72px); color: #B9A7E8; line-height: .95; transform: rotate(-9deg); text-shadow: 0 0 28px rgba(185, 167, 232, .34); }

.chamber-unmarked { background: radial-gradient(circle at 30% 78%, rgba(78, 143, 116, .18), transparent 28%); }
.chamber-ledger { background: radial-gradient(circle at 76% 70%, rgba(78, 143, 116, .24), transparent 34%), linear-gradient(180deg, rgba(24, 18, 27, .1), rgba(58, 42, 36, .36)); }
.chamber-loom { background: radial-gradient(circle at 25% 25%, rgba(217, 74, 56, .16), transparent 30%), radial-gradient(circle at 70% 76%, rgba(244, 201, 93, .12), transparent 26%); }
.chamber-kiln { background: radial-gradient(circle at 72% 45%, rgba(217, 74, 56, .28), transparent 42%), linear-gradient(#18121B, #3A2A24); }
.chamber-return { background: radial-gradient(circle at 50% 45%, rgba(244, 201, 93, .20), transparent 32%), radial-gradient(circle at 50% 65%, rgba(185, 167, 232, .2), transparent 44%); }

@keyframes haloDrift { to { transform: rotate(360deg); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes floatBadge { 50% { transform: translateY(-28px) rotate(14deg); } }
@keyframes ripple { from { transform: scale(.25); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
@keyframes cursorRipple { to { transform: scale(8); opacity: 0; } }
@keyframes threadPulse { 50% { filter: brightness(1.5); opacity: .55; } }
@keyframes ringCharm { 20% { transform: rotate(12deg); } 45% { transform: rotate(-11deg); } 70% { transform: rotate(7deg); } }
@keyframes emberRise { from { transform: translateY(40px) scale(.5); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-180px) scale(1.2); opacity: 0; } }
@keyframes stampSquash { 0% { transform: scale(1); } 38% { transform: scale(1.15, .72); } 70% { transform: scale(.92, 1.12); } 100% { transform: scale(1); } }

@media (max-width: 760px) {
  .rosary { right: 8px; gap: 11px; }
  .bead { width: 28px; height: 28px; }
  .bead em { display: none; }
  .wordmark-plaque { left: 5vw; top: 7vh; }
  .altar-copy { width: min(390px, 78vw); }
  .spiral-pos-one,
  .spiral-pos-two,
  .spiral-pos-three,
  .spiral-pos-four,
  .spiral-pos-five { left: 5vw; right: auto; bottom: 7vh; top: auto; }
  .traveling-badge { width: 128px; height: 128px; }
  .hanging-charms { left: 6vw; gap: 10px; }
  .ring-charm { width: 64px; height: 64px; }
}