/* Showcase & Labels shared animations */
:root {
  --reveal-distance: 24px;
}

.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.reveal-up { transform: translateY(var(--reveal-distance)); }
.reveal-left { transform: translateX(calc(-1 * var(--reveal-distance))); }
.reveal-right { transform: translateX(var(--reveal-distance)); }
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible { transform: translate(0, 0); }

/* Subtle scale-in for tiles/cards */
.reveal.scale-in { transform: translateY(16px) scale(0.98); }
.reveal.scale-in.is-visible { transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; transform: none; }
}

/* Safeguard: keep category icons always visible even if reveal class is applied */
.category-icon-main-box,
.category-icon-main-slick {
  opacity: 1 !important;
  transform: none !important;
}
.category-icon-main-box.reveal,
.category-icon-main-slick.reveal {
  transition: none !important;
}

/* Blog section: parent-triggered animations */
.blog-slider-section .blog-card {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-slider-section.blog-animate .blog-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Stagger for first items */
.blog-slider-section.blog-animate .blog-card:nth-child(1) { transition-delay: 60ms; }
.blog-slider-section.blog-animate .blog-card:nth-child(2) { transition-delay: 120ms; }
.blog-slider-section.blog-animate .blog-card:nth-child(3) { transition-delay: 180ms; }
.blog-slider-section.blog-animate .blog-card:nth-child(4) { transition-delay: 240ms; }
.blog-slider-section.blog-animate .blog-card:nth-child(5) { transition-delay: 300ms; }
.blog-slider-section.blog-animate .blog-card:nth-child(6) { transition-delay: 360ms; }

/* Category icon box: parent-triggered animations, avoid slick clones */
.category-icon-main-box .category-icon-main-slide:not(.slick-cloned) {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned) {
  opacity: 1;
  transform: translateY(0);
}
/* Alternate direction for variety */
.category-icon-main-box .category-icon-main-slide:not(.slick-cloned):nth-child(2n) {
  transform: translateX(18px);
}
.category-icon-main-box .category-icon-main-slide:not(.slick-cloned):nth-child(2n+1) {
  transform: translateX(-18px);
}
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(2n),
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(2n+1) {
  transform: translateX(0);
}
/* Stagger the first 10 items */
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(1) { transition-delay: 50ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(2) { transition-delay: 100ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(3) { transition-delay: 150ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(4) { transition-delay: 200ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(5) { transition-delay: 250ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(6) { transition-delay: 300ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(7) { transition-delay: 350ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(8) { transition-delay: 400ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(9) { transition-delay: 450ms; }
.category-icon-main-box.cat-animate .category-icon-main-slide:not(.slick-cloned):nth-child(10) { transition-delay: 500ms; }
