/* ================================================================
   SHUBH SUPPLIES — Animation & Micro-interaction Enhancements
   Additive layer · loads AFTER style.css · safe to remove.
   All keyframes are prefixed shb* to avoid collisions.
   Fully disabled under prefers-reduced-motion (see bottom).
================================================================ */

/* ── Smoother global easing for interactive elements ──────────── */
.btn, .nav-link, .product-card, .add-cart-btn, .cart-btn,
.product-badge, .section-label {
  transition-timing-function: var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}

/* ── 1. PRIMARY BUTTON — gold sheen sweep on hover ───────────── */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%,
              rgba(255,255,255,0.38) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out, ease);
  pointer-events: none;
}
.btn-primary:hover::before { transform: translateX(120%); }
.btn-primary:active { transform: translateY(-1px) scale(0.99); }

/* Subtle press feedback for all buttons */
.btn:active, .add-cart-btn:active { transform: translateY(0) scale(0.98); }

/* ── 2. PRODUCT CARD — refined lift + light sweep ────────────── */
.product-card { transition: transform 0.45s var(--ease-out, ease),
                            box-shadow 0.45s var(--ease-out, ease),
                            border-color 0.35s ease; }
.product-card:hover {
  transform: translateY(-6px);
}
/* moving light sweep across the image on hover */
.product-card-img-wrap { position: relative; }
.product-card-img-wrap::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%,
              rgba(255,255,255,0.16) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.85s var(--ease-out, ease);
}
.product-card:hover .product-card-img-wrap::before { transform: translateX(130%); }

/* ── 3. PRODUCT BADGE — gentle shimmer for highlight badges ──── */
.product-badge { position: relative; overflow: hidden; }
.product-badge.bestseller::after,
.product-badge.sale::after,
.product-badge.new::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg);
  animation: shbBadgeShimmer 3.4s ease-in-out infinite;
}
@keyframes shbBadgeShimmer {
  0%, 62% { left: -60%; }
  78%, 100% { left: 130%; }
}

/* ── 4. SECTION LABEL — animated underline grow on reveal ────── */
.section-label::before { transition: width 0.7s var(--ease-out, ease); }
.section-label { opacity: 1; }

/* ── 5. NAV LINK — underline already exists; add soft glow ───── */
.nav-link:hover { text-shadow: 0 0 12px var(--gold-glow, rgba(212,172,94,0.4)); }

/* ── 6. CART COUNT — pop animation when it changes ───────────── */
.cart-count.shb-bump { animation: shbBump 0.45s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)); }
@keyframes shbBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.55); }
  100% { transform: scale(1); }
}

/* Cart button nudge when an item is added */
.cart-btn.shb-nudge { animation: shbNudge 0.5s ease; }
@keyframes shbNudge {
  0%,100% { transform: translateY(0); }
  30% { transform: translateY(-4px) rotate(-6deg); }
  60% { transform: translateY(0) rotate(4deg); }
}

/* ── 7. ADD-TO-CART — success ripple ─────────────────────────── */
.add-cart-btn { position: relative; overflow: hidden; }
.add-cart-btn.shb-added { animation: shbAddedFlash 0.6s ease; }
@keyframes shbAddedFlash {
  0% { box-shadow: 0 0 0 0 var(--sage, #7a9665); }
  100% { box-shadow: 0 0 0 14px rgba(122,150,101,0); }
}

/* ── 8. IMAGE FADE-IN on load (progressive) ──────────────────── */
img.shb-fade { opacity: 0; transition: opacity 0.6s ease; }
img.shb-fade.shb-loaded { opacity: 1; }

/* ── 9. ACCESSIBLE FOCUS RINGS (keyboard only) ───────────────── */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.add-cart-btn:focus-visible, .nav-link:focus-visible {
  outline: 2px solid var(--gold, #d4ac5e);
  outline-offset: 3px;
  border-radius: var(--radius-xs, 4px);
}

/* ── 10. PAGE ENTER — gentle fade for main content ───────────── */
main.shb-enter { animation: shbPageEnter 0.6s var(--ease-out, ease) both; }
@keyframes shbPageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── 11. REVEAL refinement — a touch more spring on zoom ─────── */
.anim-reveal-zoom.in { animation: shbZoomSettle 0.7s var(--ease-out, ease); }
@keyframes shbZoomSettle {
  from { transform: scale(0.94); filter: blur(4px); }
  60%  { transform: scale(1.01); filter: blur(0); }
  to   { transform: scale(1); }
}

/* ── 12. WHATSAPP FAB — subtle float on top of existing pulse ── */
.fab-whatsapp, .whatsapp-float { animation-name: fabPulse, shbFabFloat; animation-duration: 2.5s, 4s; animation-iteration-count: infinite, infinite; animation-timing-function: ease-in-out, ease-in-out; }
@keyframes shbFabFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.fab-whatsapp:hover, .whatsapp-float:hover { transform: scale(1.1) translateY(-2px); }

/* ════════════════════════════════════════════════════════════
   REDUCED MOTION — disable all of the above for sensitive users
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .btn-primary::before,
  .product-card-img-wrap::before,
  .product-badge.bestseller::after,
  .product-badge.sale::after,
  .product-badge.new::after { display: none !important; }
  .product-card:hover { transform: none !important; }
  .cart-count.shb-bump, .cart-btn.shb-nudge, .add-cart-btn.shb-added,
  main.shb-enter, .anim-reveal-zoom.in,
  .fab-whatsapp, .whatsapp-float { animation: none !important; }
  img.shb-fade { opacity: 1 !important; }
}