/* =============================================================================
   SCROLL REVEAL
   Controls the hidden and shown states for all scroll-revealed elements.

   JS (scroll.js) adds/removes these classes via IntersectionObserver:
     .scroll-hidden           — base hidden state (opacity 0, no transform)
     .scroll-hidden.up        — about to reveal from above (translateY(-2rem))
     .scroll-hidden.down      — about to reveal from below (translateY(2rem))
     .scroll-hidden.show      — revealed state (opacity 1, translateY(0))

   To opt a new block in: add class="scroll-hidden" to its outermost element.
   To opt a block out: simply don't add the class.
   ============================================================================= */

/* ── Base hidden state ────────────────────────────────────────────────────── */
.scroll-hidden {
  opacity: 0;
  transition:
    opacity var(--duration-reveal) var(--ease-default),
    transform var(--duration-reveal) var(--ease-default);
}

/* ── Direction — set before .show is added, drives the slide direction ─────── */
.scroll-hidden.down {
  transform: translateY(2rem);
}

.scroll-hidden.up {
  transform: translateY(-2rem);
}

/* ── Shown state ──────────────────────────────────────────────────────────── */
.scroll-hidden.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Grid areas — opacity only, no translateY (parallax owns the transform) ── */
.grid-area.scroll-hidden {
  transition: opacity var(--duration-reveal) var(--ease-default);
}

.grid-area.scroll-hidden.down,
.grid-area.scroll-hidden.up {
  transform: none;
}

.grid-area.scroll-hidden.show {
  opacity: 1;
  transform: none;
}