/* ============================================================
   Pray Land — the pilgrimage.
   A full-screen scroll-snap journey. Ten chambers. One image
   per chamber. One scroll gesture = one chamber. No half-views,
   no margins, no website chrome.
   ============================================================ */

/* The shell — body never scrolls; the main element scrolls and snaps. */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #050505;
  color: #f4ecd9;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.pilgrimage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
}

.scroll-shell {
  position: relative;
  height: 100dvh;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.scroll-shell::-webkit-scrollbar { display: none; }
.scroll-shell { scrollbar-width: none; }

/* ============================================================
   THE CHAMBER
   Each is one viewport. Image covers the screen. Content fades
   and lifts in when the chamber settles into the snap point.
   ============================================================ */
.chamber {
  position: relative;
  height: 100dvh;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: end center;
  padding: clamp(40px, 8vh, 96px) clamp(22px, 6vw, 60px);
}

.chamber .bg-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  /* Entrance: slight scale, fade in. */
  opacity: 0;
  transform: scale(1.03);
  transition:
    opacity 1100ms cubic-bezier(.2, .7, .2, 1),
    transform 1400ms cubic-bezier(.2, .7, .2, 1);
}

.chamber.entered .bg-img {
  opacity: 1;
  transform: scale(1);
}

.chamber .scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.0) 30%,
    rgba(0,0,0,0.20) 65%,
    rgba(0,0,0,0.70) 100%);
}

/* Room text: fades up after the image settles. */
.chamber .room-text {
  position: relative;
  z-index: 2;
  max-width: 640px;
  width: 100%;
  text-align: center;
  color: #f4ecd9;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1000ms ease 350ms,
    transform 1100ms cubic-bezier(.2, .7, .2, 1) 350ms;
  margin-bottom: clamp(56px, 11vh, 110px);
  padding-bottom: env(safe-area-inset-bottom);
}

.chamber.entered .room-text {
  opacity: 1;
  transform: translateY(0);
}

.chamber .room-name {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(244, 236, 217, 0.65);
  margin: 0 0 18px;
}

.chamber .room-name::before,
.chamber .room-name::after {
  content: "·";
  margin: 0 12px;
  color: var(--gold);
  opacity: 0.85;
}

.chamber .room-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 1.05rem + 1.6vw, 32px);
  line-height: 1.4;
  color: #f4ecd9;
  margin: 0;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
  letter-spacing: 0.005em;
}

/* ============================================================
   THE HERO
   PRAY LAND wordmark, couplet, "Scroll to enter" cue.
   Centered, not bottom-aligned.
   ============================================================ */
.chamber-hero {
  place-items: center;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  width: 100%;
  text-align: center;
  color: #f4ecd9;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1100ms ease 250ms,
    transform 1200ms cubic-bezier(.2, .7, .2, 1) 250ms;
}

.chamber-hero.entered .hero-content {
  opacity: 1;
  transform: translateY(0);
}

.hero-content .wordmark {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(42px, 9vw, 93px);
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0 0 18px;
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
}

@media (min-width: 600px) {
  .hero-content .wordmark { letter-spacing: 0.12em; }
}

.hero-content .sprig {
  display: flex; align-items: center; gap: 10px;
  margin: 14px auto 26px;
  width: 160px; max-width: 50vw;
  color: var(--gold);
}
.hero-content .sprig::before,
.hero-content .sprig::after {
  content: ""; flex: 1; height: 1px;
  background: rgba(201, 162, 75, 0.55);
}
.hero-content .sprig svg { width: 20px; height: 20px; }

.hero-content .hero-couplet {
  font-family: var(--font-serif);
  font-size: clamp(18px, 1rem + 1vw, 26px);
  line-height: 1.05;
  margin: 0;
  color: #f4ecd9;
}

/* tuck the second line right under the first, almost touching */
.hero-content .hero-couplet + .hero-couplet {
  margin-top: -0.05em;
}

.hero-content .hero-couplet em {
  font-style: italic;
  color: var(--gold);
}

.hero-content .hero-byline {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(244, 236, 217, 0.55);
  margin: 28px 0 0;
}

