/* ════════════════════════════════════════════════════════════
   PAGE TRANSITIONS — The Gentle Studio
   Curtain overlay that covers on exit, reveals on entry
   ════════════════════════════════════════════════════════════ */

.page-transition {
  position: fixed;
  top: 66px; left: 0; right: 0; bottom: 0;
  z-index: 99; /* below nav (z-index: 100) so nav stays visible */
  background: var(--color-bg);
  pointer-events: none;
}

/* ── Entry: page just loaded, overlay fades out to reveal ── */
.page-transition.entering {
  animation: transitionFadeOut 1.1s ease-out forwards;
}

@keyframes transitionFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Exit: link clicked, overlay fades in to cover ── */
.page-transition.exiting {
  animation: transitionFadeIn 0.6s ease-in forwards;
}

@keyframes transitionFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ── Graceful image fade-in ─────────────────────────────────
   Prevents images from "popping" in after the overlay reveals.
   Scoped to page content areas — not homepage cards (which
   have their own opacity management). ─────────────────────── */
#pageContent img,
.project-page img {
  opacity: 0;
  transition: opacity 0.5s ease;
}
#pageContent img.img-loaded,
.project-page img.img-loaded {
  opacity: 1;
}