/* =========================================================
   TABS WELLNESS — ANIMATIONS
   Works with AOS (data-aos attributes) + custom CSS transitions.
   Respects prefers-reduced-motion throughout.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Hero entrance ---------- */
@keyframes tabsFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tabsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tabsSparkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50%      { opacity: .6; transform: scale(1.15) rotate(12deg); }
}
@keyframes tabsShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.hero-copy h1{ animation: tabsFadeUp .7s ease both; }
.hero-copy p{ animation: tabsFadeUp .7s ease .1s both; }
.hero-actions{ animation: tabsFadeUp .7s ease .2s both; }
.hero-media{ animation: tabsFadeIn 1s ease .15s both; }
.hero-copy h1 .spark{ display:inline-block; animation: tabsSparkle 2.4s ease-in-out infinite; }

/* ---------- Card / tile hover polish ---------- */
.product-card, .category-tile, .collection-card, .why-item, .journey-step,
.learn-card, .testimonial-card, .blog-card, .form-card{
  transition: transform .28s cubic-bezier(.22,1,.36,1), border-color .2s ease, box-shadow .28s ease;
}
.product-card:hover{ box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.category-tile:hover .ct-icon{ transform: scale(1.08); }
.ct-icon{ transition: transform .3s ease; }
.collection-card:hover img{ transform: scale(1.06); }
.collection-card img{ transition: transform .5s cubic-bezier(.22,1,.36,1); }
.blog-card:hover, .learn-card:hover{ transform: translateY(-4px); border-color: var(--tabs-gold-dim); }
.blog-card-media img, .learn-media{ transition: transform .5s ease; }
.blog-card:hover .blog-card-media img{ transform: scale(1.05); }

/* Product image zoom on hover, contained by card overflow */
.product-card .pc-media{ overflow:hidden; }
.product-card .pc-media img{ transition: transform .45s cubic-bezier(.22,1,.36,1); }
.product-card:hover .pc-media img{ transform: scale(1.07); }

/* ---------- Buttons ---------- */
.btn{ position:relative; overflow:hidden; transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; }
.btn-primary:hover{ box-shadow: 0 6px 20px rgba(201,163,86,.35); }
.btn:active{ transform: scale(.97); }
.btn-primary::after{
  content:''; position:absolute; inset:0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-120%); transition: transform .6s ease;
}
.btn-primary:hover::after{ transform: translateX(120%); }

/* Add-to-cart micro bounce */
.pc-addcart{ transition: opacity .18s ease, transform .18s ease, background .18s ease; }
.pc-addcart:active{ transform: scale(.9); }
.pc-addcart:hover{ transform: scale(1.08); }

/* ---------- Nav dropdown polish (refines existing .18s transitions) ---------- */
.primary-nav .sub-menu{ transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }

/* ---------- Skeleton shimmer for slow-loading images (optional utility) ---------- */
.img-skeleton{
  background: linear-gradient(90deg, var(--tabs-surface) 25%, var(--tabs-surface-2) 50%, var(--tabs-surface) 75%);
  background-size: 200% 100%;
  animation: tabsShimmer 1.4s ease-in-out infinite;
}

/* ---------- Star rating fill-in on view (used with AOS) ---------- */
[data-aos="tabs-stars"]{ opacity:0; transform: scale(.9); }
[data-aos="tabs-stars"].aos-animate{ opacity:1; transform: scale(1); transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }

/* ---------- FAQ accordion smooth open ---------- */
.faq-answer{
  max-height:0; padding-top:0; padding-bottom:0; overflow:hidden;
  transition: max-height .35s ease, padding .35s ease;
}
.faq-item.open .faq-answer{ max-height:400px; padding-bottom:18px; display:block; }
.faq-question .chevron{ transition: transform .3s ease; }

/* ---------- Page load fade (body-level, subtle) ---------- */
body{ animation: tabsFadeIn .35s ease; }

/* ---------- Mobile nav slide ---------- */
.primary-nav.nav-open{ animation: tabsFadeUp .25s ease both; }