/* ============================================
   WooCommerce Animation System
   Lägg i: /wp-content/themes/ditt-tema/css/animations.css
   ============================================ */

/* --- Tillgänglighet: Respektera prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .woo-animate,
  .woo-animate * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
}

/* ============================================
   1. GRUNDTILLSTÅND – dold innan animation
   ============================================ */
.woo-animate {
  opacity: 0;
  will-change: opacity, transform;
}

/* Animationen är klar */
.woo-animate.is-visible {
  opacity: 1;
  transform: none !important;
}

/* ============================================
   2. ANIMATIONSTYPER
   ============================================ */

/* Fade upp (standard – produkt-kort, sektioner) */
.woo-fade-up {
  transform: translateY(24px);
  transition:
    opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Fade in (rubriker, hero-element) */
.woo-fade-in {
  transform: translateY(0);
  transition:
    opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Fade från vänster (text-sektioner, USP:ar) */
.woo-fade-left {
  transform: translateX(-28px);
  transition:
    opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Fade från höger (bilder, media-element) */
.woo-fade-right {
  transform: translateX(28px);
  transition:
    opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Scale-in (CTA-knappar, badges, ikoner) */
.woo-scale-in {
  transform: scale(0.92);
  transition:
    opacity 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   3. STAGGER-DELAYS (för listor/produktgrid)
   ============================================ */
.woo-stagger > *:nth-child(1)  { transition-delay: 0ms; }
.woo-stagger > *:nth-child(2)  { transition-delay: 80ms; }
.woo-stagger > *:nth-child(3)  { transition-delay: 160ms; }
.woo-stagger > *:nth-child(4)  { transition-delay: 240ms; }
.woo-stagger > *:nth-child(5)  { transition-delay: 320ms; }
.woo-stagger > *:nth-child(6)  { transition-delay: 400ms; }
.woo-stagger > *:nth-child(7)  { transition-delay: 480ms; }
.woo-stagger > *:nth-child(8)  { transition-delay: 560ms; }
.woo-stagger > *:nth-child(n+9){ transition-delay: 560ms; } /* cap:a vid 560ms */

/* ============================================
   4. HOVER-ANIMATIONER (micro-interaktioner)
   ============================================ */

/* Produkt-kort hover */
.wc-block-grid__product,
ul.products li.product {
  transition:
    transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wc-block-grid__product:hover,
ul.products li.product:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

/* Produkt-bild zoom */
.wc-block-grid__product-image img,
ul.products li.product img {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}

.wc-block-grid__product:hover .wc-block-grid__product-image img,
ul.products li.product:hover img {
  transform: scale(1.04);
}

/* Knapp-pulse vid hover */
.woo-btn-pulse {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.woo-btn-pulse:hover {
  transform: scale(1.04);
}

/* Add-to-cart bekräftelse */
@keyframes woo-cart-confirm {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

.added_to_cart,
.wc-block-grid__product-add-to-cart a.added {
  animation: woo-cart-confirm 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ============================================
   5. SKELETON LOADER (medan produkter laddas)
   ============================================ */
@keyframes woo-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.woo-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: woo-shimmer 1.4s infinite linear;
  border-radius: 4px;
}

/* ============================================
   6. HERO LOAD-ANIMATIONER
   ============================================ */
@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate-1 {
  animation: hero-fade-up 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}
.hero-animate-2 {
  animation: hero-fade-up 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s both;
}
.hero-animate-3 {
  animation: hero-fade-up 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-animate-1,
  .hero-animate-2,
  .hero-animate-3 {
    animation: none;
  }
}