/* ============================================================
   Gallery Scroll Pop-In Animation
   Items pop in as they enter the viewport (scroll down)
   and slide back out as they leave (scroll up)
   ============================================================ */

/* --- Base hidden state (before animation) --- */
.gallery-item-nb {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* --- Visible / popped-in state --- */
.gallery-item-nb.g-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --- Exiting upward (scroll-up, item leaves top of viewport) --- */
.gallery-item-nb.g-exit-up {
  opacity: 0;
  transform: translateY(-30px) scale(0.97);
  transition:
    opacity 0.30s cubic-bezier(0.55, 0, 1, 0.45),
    transform 0.30s cubic-bezier(0.55, 0, 1, 0.45);
}

/* --- Staggered entry delays — creates a wave/cascade effect --- */
.gallery-item-nb:nth-child(3n+1) { transition-delay: 0ms; }
.gallery-item-nb:nth-child(3n+2) { transition-delay: 70ms; }
.gallery-item-nb:nth-child(3n)   { transition-delay: 140ms; }

/* Remove delay when exiting so it feels snappy */
.gallery-item-nb.g-exit-up {
  transition-delay: 0ms !important;
}

/* --- Recent Projects cards (rp-card) --- */
.rp-card {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.rp-card.g-visible {
  opacity: 1;
  transform: translateY(0);
}

.rp-card.g-exit-up {
  opacity: 0;
  transform: translateY(-24px);
  transition:
    opacity 0.28s ease-in,
    transform 0.28s ease-in;
  transition-delay: 0ms !important;
}

.rp-card:nth-child(2) {
  transition-delay: 100ms;
}

/* Override the existing filtered-in animation so our JS controls state */
.gallery-item-nb.filtered-in {
  animation: none !important;
}