/* ─── Scroll reveal ──────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

/* ─── Fade in ────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade-in {
  animation: fadeIn var(--dur-slow) var(--ease-out) both;
}

/* ─── Slide up ───────────────────────────────────── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: none; }
}
.slide-up {
  animation: slideUp var(--dur-slow) var(--ease-out) both;
}
.slide-up-delay-1 { animation-delay: 100ms; }
.slide-up-delay-2 { animation-delay: 200ms; }
.slide-up-delay-3 { animation-delay: 300ms; }

/* ─── Image overlay ──────────────────────────────── */
.img-reveal {
  overflow: hidden;
}
.img-reveal img {
  transform: scale(1.08);
  transition: transform 1s var(--ease-out);
}
.img-reveal.visible img {
  transform: scale(1);
}