/* Wildlife Categories */
/* ===============================
   CATEGORY HERO SPLIT ANIMATION
================================ */

/* Keep background static */
.category-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* LEFT CONTENT (TEXT) */
.hero-overlay {
  opacity: 0;
  transform: translateX(-120px);
  transition:
    transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1.6s ease;
  will-change: transform, opacity;
}

/* RIGHT CONTENT (SLIDER) */
.category-thumb-swiper {
  opacity: 0;
  transform: translateX(120px);
  transition:
    transform 1.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1.8s ease;
  will-change: transform, opacity;
}

/* ACTIVE STATE */
.category-hero.animate .hero-overlay,
.category-hero.animate .category-thumb-swiper {
  opacity: 1;
  transform: translateX(0);
}

/* Gentle stagger (important) */
.category-hero.animate .category-thumb-swiper {
  transition-delay: 0.25s;
}

/* Mobile: disable motion */
@media (max-width: 768px) {
  .hero-overlay,
  .category-thumb-swiper {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* About */
/* ===============================
   VERTICAL SHRED REVEAL
   (Background + Text)
================================ */

/* Base state (hidden via clip-path) */
.about-hero {
  position: relative;
  overflow: hidden;
}

/* Background overlay reveal */
.about-overlay {
  clip-path: polygon(
    0 100%, 10% 0, 20% 100%, 30% 0,
    40% 100%, 50% 0, 60% 100%,
    70% 0, 80% 100%, 90% 0, 100% 100%
  );
  transition: clip-path 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Text elements – same strip logic */
.about-content h1,
.about-content p,
.about-content .hero-signature {
  opacity: 0;
  transform: translateY(30px);
  clip-path: polygon(
    0 100%, 12% 0, 24% 100%, 36% 0,
    48% 100%, 60% 0, 72% 100%,
    84% 0, 100% 100%
  );
  transition:
    clip-path 1.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.4s ease,
    opacity 1.2s ease;
  will-change: clip-path, transform, opacity;
}

/* Active reveal */
.about-hero.animate .about-overlay {
  clip-path: inset(0 0 0 0);
}

.about-hero.animate .about-content h1 {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  transition-delay: 0.15s;
}

.about-hero.animate .about-content p {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  transition-delay: 0.4s;
}

.about-hero.animate .about-content .hero-signature {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  transition-delay: 0.65s;
}

/* ===============================
   MOBILE SAFETY
================================ */
@media (max-width: 768px) {
  .about-overlay,
  .about-content h1,
  .about-content p,
  .about-content .hero-signature {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ===============================
   BLOG SECTION ANIMATION
================================ */

.blog-section {
  overflow: hidden;
}

/* BLOG HEADER — from TOP */
.blog-header {
  opacity: 0;
  transform: translateY(-80px);
  transition:
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1.2s ease;
  will-change: transform, opacity;
}

/* BLOG SLIDER — from BOTTOM */
.blog-slider-wrapper {
  opacity: 0;
  transform: translateY(100px);
  transition:
    transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1.4s ease;
  will-change: transform, opacity;
}

/* ACTIVE STATE */
.blog-section.animate .blog-header,
.blog-section.animate .blog-slider-wrapper {
  opacity: 1;
  transform: translateY(0);
}

/* Optional stagger for elegance */
.blog-section.animate .blog-slider-wrapper {
  transition-delay: 0.25s;
}

/* ===============================
   MOBILE SAFETY
================================ */
@media (max-width: 768px) {
  .blog-header,
  .blog-slider-wrapper {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* =========================================================
   RESPONSIVE BREAKPOINTS
========================================================= */

/* ======================================
   X-Small (portrait phones)
   < 576px
====================================== */
@media (max-width: 575.98px) {
  /* Disable heavy motion for performance */
  .hero-overlay,
  .category-thumb-swiper,
  .about-overlay,
  .about-content h1,
  .about-content p,
  .about-content .hero-signature,
  .blog-header,
  .blog-slider-wrapper {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* ======================================
   Small (landscape phones / small tablets)
   576px – 768px
====================================== */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* Keep animations but soften distance */
  .hero-overlay {
    transform: translateX(-60px);
  }

  .category-thumb-swiper {
    transform: translateX(60px);
  }

  .blog-header {
    transform: translateY(-40px);
  }

  .blog-slider-wrapper {
    transform: translateY(60px);
  }
}

/* ======================================
   Medium (tablets / small laptops)
   768px – 992px
====================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-overlay {
    transform: translateX(-90px);
  }

  .category-thumb-swiper {
    transform: translateX(90px);
  }

  .blog-header {
    transform: translateY(-60px);
  }

  .blog-slider-wrapper {
    transform: translateY(80px);
  }
}

/* ======================================
   Large (laptops / desktops)
   992px – 1200px
====================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Your original animation distances */
  .hero-overlay {
    transform: translateX(-120px);
  }

  .category-thumb-swiper {
    transform: translateX(120px);
  }

  .blog-header {
    transform: translateY(-80px);
  }

  .blog-slider-wrapper {
    transform: translateY(100px);
  }
}

/* ======================================
   X-Large (large desktops)
   1200px – 1400px
====================================== */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .hero-overlay {
    transform: translateX(-140px);
  }

  .category-thumb-swiper {
    transform: translateX(140px);
  }

  .blog-header {
    transform: translateY(-90px);
  }

  .blog-slider-wrapper {
    transform: translateY(120px);
  }
}

/* ======================================
   XX-Large (ultra-wide screens)
   ≥ 1400px
====================================== */
@media (min-width: 1400px) {
  .hero-overlay {
    transform: translateX(-160px);
  }

  .category-thumb-swiper {
    transform: translateX(160px);
  }

  .blog-header {
    transform: translateY(-100px);
  }

  .blog-slider-wrapper {
    transform: translateY(140px);
  }
}