/* ============================================================
   animations.css — Renuce Premium Fashion Store
   ============================================================
   Load order: last stylesheet (overrides nothing, only adds).

   Sections:
   1.  CSS custom properties (animation tokens)
   2.  Keyframe definitions
   3.  Reusable utility classes
   4.  Scroll-reveal  (.animate-on-scroll / .is-visible)
   5.  Hero slide animations
   6.  Product card micro-interactions
   7.  Skeleton shimmer
   8.  Toast enter / exit
   9.  Cart sidebar slide-in
   10. Search overlay fade
   11. Modal scale-in
   12. Announcement bar slide
   13. Back-to-top pulse
   14. WhatsApp ring pulse
   15. Page-load sequence
   16. Reduced-motion overrides  (always last)
   ============================================================ */


/* ─────────────────────────────────────────────
   1. ANIMATION TOKENS
───────────────────────────────────────────── */

:root {
  /* Durations */
  --dur-instant  : 80ms;
  --dur-fast     : 160ms;
  --dur-normal   : 280ms;
  --dur-slow     : 480ms;
  --dur-lazy     : 700ms;
  --dur-hero     : 900ms;

  /* Easings — named for intent */
  --ease-out-expo   : cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back   : cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-expo    : cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out     : cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring     : cubic-bezier(0.22, 1.2, 0.36, 1);

  /* Delays for stagger groups */
  --stagger-1  : 0ms;
  --stagger-2  : 60ms;
  --stagger-3  : 120ms;
  --stagger-4  : 180ms;
  --stagger-5  : 240ms;
  --stagger-6  : 300ms;
}


/* ─────────────────────────────────────────────
   2. KEYFRAMES
───────────────────────────────────────────── */

