/* ============================================================
   LEDURA home: ritual, the deepest hour
   An amber tesbih that breathes with the scroll (js/fx-ritual.js) and
   fills with light bead by bead (js/fx-tesbih.js). The resting state
   below is the complete static layout: the Blender poster of the
   tesbih at rest, the three words as a quiet sequence, the count at 33.
   .is-live (set by fx-ritual) stacks the words for the crossfade.
   ============================================================ */
.ritual {
  position: relative;
  overflow: hidden;
  /* the deepest hour: a touch darker than the sections around it */
  background: radial-gradient(70% 60% at 50% 46%, transparent, color-mix(in srgb, var(--sky-midnight) 55%, transparent));
}
/* Static (no pin): the morning can rise behind the seal while this
   section is still leaving, so the night keeps its own ground here. */
html.has-sky .ritual:not(.is-live) {
  background: linear-gradient(180deg, transparent, var(--night-bg) 45%);
}
.ritual-stage {
  --orb: min(56svh, 500px);
  position: relative;
  z-index: 2;                 /* above the cosmos canvas */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.5svh, 40px);
  padding: clamp(88px, 12svh, 120px) var(--gutter) clamp(40px, 7svh, 72px);
  text-align: center;
}

/* ---------- the ring ---------- */
.ritual-orb {
  position: relative;
  flex: none;
  width: var(--orb);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.ritual-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: .55;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--night-glow) 20%, transparent), color-mix(in srgb, var(--night-glow) 6%, transparent) 62%, transparent);
  transform: scale(var(--breath, .72));
  will-change: transform;
}
/* The tesbih: a figure larger than the orb (1.3 x 1.6 orb) so the imame
   and tassel can hang below the loop. Its framing matches the poster
   render and the live camera; the loop's centre is the orb's centre,
   which is also where it breathes from. */
.ritual-tesbih {
  position: absolute;
  left: -15%;
  top: -15%;
  width: 130%;
  aspect-ratio: 900 / 1107;
  margin: 0;
  pointer-events: none;
  transform-origin: 50% 40.625%;
  transform: scale(var(--breath, .72));
  will-change: transform;
}
.ritual-tesbih img, .ritual-tesbih canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 1.2s var(--ease-out);
}
.ritual-tesbih canvas { opacity: 0; }
.ritual-tesbih.is-live canvas { opacity: 1; }
.ritual-tesbih.is-live .ritual-tesbih-poster { opacity: 0; }

/* ---------- the three words ---------- */
.ritual-orb .ritual-word {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.15;
  color: var(--night-ink);
  white-space: nowrap;
}
/* static: a quiet vertical sequence, the first breath strongest */
.ritual-orb { grid-auto-rows: min-content; align-content: center; row-gap: .35em; }
.ritual-word[data-phase="hold"] { opacity: .6; }
.ritual-word[data-phase="out"] { opacity: .4; }
.ritual.is-live .ritual-word {
  grid-area: 1 / 1;
  opacity: 0;
  font-size: clamp(28px, 3vw, 44px);
}

/* ---------- the count ---------- */
.ritual-count {
  display: flex;
  align-items: baseline;
  gap: .6em;
  margin: 0;
}
.ritual-n {
  display: inline-block;
  min-width: 2ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--night-glow);
  text-align: right;
}
[data-skin="night"] .ritual-unit {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--night-faint);
}

/* ---------- copy ---------- */
.ritual-copy { max-width: 34rem; }
.ritual-title { font-size: clamp(30px, 3.2vw, 46px); }
.ritual-copy p { margin: 14px auto 0; max-width: 30rem; font-size: var(--fs-lead); }

/* Wide screens: the ring holds the centre of the sky; copy and count
   settle into the lower corners so nothing crowds the breath. */
@media (min-width: 1100px) {
  .ritual-stage { padding-bottom: clamp(88px, 12svh, 120px); }
  .ritual-copy, .ritual-count {
    position: absolute;
    bottom: clamp(44px, 8svh, 88px);
  }
  .ritual-copy { left: var(--gutter); max-width: 25rem; text-align: left; }
  .ritual-copy p { margin-left: 0; }
  .ritual-count { right: var(--gutter); flex-direction: column; align-items: flex-end; gap: 10px; }
  .ritual-n { font-size: clamp(64px, 6vw, 96px); }
}

/* Stacked layouts: room below the loop for the imame and tassel at full breath. */
@media (max-width: 1099px) {
  .ritual-orb { margin-bottom: calc(var(--orb) * .26); }
}

@media (max-width: 767px) {
  .ritual-stage { --orb: min(72vw, 36svh, 300px); gap: 18px; padding-top: 84px; }
  .ritual-title { font-size: clamp(28px, 8vw, 34px); }
  .ritual-copy p { font-size: 16px; }
}

/* Phones held sideways: the ring on the left, count and copy beside it. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1099px) {
  .ritual-stage {
    --orb: 58svh;
    display: grid;
    grid-template-columns: auto minmax(0, 26rem);
    grid-template-rows: auto auto;
    align-content: center;
    justify-content: center;
    column-gap: clamp(28px, 6vw, 64px);
    row-gap: 12px;
    padding: 72px var(--gutter) 20px;
    text-align: left;
  }
  .ritual-orb { grid-row: 1 / 3; }
  .ritual-count { align-self: end; }
  .ritual-copy p { margin-left: 0; font-size: 15px; }
  .ritual-title { font-size: clamp(24px, 6.5svh, 30px); }
}