/* ============================================================
   reveal.css — section layering for the stacked-reveal scroll.
   Hero + Work keep the normal flow. Services rises from BEHIND Work
   (a floating rounded card) and fades in; Contact then flows up over
   Services while Services recedes + fades out. Driven by
   js/site-reveal.js. Opaque layers keep the stack clean.
   ============================================================ */

.reveal-mode #work,
.reveal-mode #services,
.reveal-mode #contact { position: relative; }

/* Work sits IN FRONT (higher z) so Services emerges from behind it */
.reveal-mode #work     { z-index: 20; background: var(--pitch); }

/* Services: transparent section (the .services-inner card is the visual).
   Sits BEHIND Work (z10) and scrolls SLOWER (data-speed in HTML). A slight
   negative margin seeds the overlap; the slower scroll then lets Work lift
   off its top as it comes into the clear. */
.reveal-mode #services {
  z-index: 10;
  background: transparent;
  margin-top: -12vh;   /* slight overlap — Work covers the Services card's top */
}

/* Contact sits ON TOP of Services (z30), solid/opaque. Slight overlap so the
   bottom of Services slips underneath it as you scroll up. Thin top feather
   (site.css) softens the seam. */
.reveal-mode #contact {
  z-index: 30;
  background: var(--pitch);
  margin-top: -12vh;
}

/* No section overlap where the receding animation doesn't run (mobile /
   reduced motion) — otherwise layers would just cover each other statically. */
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .reveal-mode #services,
  .reveal-mode #contact { margin-top: 0; }
}