/* ── Generic fades ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Slide variants (for hero content, toasts, drawers) ── */
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideDownFade {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideLeftFade {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideRightFade {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Cart / search / mobile-nav drawer ── */
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* ── Modal scale ── */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

@keyframes scaleOut {
  from { opacity: 1; transform: scale(1)    translateY(0); }
  to   { opacity: 0; transform: scale(0.94) translateY(12px); }
}

/* ── Skeleton loading shimmer ── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

/* ── WhatsApp ring pulse ── */
@keyframes waPulse {
  0%   { transform: scale(1);    opacity: 0.6; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* ── Back-to-top bounce-in ── */
@keyframes bounceIn {
  0%   { opacity: 0; transform: translateY(20px) scale(0.8); }
  60%  { transform: translateY(-6px) scale(1.05); }
  80%  { transform: translateY(3px)  scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Announcement bar items ── */
@keyframes announceFadeSlide {
  0%   { opacity: 0; transform: translateY(8px); }
  15%  { opacity: 1; transform: translateY(0); }
  85%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* ── Hero text reveal (used via data-anim attributes) ── */
@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Subtle image pan on hero (Ken Burns lite) ── */
@keyframes heroPan {
  0%   { transform: scale(1.06) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, -1%); }
}

/* ── Star rating fill ── */
@keyframes starPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1);   opacity: 1; }
}

/* ── Spinner ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Ripple (add-to-cart button feedback) ── */
@keyframes ripple {
  0%   { transform: scale(0);    opacity: 0.35; }
  100% { transform: scale(4);    opacity: 0; }
}

/* ── Checkmark draw (success states) ── */
@keyframes drawCheck {
  from { stroke-dashoffset: 60; }
  to   { stroke-dashoffset: 0; }
}

/* ── Number counter (cart badge update) ── */
@keyframes badgePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}


/* ─────────────────────────────────────────────
   3. REUSABLE UTILITY ANIMATION CLASSES
───────────────────────────────────────────── */

.anim-fade-in {
  animation: fadeIn var(--dur-normal) var(--ease-out-expo) both;
}

.anim-slide-up {
  animation: slideUpFade var(--dur-slow) var(--ease-out-expo) both;
}

.anim-slide-down {
  animation: slideDownFade var(--dur-normal) var(--ease-out-expo) both;
}

.anim-scale-in {
  animation: scaleIn var(--dur-normal) var(--ease-out-back) both;
}

/* Stagger helpers — apply to children */
.anim-stagger > *:nth-child(1) { animation-delay: var(--stagger-1); }
.anim-stagger > *:nth-child(2) { animation-delay: var(--stagger-2); }
.anim-stagger > *:nth-child(3) { animation-delay: var(--stagger-3); }
.anim-stagger > *:nth-child(4) { animation-delay: var(--stagger-4); }
.anim-stagger > *:nth-child(5) { animation-delay: var(--stagger-5); }
.anim-stagger > *:nth-child(6) { animation-delay: var(--stagger-6); }

/* Spinner utility */
.anim-spin {
  animation: spin 0.75s linear infinite;
  display: inline-block;
}


/* ─────────────────────────────────────────────
   4. SCROLL REVEAL  (.animate-on-scroll)
   JS in main.js adds .is-visible via IntersectionObserver
───────────────────────────────────────────── */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered reveal for grid children */
.animate-on-scroll:nth-child(2) { transition-delay: 60ms; }
.animate-on-scroll:nth-child(3) { transition-delay: 120ms; }
.animate-on-scroll:nth-child(4) { transition-delay: 180ms; }
.animate-on-scroll:nth-child(5) { transition-delay: 240ms; }
.animate-on-scroll:nth-child(6) { transition-delay: 300ms; }

/* Trust strip items get a lateral slide */
.trust-strip__item.animate-on-scroll {
  transform: translateY(16px);
}

/* Category cards get a slight scale */
.cat-card.animate-on-scroll {
  transform: translateY(20px) scale(0.98);
  transition:
    opacity   var(--dur-lazy) var(--ease-out-expo),
    transform var(--dur-lazy) var(--ease-out-expo);
}

.cat-card.animate-on-scroll.is-visible {
  transform: translateY(0) scale(1);
}

/* Testimonials slide in from slightly different angle */
.testimonial-card.animate-on-scroll {
  transform: translateY(20px);
  transition-duration: var(--dur-slow);
}


/* ─────────────────────────────────────────────
   5. HERO SLIDE ANIMATIONS
───────────────────────────────────────────── */

/* Image pan only on active slide */
.hero__slide--active .hero__img {
  animation: heroPan 8s var(--ease-in-out) forwards;
}

/* Slide transitions */
.hero__slide {
  transition: opacity var(--dur-slow) var(--ease-in-out);
}

/* Hero text content — driven by data-anim + data-delay attributes
   JS in main.js reads these; we define the animation here */
[data-anim="slide-up"] {
  opacity: 0;
  animation: heroSlideUp var(--dur-hero) var(--ease-out-expo) both;
}

/* Build delays from data-delay attribute via inline style fallback */
.hero__slide--active [data-delay="0"]   { animation-delay: 0ms; }
.hero__slide--active [data-delay="80"]  { animation-delay: 80ms; }
.hero__slide--active [data-delay="160"] { animation-delay: 160ms; }
.hero__slide--active [data-delay="240"] { animation-delay: 240ms; }
.hero__slide--active [data-delay="320"] { animation-delay: 320ms; }

/* Scroll cue line bounce */
.hero__scroll-line {
  animation: scrollLineDrop 2s var(--ease-out-expo) 1.5s both infinite;
}

@keyframes scrollLineDrop {
  0%   { transform: scaleY(0); transform-origin: top;    opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top;    opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* Hero dot active state transition */
.hero__dot {
  transition: transform var(--dur-fast) var(--ease-out-back),
              background-color var(--dur-fast) var(--ease-in-out),
              width var(--dur-normal) var(--ease-out-expo);
}

.hero__dot--active {
  transform: scale(1.2);
}

/* Hero arrow buttons */
.hero__arrow {
  transition: transform var(--dur-fast) var(--ease-out-back),
              opacity   var(--dur-fast) var(--ease-in-out),
              background-color var(--dur-fast) var(--ease-in-out);
}

.hero__arrow:hover { transform: scale(1.1); }
.hero__arrow:active { transform: scale(0.94); }


/* ─────────────────────────────────────────────
   6. PRODUCT CARD MICRO-INTERACTIONS
───────────────────────────────────────────── */

/* Card lift on hover */
.product-card {
  transition: transform var(--dur-normal) var(--ease-out-expo),
              box-shadow var(--dur-normal) var(--ease-out-expo);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

/* Image scale — handled by JS hover for two-image swap;
   this is the CSS fallback when no second image exists */
.product-card__img {
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.product-card:hover .product-card__img {
  transform: scale(1.04);
}

/* Action buttons (wishlist / quick-view) fade up on card hover */
.product-card__actions {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity  var(--dur-normal) var(--ease-out-expo),
              transform var(--dur-normal) var(--ease-out-expo);
}

.product-card:hover .product-card__actions,
.product-card:focus-within .product-card__actions {
  opacity: 1;
  transform: translateY(0);
}

/* Individual action buttons stagger */
.product-card__action-btn:nth-child(2) {
  transition-delay: 40ms;
}

/* Wishlist active state */
.product-card__wishlist {
  transition: transform var(--dur-fast) var(--ease-out-back),
              color     var(--dur-fast) var(--ease-in-out);
}

.product-card__wishlist:hover,
.product-card__wishlist.is-active {
  transform: scale(1.2);
}

/* Add-to-cart button ripple */
.product-card__atc {
  position: relative;
  overflow: hidden;
}

.product-card__atc::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

.product-card__atc:active::after {
  animation: ripple var(--dur-slow) var(--ease-out-expo) forwards;
}

/* Badge pop */
.product-card__badge {
  animation: slideDownFade var(--dur-normal) var(--ease-out-back) both;
}

/* Cart badge update animation */
#cartBadge.badge--updated,
[data-wishlist-badge].badge--updated {
  animation: badgePop var(--dur-normal) var(--ease-out-back);
}


/* ─────────────────────────────────────────────
   7. SKELETON SHIMMER
───────────────────────────────────────────── */

.product-skeleton__img,
.product-skeleton__line {
  background: linear-gradient(
    90deg,
    var(--color-bg-subtle, #f0f0f0) 25%,
    var(--color-bg-muted,  #e0e0e0) 50%,
    var(--color-bg-subtle, #f0f0f0) 75%
  );
  background-size: 600px 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
}

/* Stagger skeleton rows so they don't all flash in sync */
.product-skeleton:nth-child(2) .product-skeleton__img { animation-delay: 0.1s; }
.product-skeleton:nth-child(3) .product-skeleton__img { animation-delay: 0.2s; }
.product-skeleton:nth-child(4) .product-skeleton__img { animation-delay: 0.3s; }


/* ─────────────────────────────────────────────
   8. TOAST NOTIFICATIONS
───────────────────────────────────────────── */

.toast {
  /* Start state — JS adds .toast--visible */
  opacity: 0;
  transform: translateX(110%);
  transition:
    opacity   var(--dur-normal) var(--ease-out-expo),
    transform var(--dur-normal) var(--ease-out-expo);
}

.toast--visible {
  opacity: 1;
  transform: translateX(0);
}

.toast--hiding {
  opacity: 0;
  transform: translateX(110%);
  transition:
    opacity   var(--dur-fast) var(--ease-in-expo),
    transform var(--dur-fast) var(--ease-in-expo);
}

/* Close button */
.toast__close {
  transition: opacity var(--dur-fast) var(--ease-in-out),
              transform var(--dur-fast) var(--ease-out-back);
}

.toast__close:hover {
  opacity: 0.7;
  transform: rotate(90deg);
}


/* ─────────────────────────────────────────────
   9. CART SIDEBAR
───────────────────────────────────────────── */

/* Backdrop */
.cart-sidebar__backdrop {
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-in-out);
  pointer-events: none;
}

.cart-sidebar--open .cart-sidebar__backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Panel */
.cart-sidebar__panel {
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.cart-sidebar--open .cart-sidebar__panel {
  transform: translateX(0);
}

/* Individual cart items slide in */
.cart-item {
  animation: slideLeftFade var(--dur-normal) var(--ease-out-expo) both;
}

/* Qty buttons */
.cart-item__qty-btn {
  transition: transform var(--dur-fast) var(--ease-out-back),
              background-color var(--dur-fast) var(--ease-in-out);
}

.cart-item__qty-btn:hover  { transform: scale(1.15); }
.cart-item__qty-btn:active { transform: scale(0.9);  }

/* Remove button */
.cart-item__remove {
  transition: color     var(--dur-fast) var(--ease-in-out),
              transform var(--dur-fast) var(--ease-out-back);
}

.cart-item__remove:hover {
  transform: scale(1.15);
}

/* Coupon chevron rotate */
.coupon-toggle__chevron {
  transition: transform var(--dur-normal) var(--ease-in-out);
}

.cart-sidebar__coupon-toggle[aria-expanded="true"] .coupon-toggle__chevron {
  transform: rotate(180deg);
}

/* Coupon form collapse */
.cart-sidebar__coupon-form {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-normal) var(--ease-out-expo);
}

.cart-sidebar__coupon-form:not([hidden]) {
  max-height: 120px;
}


/* ─────────────────────────────────────────────
   10. SEARCH OVERLAY
───────────────────────────────────────────── */

.search-overlay__backdrop {
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-in-out);
  pointer-events: none;
}

.search-overlay--open .search-overlay__backdrop {
  opacity: 1;
  pointer-events: auto;
}

.search-overlay__panel {
  opacity: 0;
  transform: translateY(-16px);
  transition:
    opacity   var(--dur-normal) var(--ease-out-expo),
    transform var(--dur-normal) var(--ease-out-expo);
  pointer-events: none;
}

.search-overlay--open .search-overlay__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Search result items stagger */
.search-result-item {
  animation: slideUpFade var(--dur-normal) var(--ease-out-expo) both;
}

.search-result-item:nth-child(2) { animation-delay: 40ms; }
.search-result-item:nth-child(3) { animation-delay: 80ms; }
.search-result-item:nth-child(4) { animation-delay: 120ms; }
.search-result-item:nth-child(5) { animation-delay: 160ms; }
.search-result-item:nth-child(6) { animation-delay: 200ms; }

/* Search tag chips hover */
.search-tag,
.search-cat-link {
  transition: transform var(--dur-fast) var(--ease-out-back),
              background-color var(--dur-fast) var(--ease-in-out),
              color var(--dur-fast) var(--ease-in-out);
}

.search-tag:hover,
.search-cat-link:hover {
  transform: translateY(-2px);
}


/* ─────────────────────────────────────────────
   11. QUICK VIEW MODAL
───────────────────────────────────────────── */

.modal__backdrop {
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-in-out);
  pointer-events: none;
}

.modal--open .modal__backdrop {
  opacity: 1;
  pointer-events: auto;
}

.modal__panel {
  opacity: 0;
  transform: scale(0.93) translateY(20px);
  transition:
    opacity   var(--dur-normal) var(--ease-out-expo),
    transform var(--dur-normal) var(--ease-out-back);
  pointer-events: none;
}

.modal--open .modal__panel {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* Variant button hover */
.variant-btn {
  transition: transform var(--dur-fast) var(--ease-out-back),
              border-color var(--dur-fast) var(--ease-in-out),
              background-color var(--dur-fast) var(--ease-in-out);
}

.variant-btn:hover:not(:disabled) { transform: translateY(-2px); }
.variant-btn--active { transform: translateY(-2px); }


/* ─────────────────────────────────────────────
   12. ANNOUNCEMENT BAR
───────────────────────────────────────────── */

.announcement-bar__item {
  opacity: 0;
  transition: opacity var(--dur-normal) var(--ease-in-out);
  pointer-events: none;
}

.announcement-bar__item--active {
  opacity: 1;
  pointer-events: auto;
}

.announcement-bar__close {
  transition: transform var(--dur-fast) var(--ease-out-back),
              opacity   var(--dur-fast) var(--ease-in-out);
}

.announcement-bar__close:hover {
  transform: rotate(90deg);
  opacity: 0.7;
}


/* ─────────────────────────────────────────────
   13. BACK TO TOP
───────────────────────────────────────────── */

.back-to-top {
  transition: opacity   var(--dur-normal) var(--ease-out-expo),
              transform var(--dur-normal) var(--ease-out-back);
}

.back-to-top:not([hidden]) {
  animation: bounceIn var(--dur-slow) var(--ease-out-back) both;
}

.back-to-top:hover  { transform: translateY(-4px) scale(1.08); }
.back-to-top:active { transform: translateY(0)    scale(0.94); }


/* ─────────────────────────────────────────────
   14. WHATSAPP FLOAT RING PULSE
───────────────────────────────────────────── */

.wa-float__ring {
  animation: waPulse 2.4s var(--ease-out-expo) 2s infinite;
}

.wa-float__btn {
  transition: transform var(--dur-normal) var(--ease-out-back),
              box-shadow var(--dur-normal) var(--ease-out-expo);
}

.wa-float__btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.45);
}

.wa-float__tooltip {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity   var(--dur-normal) var(--ease-out-expo),
              transform var(--dur-normal) var(--ease-out-expo);
  pointer-events: none;
}

.wa-float__tooltip--visible {
  opacity: 1;
  transform: translateX(0);
}


/* ─────────────────────────────────────────────
   15. PAGE-LOAD SEQUENCE
   Staggered reveal of above-the-fold elements
───────────────────────────────────────────── */

/* Header fades in from top */
#siteHeader,
#header-placeholder > * {
  animation: slideDownFade var(--dur-slow) var(--ease-out-expo) both;
  animation-delay: 0ms;
}

/* Announcement bar */
.announcement-bar {
  animation: slideDownFade var(--dur-normal) var(--ease-out-expo) both;
}

/* Trust strip — slight delay after hero */
.trust-strip {
  animation: fadeIn var(--dur-slow) var(--ease-out-expo) 200ms both;
}

/* Newsletter success checkmark draw */
.newsletter-form__success svg polyline {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: drawCheck var(--dur-slow) var(--ease-out-expo) 200ms forwards;
}

/* Category cards entrance */
.cat-card {
  transition: transform var(--dur-normal) var(--ease-out-expo),
              box-shadow var(--dur-normal) var(--ease-out-expo);
}

.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.14);
}

.cat-card__img {
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.cat-card:hover .cat-card__img {
  transform: scale(1.05);
}

/* Collection spotlight image stack */
.collection-spotlight__img-main img,
.collection-spotlight__img-secondary img {
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.collection-spotlight__img-main:hover img   { transform: scale(1.03); }
.collection-spotlight__img-secondary:hover img { transform: scale(1.04) rotate(-1deg); }

/* Promo banner hover */
.promo-banner {
  transition: transform var(--dur-normal) var(--ease-out-expo),
              box-shadow var(--dur-normal) var(--ease-out-expo);
}

.promo-banner:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

.promo-banner__img {
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.promo-banner:hover .promo-banner__img {
  transform: scale(1.04);
}

/* Testimonial card hover */
.testimonial-card {
  transition: transform var(--dur-normal) var(--ease-out-expo),
              box-shadow var(--dur-normal) var(--ease-out-expo);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
}

/* Newsletter submit spinner */
.newsletter-form__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

/* Spinner for modal loading */
.modal__loading,
.search-overlay__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  gap: 0.75rem;
  opacity: 0.5;
}

.modal__loading::before,
.search-overlay__loading::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  flex-shrink: 0;
}

/* Testimonial slider dots */
.testimonial-dot {
  transition: transform var(--dur-fast) var(--ease-out-back),
              background-color var(--dur-fast) var(--ease-in-out),
              width var(--dur-normal) var(--ease-out-expo);
}

.testimonial-dot--active {
  transform: scale(1.3);
}

/* Mobile nav slide-in from left */
.mobile-nav {
  transform: translateX(-100%);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.mobile-nav--open {
  transform: translateX(0);
}


/* ─────────────────────────────────────────────
   16. REDUCED MOTION — always last
   Respects user OS preference.
   Collapses ALL transitions/animations to instant.
───────────────────────────────────────────── */

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

  /* Keep shimmer as a static colour so skeletons stay visible */
  .product-skeleton__img,
  .product-skeleton__line {
    background: var(--color-bg-muted, #e8e8e8);
    animation: none;
  }

  /* Keep the WA ring invisible rather than frozen mid-pulse */
  .wa-float__ring {
    display: none;
  }

  /* Hero pan would look broken frozen — reset */
  .hero__slide--active .hero__img {
    animation: none;
    transform: none;
  }
}