/* ============================================================
   AMALAB — vp-reveal.css
   Pinned-hero cover reveal (Daylight hero→section-1), applied site-wide.

   The hero pins (sticky) and stays exactly as it is. The first section sits
   above it in the stacking order with an opaque surface and rises up over the
   pinned hero as you scroll — "the bar rises a bit." A single progress
   variable (--p, 0→1, set by JS) adds a small parallax lift so the rising
   content settles rather than snaps.

   Works for both hero types: the home `.hero` (full navy band) and the
   interior `.page-hero` (compact light band, promoted to a full-viewport
   pinned hero here). Mark up any page as:
     <div class="reveal-scene">
       <section class="hero|page-hero reveal-hero"> … </section>
       <section class="section[ --alt|--navy] reveal-cover"> … </section>
     </div>

   Gated on `.reveal-scene.is-active` — a class JS adds only when motion is
   allowed and the viewport is large enough. Without JS, without the class, or
   under reduced motion, the hero and section are plain stacked bands: the hero
   scrolls away and the section follows in normal flow.

   V8: the pinned hero stays visually fixed. Only its text content fades
   progressively, leaving the background and lattice crisp throughout.
   ============================================================ */

.reveal-scene { position: relative; }

/* Hero holds in place while the section rises over it.
   It fills exactly the viewport below the sticky nav so, on arrival, nav +
   hero = one full screen with nothing cut off; it pins there while scrolling.
   As the cover rises, only the text inside the hero yields attention. */
.reveal-scene.is-active .reveal-hero {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  z-index: 0;
}
.reveal-scene.is-active .reveal-hero > .container {
  opacity: calc(1 - var(--p, 0));
  will-change: opacity;
}
/* Interior page heroes are compact bands by default; as a pinned reveal-hero
   they fill the viewport, so drop the band padding/rule and let flex centre it. */
.reveal-scene.is-active .reveal-hero.page-hero {
  padding-block: 0;
  border-bottom: none;
}

/* The section is the opaque cover that rises over the pinned hero. It is at
   least as tall as the pinned hero so it always fully covers it (never a
   peeking seam); its content stays top-aligned with the standard section
   rhythm (title at --section-y), not floating in the vertical centre.
   The background is forced opaque and matched to the section's own variant so
   the page design is unchanged — only the stacking/opacity is added. */
.reveal-scene.is-active .reveal-cover {
  position: relative;
  z-index: 1;
  min-height: calc(100svh - var(--nav-h));
  background: var(--bg);
  /* Soft upward shadow so the rising edge reads as a panel lifting over the
     hero — essential on same-tone (paper-over-paper) interior pages, subtle
     enough to stay within the hairline-first depth budget elsewhere. */
  box-shadow: 0 -12px 28px rgba(10, 26, 32, 0.07);
}
.reveal-scene.is-active .reveal-cover.section--alt { background: var(--bg-alt); }
.reveal-scene.is-active .reveal-cover.section--navy,
.reveal-scene.is-active .reveal-cover.section--deep { background: var(--navy); }

.reveal-scene.is-active .reveal-cover > .container { width: 100%; }

/* Reduced motion: no pin, no lift, no fade — plain stacked flow. */
@media (prefers-reduced-motion: reduce) {
  .reveal-scene.is-active .reveal-hero {
    position: static;
    height: auto;
    min-height: calc(100svh - var(--nav-h));
    display: block;
  }
  .reveal-scene.is-active .reveal-hero > .container {
    opacity: 1;
    will-change: auto;
  }
  .reveal-scene.is-active .reveal-cover {
    min-height: 0;
  }
}