/* Scroll-reveal: elementen starten onzichtbaar/verschoven, en krijgen
   de klasse "visible" zodra ze in beeld komen (zie IntersectionObserver in JS) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ── LIGHTBOX (gedeeld) ──
   Basisopmaak voor de vergrote-foto-weergave, hergebruikt door foto's,
   schilderijen en gedichten (elke sectie heeft haar eigen lightbox-element in de HTML). */
.lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.93); align-items: center; justify-content: center; flex-direction: column; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 88vw; max-height: 78vh; object-fit: contain; }
.lightbox-close { position: absolute; top: 2rem; right: 2rem; background: none; border: 1px solid rgba(255,255,255,0.3); color: white; width: 44px; height: 44px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.lightbox-close:hover { background: rgba(255,255,255,0.1); }
.lightbox-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 1px solid rgba(255,255,255,0.3); color: white; width: 48px; height: 48px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.lightbox-arrow:hover { background: rgba(255,255,255,0.1); }
.lightbox-arrow-prev { left: 2rem; }
.lightbox-arrow-next { right: 2rem; }
.lightbox-caption { color: var(--off-white); text-align: center; margin-top: 1.2rem; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1rem; }