/* ==========================================================================
   TAK SPORT - High Performance Lazy Loading & Cinematic Animation System
   Compatible with Desktop, Tablet, and Mobile (Touch-Optimized)
   Supports GSAP 3 + ScrollTrigger with Ultra-Reliable IntersectionObserver Fallback
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hardware Acceleration & Base Performance
   -------------------------------------------------------------------------- */
.lazy-anim-target,
.product-card,
.category-card,
.article-card,
.showcase-card,
.about-stat-box-modern,
.about-pillar-item,
.showroom-card,
.faq-item,
.section-header,
.calc-container,
.final-cta-box {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Ensure no elements are hidden by default CSS if JS fails */
.product-card,
.category-card,
.article-card,
.calc-container {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   2. Pure Fallback (Only used when GSAP is completely absent)
   -------------------------------------------------------------------------- */
html.use-css-fallback .lazy-hidden {
  opacity: 0 !important;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

html.use-css-fallback .lazy-hidden.is-revealed {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

.lazy-img-container {
  position: relative;
  overflow: hidden;
  background-color: rgba(14, 23, 40, 0.5);
  transition: background-color 0.3s ease;
}

[data-theme="light"] .lazy-img-container {
  background-color: rgba(241, 245, 249, 0.6);
}

.lazy-img-container.is-loaded,
.product-card-img-wrap .lazy-img-container,
.product-main-view .lazy-img-container {
  background: transparent !important;
  background-color: transparent !important;
}

/* Shimmer placeholder effect */
.lazy-img-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 210, 255, 0.08) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%);
  animation: lazyShimmer 1.8s infinite;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

[data-theme="light"] .lazy-img-container::before,
body.theme-light .lazy-img-container::before {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 119, 238, 0.08) 50%,
    rgba(0, 0, 0, 0) 100%
  );
}

.lazy-img-container.is-loaded::before {
  opacity: 0;
  animation: none;
}

@keyframes lazyShimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Progressive Image Loading transition - safe against white screen/hidden boxes */
img.lazy-img {
  opacity: 1;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

img.lazy-img.is-loaded {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* --------------------------------------------------------------------------
   4. Dynamic Filtering Animation (Tab Switch Transitions)
   -------------------------------------------------------------------------- */
.product-card.anim-card-entering {
  animation: cardFadeScaleIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cardFadeScaleIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* --------------------------------------------------------------------------
   5. Stat Counter Pulse Glow
   -------------------------------------------------------------------------- */
.about-stat-number.is-counting {
  color: var(--brand-cyan, #00d2ff);
  text-shadow: 0 0 16px rgba(0, 210, 255, 0.5);
  transition: text-shadow 0.3s ease;
}

/* --------------------------------------------------------------------------
   6. Accessibility: prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .category-card,
  .article-card,
  .showcase-card,
  .about-stat-box-modern,
  .about-pillar-item,
  .showroom-card,
  .faq-item,
  .section-header,
  .calc-container,
  .final-cta-box,
  img.lazy-img {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }

  .lazy-img-container::before {
    display: none !important;
  }
}