/* ═══════════════════════════════════════════════════════════
   Textile Hub — Page & Scroll Animations
   ═══════════════════════════════════════════════════════════ */

/* ── Page load fade-in ─────────────────────────────────── */
body { opacity: 0; }
body.th-ready { opacity: 1; transition: opacity .5s ease; }

/* ── Base reveal state (hidden before scroll trigger) ──── */
.th-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
}
.th-reveal.th-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger siblings */
.th-reveal:nth-child(2) { transition-delay: .08s; }
.th-reveal:nth-child(3) { transition-delay: .16s; }
.th-reveal:nth-child(4) { transition-delay: .24s; }
.th-reveal:nth-child(5) { transition-delay: .32s; }
.th-reveal:nth-child(6) { transition-delay: .40s; }
.th-reveal:nth-child(n+7) { transition-delay: .45s; }

/* Directional variants */
.th-reveal-left  { opacity:0; transform:translateX(-40px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.th-reveal-right { opacity:0; transform:translateX(40px);  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.th-reveal-left.th-visible,
.th-reveal-right.th-visible { opacity:1; transform:translateX(0); }

.th-reveal-scale { opacity:0; transform:scale(.92); transition: opacity .55s ease, transform .55s ease; }
.th-reveal-scale.th-visible { opacity:1; transform:scale(1); }

/* ── Navbar entrance ────────────────────────────────────── */
#th-navbar-wrap, .navbar, .header-wrapper, .header-section {
  animation: thNavIn .55s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes thNavIn {
  from { opacity:0; transform:translateY(-20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Hero / Banner entrance ─────────────────────────────── */
.main-slider, .slideshow, .hero-slider, .home-slider,
.collection-banner, .banner-section, .home-banner {
  animation: thHeroIn .75s cubic-bezier(.22,.61,.36,1) .1s both;
}
@keyframes thHeroIn {
  from { opacity:0; transform:scale(1.03); }
  to   { opacity:1; transform:scale(1); }
}


/* ── Brand/category cards ───────────────────────────────── */
.th-card-lift {
  transition: transform .3s ease, box-shadow .3s ease;
}
.th-card-lift:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 14px 36px rgba(0,0,0,.13);
}

/* ── Footer entrance ────────────────────────────────────── */
footer, .footer-section, .footer-wrap {
  animation: thFooterIn .6s ease both;
  animation-play-state: paused;
}
footer.th-visible, .footer-section.th-visible, .footer-wrap.th-visible {
  animation-play-state: running;
}
@keyframes thFooterIn {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Pulse badge (sale/new labels) ─────────────────────── */
.product-labels .lbl {
  animation: thPulseBadge 2.4s ease-in-out infinite;
}
@keyframes thPulseBadge {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* ── Skeleton shimmer on product images before load ─────── */
.blur-up {
  filter: blur(5px);
  transition: filter .4s ease;
}
.blur-up.lazyloaded { filter: blur(0); }

/* ── Responsive tweaks ──────────────────────────────────── */
@media (max-width: 767px) {
  .th-reveal, .th-reveal-left, .th-reveal-right {
    transform: translateY(20px) !important;
  }
}
/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .th-reveal, .th-reveal-left, .th-reveal-right, .th-reveal-scale,
  .th-heading-anim, #th-navbar-wrap, .navbar,
  .main-slider, .slideshow { animation: none !important; transition: none !important; opacity:1 !important; transform:none !important; }
}