/* Scroll cue on the hero only.
   Full-width flex container so centering doesn't depend on
   how a browser measures a letter-spaced inline-flex box. */
.chamber-hero .scroll-cue {
  position: absolute;
  bottom: clamp(28px, 5vh, 56px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(244, 236, 217, 0.7);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 800ms ease 900ms;
}

/* the letter-spaced label gets a compensating right-margin so the
   trailing tracking doesn't push the visual centre to the right. */
.chamber-hero .scroll-cue .label {
  display: inline-block;
  text-indent: 0.42em;
}

.chamber-hero.entered .scroll-cue { opacity: 1; }

.chamber-hero .scroll-cue svg {
  width: 16px; height: 16px;
  animation: cue-bob 2.6s ease-in-out infinite;
}

@keyframes cue-bob {
  0%, 100% { transform: translateY(0);  opacity: 0.4; }
  50%      { transform: translateY(6px); opacity: 0.95; }
}

/* ============================================================
   DOWN CUE (every chamber except hero & whisper)
   Full-width flex centring — see hero .scroll-cue note above.
   ============================================================ */
.down-cue {
  position: absolute;
  bottom: clamp(20px, 3.5vh, 40px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(244, 236, 217, 0.55);
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms ease 900ms;
  z-index: 3;
}

.chamber.entered .down-cue { opacity: 1; }

.down-cue svg {
  width: 14px; height: 14px;
  animation: cue-bob 2.8s ease-in-out infinite;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}

.down-cue.dark { color: rgba(20, 14, 6, 0.55); }
.down-cue.dark svg { filter: drop-shadow(0 1px 4px rgba(255, 245, 215, 0.6)); }

/* ============================================================
   THE LIGHT CHAMBER — bright image, dark text override.
   ============================================================ */
.chamber-light { background: #f3e7c7; }

.chamber-light .room-text {
  color: var(--ink);
}

.chamber-light .room-name {
  color: rgba(26, 24, 20, 0.65);
}
.chamber-light .room-name::before,
.chamber-light .room-name::after {
  color: var(--gold-soft);
}

.chamber-light .room-quote {
  color: var(--ink);
  text-shadow: 0 1px 12px rgba(255, 245, 215, 0.85);
}

/* ============================================================
   ARTWORK CHAMBERS — image only, no overlay text.
   ============================================================ */
.chamber-art {
  background: #0a0807;
  place-items: end center;
  /* lift the caption up into the lower-third of the painting */
  padding-bottom: clamp(110px, 18vh, 190px);
}

/* New artworks are 960×1280 — cover fills the screen edge-to-edge,
   no gaps top or bottom. The painting becomes the chamber. */
.chamber-art .bg-img {
  object-fit: cover;
  image-rendering: auto;
}

/* stronger fade behind the caption so the cream text reads
   against any colour in the bottom of the painting */
.chamber-art::after {
  height: 32%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.20) 30%,
    rgba(0, 0, 0, 0.62) 100%);
}

/* Title + caption rendered in HTML so they stay vector-crisp at any
   size, in the same serif and the same area as the burned-in text the
   reference renders had. Fades in with the chamber. */
.chamber-art .art-caption {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 580px;
  width: 100%;
  text-align: center;
  color: #efe2bc;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1000ms ease 400ms,
    transform 1100ms cubic-bezier(.2, .7, .2, 1) 400ms;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
  padding: 0 clamp(22px, 6vw, 60px);
}

.chamber-art.entered .art-caption {
  opacity: 1;
  transform: translateY(0);
}

.chamber-art .art-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(18px, 1.05rem + 0.8vw, 26px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f4e6c2;
}

.chamber-art .art-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(12px, 0.78rem + 0.3vw, 15px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.45;
  color: rgba(244, 230, 194, 0.78);
  max-width: 32em;
}

/* ---------- per-painting caption placement ----------
   padding-bottom controls where the TITLE sits;
   .art-caption gap controls how far below the SUB sits. */

/* Temple — caption just a touch lower than the last bump; sub tight */
#ch-art-1 { padding-bottom: clamp(182px, 27vh, 270px); }
#ch-art-1 .art-caption { gap: 2px; }

/* First Burden — title held in place; sub pushed further down toward
   the centre of the circular pool. (Reducing padding-bottom moves the
   whole caption down; increasing the gap moves the title back up to
   where it was — net effect: only the sub drops lower.) */
#ch-art-2 { padding-bottom: clamp(68px, 11vh, 140px); }
#ch-art-2 .art-caption { gap: 72px; }

/* Scar of Creation — caption raised back close to its earlier
   position (just a touch lower), and shifted 30px right of centre. */
#ch-art-3 { padding-bottom: clamp(160px, 24.5vh, 250px); }
#ch-art-3 .art-caption {
  gap: 42px;
  left: 30px;
}

