/* Site load & entrance animations (lightweight)
   - Apply via classes: .animate-on-load, .animate-stagger, .fade-up, .zoom-in
   - Uses prefers-reduced-motion
*/

@media (prefers-reduced-motion: reduce) {
  .animate-on-load, .fade-up, .fade-in, .zoom-in, .animate-stagger { animation: none !important; transition: none !important; }
}

@keyframes fadeUpSmall { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }

.fade-in { animation: fadeIn 360ms ease both; }
.fade-up { animation: fadeUpSmall 420ms cubic-bezier(.2,.9,.2,1) both; }
.zoom-in { animation: zoomIn 420ms cubic-bezier(.2,.9,.2,1) both; }

/* utility class to apply on DOMContentLoaded */
.animate-on-load { opacity: 0; transform: translateY(8px); animation: fadeUpSmall 420ms cubic-bezier(.2,.9,.2,1) both; }

/* stagger helper: children will receive incremental animation-delay via JS */
.animate-stagger > * { opacity: 0; transform: translateY(8px); }

/* tuned hover/active micro-interactions */
.product-card, .promo-card { transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms ease; }
.product-card:hover, .promo-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }
.new-products .product-card,
.new-products .product-card:hover {
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.new-products .product-card:hover { transform:none !important; box-shadow:0 2px 16px rgba(0,0,0,0.08) !important; }

/* when JS adds .is-animated children inside .animate-stagger */
.is-animated { animation: fadeUpSmall 420ms cubic-bezier(.2,.9,.2,1) both; }

/* images fade-in when their src is present */
img { transition: opacity 360ms ease, transform 420ms cubic-bezier(.2,.9,.2,1); opacity: 0; }
img[src] { opacity: 1; }

/* small helpers */
.no-anim, .no-anim * { animation: none !important; transition: none !important; }

/* --- "Wow" effects --- */

/* Hero parallax (background moves slightly on pointer) */
.hero-parallax { position: relative; overflow: hidden; }
.hero-parallax .hero-bg { position: absolute; inset: 0; background-position: center; background-size: cover; transform: translateZ(0); transition: transform 420ms cubic-bezier(.2,.9,.2,1); will-change: transform; }
.hero-parallax .hero-content { position: relative; z-index: 2; }

/* Card tilt effect */
.product-card, .promo-card { transform-style: preserve-3d; perspective: 800px; }
.product-card.tilt, .promo-card.tilt { transition: transform 220ms cubic-bezier(.2,.9,.2,1); }

/* Sparkle hover: transient tiny circles created by JS */
.sparkle { position: absolute; pointer-events: none; border-radius: 999px; transform: translate(-50%,-50%) scale(0.01); opacity: 0.9; mix-blend-mode: screen; }

/* Floating promo badge */
.product-badge { display:inline-block; transition: transform 420ms cubic-bezier(.2,.9,.2,1); transform-origin: center; }
.product-card:hover .product-badge { transform: translateY(-6px) rotate(-6deg) scale(1.04); }

/* Button ripple */
.ripple { position: absolute; border-radius: 50%; transform: scale(0); opacity: 0.6; background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 40%, rgba(255,255,255,0.05) 100%); pointer-events: none; }
.btn-with-ripple { position: relative; overflow: hidden; }

/* To-top button */
.to-top-btn { position: fixed; right: 18px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg,#111,#333); color: #fff; display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 20px rgba(0,0,0,0.25); z-index: 150000; transform: translateY(24px) scale(.98); opacity: 0; transition: transform 280ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease; }
.to-top-btn.show { transform: translateY(0) scale(1); opacity: 1; }

/* Subtle sparkle gradient on hover for product images */
.product-img::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(400px 120px at 10% 10%, rgba(255,255,255,0.06), transparent 20%); opacity: 0; transition: opacity 300ms ease; }
.product-card:hover .product-img::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-parallax .hero-bg, .product-card.tilt, .promo-card.tilt, .to-top-btn { transition: none !important; transform: none !important; }
  .sparkle, .ripple { display: none !important; }
}