/* ===============================
   HERO FADE ANIMATION
================================ */

.hero-content {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1.4s ease,
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Active state */
.hero-section.animate .hero-content {
  opacity: 1;
  transform: translateY(0);
}

/* Optional stagger for elegance */
.hero-section.animate .hero-subtitle {
  transition-delay: 0.15s;
}

.hero-section.animate .hero-title {
  transition-delay: 0.3s;
}

.hero-section.animate .hero-breadcrumb {
  transition-delay: 0.45s;
}

/* Mobile safety */
@media (max-width: 768px) {
  .hero-content {
    opacity: 1 !important;
    transform: none !important;
  }
}



/* ===============================
   BIRDS TABS – FLY THROUGH
================================ */

.birds-tabs {
  position: relative;
}

/* Base hidden state */
.birds-tabs .nav-link {
  opacity: 0;
  transform: translateX(-120px) scale(0.96);
  transition:
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1.2s ease;
  will-change: transform, opacity;
}

/* Divider lines */
.birds-divider {
  opacity: 0;
  transform: translateX(-60px);
  transition:
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1s ease;
}

/* Active (fly-in complete) */
.birds-gallery.animate .nav-link {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Stagger tabs (very important for fly feel) */
.birds-gallery.animate .nav-item:nth-child(1) .nav-link {
  transition-delay: 0.1s;
}
.birds-gallery.animate .nav-item:nth-child(2) .nav-link {
  transition-delay: 0.25s;
}
.birds-gallery.animate .nav-item:nth-child(3) .nav-link {
  transition-delay: 0.4s;
}

/* Divider comes last */
.birds-gallery.animate .birds-divider {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.6s;
}

/* ===============================
   MOBILE SAFETY
================================ */
@media (max-width: 768px) {
  .birds-tabs .nav-link,
  .birds-divider {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ===============================
   PHOTO GRID – FLIP ANIMATION
================================ */

.photo-grid {
  overflow: hidden;
}

/* Perspective for 3D effect */
.birds-grid-container {
  perspective: 1200px;
}

/* Base hidden state */
.bird-card {
  opacity: 0;
  transform: rotateY(90deg) scale(0.96);
  transform-origin: center;
  transition:
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1s ease;
  will-change: transform, opacity;
}

/* Active state */
.photo-grid.animate .bird-card {
  opacity: 1;
  transform: rotateY(0deg) scale(1);
}

/* ===============================
   STAGGER (NATURAL FLOW)
================================ */
.photo-grid.animate .bird-card:nth-of-type(1) { transition-delay: 0.1s; }
.photo-grid.animate .bird-card:nth-of-type(2) { transition-delay: 0.2s; }
.photo-grid.animate .bird-card:nth-of-type(3) { transition-delay: 0.3s; }
.photo-grid.animate .bird-card:nth-of-type(4) { transition-delay: 0.4s; }
.photo-grid.animate .bird-card:nth-of-type(5) { transition-delay: 0.5s; }
.photo-grid.animate .bird-card:nth-of-type(6) { transition-delay: 0.6s; }
.photo-grid.animate .bird-card:nth-of-type(7) { transition-delay: 0.7s; }
.photo-grid.animate .bird-card:nth-of-type(8) { transition-delay: 0.8s; }

/* ===============================
   MOBILE SAFETY
================================ */
@media (max-width: 768px) {
  .bird-card {
    opacity: 1 !important;
    transform: none !important;
  }
}