/* Kept Flame — sub dropped a bit further beneath the title */
#ch-art-4 { padding-bottom: clamp(92px, 15.5vh, 172px); }
#ch-art-4 .art-caption { gap: 36px; }

/* slight bottom fade so the down-cue stays legible */
.chamber-art::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.45) 100%);
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   THE WHISPER CHAMBER — final, ceremonial.
   ============================================================ */
/* The Whisper chamber: two groups of content, top and bottom,
   so the bowl in the centre of the photograph stays uncovered. */
.chamber-whisper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-top: clamp(60px, 10vh, 120px);
  padding-bottom: clamp(40px, 6vh, 80px);
}

.chamber-whisper .ember {
  position: absolute;
  left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 180, 90, 0.18) 0%, transparent 70%);
  z-index: 0;
  filter: blur(24px);
  animation: ember-pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ember-pulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

.whisper-top,
.whisper-bottom {
  position: relative;
  z-index: 2;
  max-width: 580px;
  width: 100%;
  text-align: center;
  color: #f4ecd9;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1100ms ease 350ms,
    transform 1200ms cubic-bezier(.2, .7, .2, 1) 350ms;
}

.chamber-whisper.entered .whisper-top,
.chamber-whisper.entered .whisper-bottom {
  opacity: 1;
  transform: translateY(0);
}

.whisper-top h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(32px, 1.6rem + 3vw, 64px);
  letter-spacing: 0.04em;
  color: #f4ecd9;
  margin: 0 0 18px;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5);
}

.whisper-couplet {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 1rem + 1vw, 26px);
  line-height: 1.45;
  color: #f4ecd9;
  margin: 0;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
}

.whisper-underline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--gold);
  margin: 0 0 22px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

.whisper-ctas {
  margin-bottom: 22px;
}

.whisper-ctas .primary {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 16px 30px;
  background: var(--gold);
  color: #0a0807;
  border: 1px solid var(--gold);
  text-decoration: none;
  transition: background 220ms ease, border-color 220ms ease;
}

.whisper-ctas .primary:hover {
  background: #f0c773;
  border-color: #f0c773;
}

.whisper-signature {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(244, 236, 217, 0.55);
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   PROGRESS COUNTER — top-right, almost invisible.
   ============================================================ */
.progress-counter {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: calc(env(safe-area-inset-right, 0px) + 18px);
  z-index: 100;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.42em;
  color: rgba(244, 236, 217, 0.5);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  user-select: none;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.progress-counter .pos {
  color: rgba(244, 236, 217, 0.95);
  min-width: 1.5em;
  text-align: right;
}

.progress-counter .slash {
  color: var(--gold);
  opacity: 0.6;
}

.progress-counter .total {
  color: rgba(244, 236, 217, 0.5);
}

/* Light chamber: darken the counter so it stays legible on cream. */
.progress-counter.on-light {
  color: rgba(26, 24, 20, 0.55);
  text-shadow: 0 1px 4px rgba(255, 245, 215, 0.75);
}

.progress-counter.on-light .pos { color: rgba(26, 24, 20, 0.85); }
.progress-counter.on-light .slash { color: var(--gold-soft); }
.progress-counter.on-light .total { color: rgba(26, 24, 20, 0.5); }

/* ============================================================
   Reduced motion — disable all entrance animations.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .chamber .bg-img,
  .chamber .room-text,
  .hero-content,
  .whisper-content,
  .scroll-cue,
  .down-cue {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .chamber .bg-img { transform: none !important; }
  .scroll-shell { scroll-behavior: auto; }
}