/* The lighting reveal (DESIGN 5.2). The CSS default is the FINAL LIT STATE: flat, bright, arch visible.
   A normal-height section: heading, mockup, arch crown peeking out under the mockup's lower third.

   NOTE FOR T5 (motion.js). Only when html.motion-ok is set:
   - #reveal           : set height 260vh (desktop) / 190vh (max-width 720px). Not set here on purpose.
   - .reveal__stage    : pin it (ScrollTrigger pin, or position:sticky; top:0; height:100svh). Not set here.
   - Start (dark) state, applied by JS:
       .sims            opacity .12, filter brightness(.35) saturate(.6), perspective(1400px) rotateX(26deg) scale(.84) translateY(10vh)
       .arch[data-arch=reveal]  yPercent 55, opacity 0; its .arch__bloom scale .6
       .reveal__heading opacity 0, y 24px
       .reveal__wash    opacity 0
   - End = CSS defaults (opacity 1, no transform, no filter). Animate to/from those.
   - Counters: .sims [data-count] (prefix "Rs " is a sibling .sims__unit, so textContent is digits only).
   - Today's bar: .sims__bar--today has transform-origin bottom; tween scaleY 0 -> 1. Its value label .sims__num lives inside it
     (counter-scale it or fade it separately).
   - Chips: .sims__chip--unpaid is coloured by default (ember on tint); tween colour/background from the paid-grey if wanted.
   The stage is position:relative; overflow:hidden; the arch sits at z-index 0, content at z-index 1. */

.reveal {
  position: relative;
  background: var(--bg);
}
.reveal__stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--section-gap) clamp(100px, 11vw, 160px);
}
.reveal__stage .arch { z-index: 0; }
.reveal__stage .arch[data-arch="reveal"] { --arch-crown: clamp(300px, 27vw, 440px); --bloom-w: 80vw; }

/* the warm wash that rises behind everything once the fire is lit */
.reveal__wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: /* taste-skill-ignore: furnace light wash (DESIGN §3) */ radial-gradient(ellipse 90% 60% at 50% 100%, rgba(245, 165, 36, 0.10), transparent 70%);
}

.reveal__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
}
.reveal__heading {
  text-align: center; /* the page's one centred moment */
  max-width: 44rem;
}
.reveal__heading h2 { margin-inline: auto; }
.reveal__sub {
  margin: 24px auto 0;
  max-width: 36em;
  font-size: var(--step-body);
  line-height: 1.5;
}

@media (max-width: 720px) {
  .reveal__stage { padding-bottom: 84px; }
  .reveal__stage .arch[data-arch="reveal"] { --arch-crown: 240px; --bloom-w: 140vw; }
  .reveal__inner { gap: 36px; }
  .reveal__heading h2 { font-size: clamp(2rem, 9vw, 2.5rem); }
}