/* ============================================================
   TRANSITIONS — Page wipe + scroll reveal
   Works with reveal.js (adds both 'revealed' and 'in-view')
   ============================================================ */

/* ─── Page transition overlay ─── */
#page-transition {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-preloader) - 1);
  background: var(--bg);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}

#page-transition.entering {
  transform: scaleY(1);
  transition: transform 0.5s var(--ease-in-out);
  pointer-events: all;
}

#page-transition.leaving {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--ease-in-out);
}

/* ─── Reveal — animate when either class is added ─── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-expo),
              transform 0.9s var(--ease-expo);
}

/* Both old 'revealed' and new 'in-view' trigger the animation */
.reveal.revealed,
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.reveal-delay-1,
.reveal:nth-child(2) { transition-delay: 0.10s; }
.reveal-delay-2,
.reveal:nth-child(3) { transition-delay: 0.20s; }
.reveal-delay-3,
.reveal:nth-child(4) { transition-delay: 0.30s; }
.reveal-delay-4,
.reveal:nth-child(5) { transition-delay: 0.40s; }

/* ─── Grain shift animation ─── */
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2px, 1px); }
  50%  { transform: translate(2px, -1px); }
  75%  { transform: translate(-1px, 2px); }
  100% { transform: translate(0, 0); }
}