/* MODE3 site v5 · the three ritual stages, lifted from css/site.css (v3, mission 38). js/ritual.js owns them. */
.rit {
  --rit-ink: #f2efe9;
  --rit-dim: rgba(242, 239, 233, 0.44);
  --rit-body: rgba(242, 239, 233, 0.6);
  --rit-accent: #9fe6d3;
  --band-w: 114vw; --band-top: 41svh;
  position: relative;
  width: 100vw;
  margin: clamp(3rem, 9vh, 6rem) 0 clamp(3rem, 9vh, 6rem) calc(50% - 50vw);
  color: var(--rit-ink);
}
.rit--perform { --rit-accent: #ffd400; margin-bottom: 0; }
.rit--unwind { --rit-accent: #b88ad0; } /* #ba40ee, dimmed */
/* the way in and the way out of the dark */
.rit::before, .rit::after { content: ""; display: block; height: 12vh; pointer-events: none; }
.rit::before { background: linear-gradient(to bottom, var(--sky), #06070a); }
.rit::after { background: linear-gradient(to bottom, #06070a, var(--sky)); }
html.ritual .rit::after { background: linear-gradient(to bottom, rgb(20, 23, 29), var(--sky)); }

.rit-track { position: relative; }
.rit-stage { position: relative; width: 100%; overflow: hidden; overflow: clip; background: #06070a; padding-bottom: 3.5rem; }
.rit-bg { position: absolute; inset: 0; background: radial-gradient(118% 78% at 50% 33%, rgb(14, 16, 22), rgb(6, 7, 10) 70%); }
.rit-space { position: relative; left: 50%; transform: translateX(-50%); width: min(var(--band-w), 34rem); aspect-ratio: 900 / 1300; }
.rit-space img, .rit-shot { position: absolute; display: block; max-width: none; }
.rit-scrim, .rit-cue { display: none; }
.rit-copy { position: relative; padding: 0 22px; max-width: 34rem; margin-inline: auto; margin-top: -14%; }
.rit-beat + .rit-beat { margin-top: 3rem; }
.rit-tag {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--rit-accent); margin-bottom: 11px;
}
.rit-h {
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.4rem, 6.1vw, 3.5rem); line-height: 0.96; letter-spacing: -0.032em;
}
.rit-h em { font-style: normal; color: var(--rit-dim); }
.rit-p { margin-top: 13px; max-width: 31ch; font-size: 0.875rem; line-height: 1.5; color: var(--rit-body); }
.rit-lock { display: flex; align-items: baseline; gap: 12px; margin-bottom: 15px; }
.rit-lock b { font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.3em; color: var(--rit-accent); }
.rit-lock span { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.26em; color: var(--rit-body); }

/* the sticky stage */
html.ritual .rit-track { height: 360vh; }
html.ritual .rit-stage { position: sticky; top: 0; height: 100svh; padding-bottom: 0; }
html.ritual .rit-space { position: absolute; left: 50%; top: var(--band-top); transform: translate(-50%, -50%); width: var(--band-w); }
html.ritual .rit-scrim {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 42svh; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 7, 10, 0) 0%, rgba(6, 7, 10, 0.8) 32%, rgba(6, 7, 10, 0.97) 60%);
}
html.ritual .rit-copy {
  position: absolute; left: 0; right: 0; top: 68svh; bottom: 0; max-width: none; margin: 0;
  padding: 0 22px calc(26px + env(safe-area-inset-bottom, 0px));
}
html.ritual .rit-beat { position: absolute; left: 22px; right: 22px; top: 0; margin: 0; opacity: 0; transform: translateY(var(--rise, 16px)); }
html.ritual .rit-cue {
  display: block; position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.3em; color: rgba(242, 239, 233, 0.3);
  transition: opacity 0.4s ease;
}

/* on the glass: the PRIME streak and the UNWIND mist share the render
   band's box, but fixed to the screen. Hidden whenever they are clear. */
.rit-wet, .rit-mist {
  position: fixed; left: 50%; top: 41svh; transform: translate(-50%, -50%);
  width: 114vw; aspect-ratio: 900 / 1300;
  z-index: 6; pointer-events: none;
}
.rit-wet { opacity: 0; }
.rit-wet svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.rit-mist canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.rit-mist {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 78%, transparent 100%);
}
.rit-veil { position: fixed; inset: 0; z-index: 5; pointer-events: none; background: rgb(228, 220, 244); opacity: 0; }
.rit-wet[hidden], .rit-mist[hidden], .rit-veil[hidden] { display: none; }

@media (min-width: 820px) and (orientation: landscape) {
  .rit { --band-w: 62vw; --band-top: 50svh; }
  .rit-wet, .rit-mist { width: 62vw; top: 50svh; left: 36%; }
  html.ritual .rit-space { left: 36%; }
  /* wide screens show the left and right edge of the render band: both the
     render and the mist fade out there instead of ending on a hard line */
  html.ritual .rit-space {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 86%, transparent 100%);
  }
  .rit-mist {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 78%, transparent 100%), linear-gradient(to right, transparent 0, #000 12%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 78%, transparent 100%), linear-gradient(to right, transparent 0, #000 12%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  html.ritual .rit-scrim { display: none; }
  html.ritual .rit-copy { left: 60%; right: 6%; top: 0; bottom: 0; padding: 0; }
  html.ritual .rit-beat { left: 0; right: 0; top: 50%; transform: translateY(calc(-50% + var(--rise, 16px))); }
  .rit-h { font-size: clamp(1.6rem, 2.3vw, 3.2rem); }
  .rit-p { font-size: 0.9375rem; max-width: 34ch; }
}

/* the page chrome over a dark band: the header takes the stage's dark and
   the site clock keeps running in light ink, so the day carries on through
   the stage; the two corner chips rest while the band owns the bottom of
   the screen */
html.rit-hud .hud {
  --ink: #f2efe9; --ink-2: #f2efe9;
  /* the state label in its bright form: the daylight accent is solved for a
     light page and would sink into the dark stage */
  color: #f2efe9;
  /* no bar: the wordmark sits on the stage itself, so the fog can reach the top edge */
  background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.rit-on .enter-cta, html.rit-on .enter-cta.on,
html.rit-on .fieldnote, html.rit-on .fieldnote.on { opacity: 0; pointer-events: none; }

/* ================================================================
   MISSIONS 39-42 · THE GAMES
   IGNITE (PRIME), HOLD (PERFORM) and TEN (UNWIND) are standalone pages