html { background: var(--void); scroll-behavior: smooth; }
body { overflow-x: clip; }

/* Top bar: appears once you step out of the narthex */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40; pointer-events: none; opacity: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gutter);
  background: linear-gradient(rgba(5, 4, 6, .82), rgba(5, 4, 6, 0));
  transition: opacity .4s;
}
.topbar.is-on { opacity: 1; pointer-events: auto; }
.topbar a { text-decoration: none; font-family: var(--font-caps); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--parchment-dim); }
.topbar a:hover { color: var(--gilt-3); }
.topbar__mark { color: var(--gilt-2) !important; font-size: .85rem !important; }
.topbar__links { display: flex; gap: clamp(14px, 2.4vw, 32px); }
@media (max-width: 640px) { .topbar__links a:nth-child(n+4) { display: none; } }

/* Stage */
.journey { position: relative; z-index: 1; height: calc(var(--chapters, 2) * 100svh); }
.stage { position: sticky; top: 0; height: 100svh; width: 100%; overflow: hidden; isolation: isolate; background: var(--void); }

.bg { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.bg img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 40%; }
.bg--nave img { filter: sepia(.35) saturate(.8) brightness(.5) contrast(1.12); object-position: 50% 45%; }
.bg--dome img { filter: sepia(.25) saturate(.9) brightness(.55) contrast(1.08); object-position: 50% 50%; }
.bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, transparent 25%, rgba(5, 4, 6, .78) 100%); }

.shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at 50% 60%, transparent 0%, transparent 45%, rgba(5, 4, 6, .55) 100%); }

/* Parallax cutouts */
.scene { position: absolute; inset: 0; z-index: 3; opacity: 0; visibility: hidden; pointer-events: none; }
.layer { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: translate(-50%, -50%) rotate(var(--angle, 0deg)); will-change: transform; }
.layer img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .65)) sepia(.2) brightness(.92); }
.layer img.is-missing { display: none; }
@media (max-width: 720px) { .layer:nth-child(n+6) { display: none; } .layer { width: calc(var(--w) * 1.6); } }

/* Altar painting */
.altar {
  position: absolute; inset: 0; z-index: 3; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity;
}
.altar .frame {
  padding: clamp(8px, 1.1vw, 16px); background: linear-gradient(135deg, #6b4f16, #c9a227 30%, #7a5a18 50%, #e2c35a 75%, #6b4f16);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .8), inset 0 0 0 2px rgba(0, 0, 0, .45);
}
.altar .frame img { display: block; max-height: 66svh; max-width: min(86vw, 1100px); width: auto; height: auto; box-shadow: inset 0 0 40px #000; }
.altar figcaption { margin-top: 18px; font-family: var(--font-body); font-style: italic; font-size: clamp(.9rem, 1.2vw, 1.1rem); color: var(--parchment-dim); letter-spacing: .02em; }
.altar figcaption em { color: var(--parchment); }

/* Light canvas sits above imagery, below copy; screen blend turns black transparent */
.light { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; display: block; pointer-events: none; mix-blend-mode: screen; }
.beam-fallback { display: none; }
.no-webgl .light { display: none; }
.no-webgl .beam-fallback {
  display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 28% 18% at 50% 12%, rgba(255, 226, 170, .55), transparent 70%),
    conic-gradient(from 180deg at 50% 10%, transparent 0 160deg, rgba(255, 205, 130, .07) 168deg, rgba(255, 215, 150, .2) 180deg, rgba(255, 205, 130, .07) 192deg, transparent 200deg);
}

/* Copy blocks */
.copy {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 var(--gutter);
  will-change: transform, opacity;
}
.copy--narthex { gap: 0; transform-origin: 50% 50%; padding-top: 9svh; }
.cross {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: var(--gilt-2); margin-bottom: 1.1em;
  text-shadow: 0 0 14px rgba(241, 212, 121, .45);
  opacity: 0; animation: rise 1.6s .3s cubic-bezier(.2, .7, .2, 1) forwards;
}
.wordmark { opacity: 0; animation: rise 1.8s .55s cubic-bezier(.2, .7, .2, 1) forwards; }
.motto { opacity: 0; animation: rise 1.6s 1.1s cubic-bezier(.2, .7, .2, 1) forwards; }
.ledger-hero { margin-top: clamp(2.2rem, 5vh, 4rem); opacity: 0; animation: rise 1.8s 1.5s cubic-bezier(.2, .7, .2, 1) forwards; }
.scroll-hint {
  position: absolute; bottom: clamp(18px, 4vh, 40px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-caps); font-size: .68rem; letter-spacing: .34em; padding-left: .34em;
  text-transform: uppercase; color: var(--parchment-faint); text-decoration: none;
  opacity: 0; animation: rise 1.6s 2.6s ease forwards;
}
.scroll-hint i { width: 1px; height: 44px; background: linear-gradient(var(--gilt-3), transparent); animation: drip 2.4s ease-in-out infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.copy--nave, .copy--dome, .copy--candle { opacity: 0; visibility: hidden; }
.copy--nave .chapter-title { text-shadow: 0 2px 30px rgba(0, 0, 0, .9); }
.eyebrow--light { color: var(--gilt-2); }

.verse {
  max-width: 28ch; margin: 0; font-family: var(--font-body); font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 3rem); line-height: 1.3; color: var(--parchment);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .9);
}
.verse .ch { opacity: 0; display: inline; transition: opacity .35s; }
.verse .ch.on { opacity: 1; }
.verse-ref { margin: 1.4em 0 0; font-family: var(--font-caps); font-size: clamp(.68rem, 1vw, .85rem); letter-spacing: .4em; padding-left: .4em; text-transform: uppercase; color: var(--gilt-2); }

/* Candle */
.flame { position: relative; width: 26px; height: 64px; margin-bottom: 26px; }
.flame::before { content: ''; position: absolute; left: 50%; bottom: -14px; width: 10px; height: 26px; margin-left: -5px; background: linear-gradient(#f2e6c9, #c9b48a); border-radius: 2px; }
.flame i {
  position: absolute; left: 50%; bottom: 8px; width: 22px; height: 48px; margin-left: -11px;
  background: radial-gradient(ellipse at 50% 80%, #fff6d8 0%, #ffd27a 28%, #ff9a2e 55%, rgba(255, 90, 20, .35) 75%, transparent 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: 50% 100%;
  transform: scale(calc(.9 + (var(--flame) - 1) * 2)) skewX(calc((var(--flame) - 1) * 40deg));
  filter: blur(.4px) drop-shadow(0 0 18px rgba(255, 170, 60, .7)) drop-shadow(0 0 60px rgba(255, 140, 40, .35));
}
.copy--candle { z-index: 11; }
.copy--candle .chapter-title { font-family: var(--font-display); font-weight: 700; text-transform: none; letter-spacing: .08em; }

.blackout { position: absolute; inset: 0; z-index: 10; background: #000; opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .cross, .wordmark, .motto, .ledger-hero, .scroll-hint { animation: none; opacity: 1; }
  .scroll-hint i { animation: none; }
  html { scroll-behavior: auto; }
}
@media (max-width: 640px) {
  .wordmark { letter-spacing: .16em; padding-left: .16em; }
  .motto { letter-spacing: .24em; padding-left: .24em; font-size: .68rem; }
  .eyebrow { letter-spacing: .22em; padding-left: .22em; }
  .odometer .col { width: .7em; }
  .altar .frame img { max-height: 52svh; }
}