/* ═══════════════════════════════════════════════════════
   EFFECTS.CSS — Modern e-commerce UI effects
   Skeleton · Micro-interactions · Parallax · Magnetic ·
   Stagger · Morphing images · Floating cart · Bottom sheet ·
   Toast · Lottie placeholder · Scroll reveals
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   1. SKELETON LOADERS
───────────────────────────────────────────────────── */
@keyframes sk-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.sk {
  display: inline-block;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 600px 100%;
  animation: sk-shimmer 1.3s infinite linear;
  border-radius: 6px;
}
.sk-text  { height: 14px; width: 100%; margin-bottom: 8px; }
.sk-title { height: 20px; width: 70%; margin-bottom: 12px; }
.sk-img   { width: 100%; aspect-ratio: 1; border-radius: 10px; }
.sk-circle{ border-radius: 50%; }
.sk-btn   { height: 40px; width: 120px; border-radius: 8px; }

/* Product card skeleton */
.product-card-skeleton {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border);
  overflow: hidden;
  padding: 0;
}
.product-card-skeleton__img  { height: 200px; border-radius: 0; }
.product-card-skeleton__body { padding: 14px; }
.product-card-skeleton__body .sk-text:last-child { width: 40%; }

/* ─────────────────────────────────────────────────────
   2. MICRO-INTERACTIONS
───────────────────────────────────────────────────── */
/* Button press */
.btn { will-change: transform; }
.btn:active { transform: scale(0.96) !important; }

/* Wishlist heart burst */
@keyframes heartBurst {
  0%   { transform: scale(1);   opacity: 1; }
  25%  { transform: scale(1.4); opacity: 1; }
  50%  { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
.product-card__wishlist { transition: color .2s, transform .2s; }
.product-card__wishlist.active { color: #ef4444; }
.product-card__wishlist.burst  { animation: heartBurst .4s cubic-bezier(.36,.07,.19,.97); }

/* Cart badge bump */
@keyframes badgePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  70%  { transform: scale(0.85); }
  100% { transform: scale(1); }
}
.navbar__badge.bump { animation: badgePop .35s var(--ease-spring); }

/* Add-to-cart button ripple */
@keyframes btnRipple {
  from { transform: scale(0); opacity: .5; }
  to   { transform: scale(4); opacity: 0; }
}
.btn-ripple {
  position: relative; overflow: hidden;
}
.btn-ripple .ripple-dot {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.35);
  width: 10px; height: 10px;
  transform: scale(0);
  animation: btnRipple .5s linear;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────
   3. SCROLL-TRIGGERED STAGGER REVEALS
───────────────────────────────────────────────────── */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: var(--delay, 0s);
}
[data-animate="left"]  { transform: translateX(-32px); }
[data-animate="right"] { transform: translateX(32px); }
[data-animate="scale"] { transform: scale(.92); }
[data-animate="fade"]  { transform: none; }
[data-animate].is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger children automatically */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
[data-stagger].is-visible > * { opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(1)  { transition-delay: 0s; }
[data-stagger].is-visible > *:nth-child(2)  { transition-delay: .06s; }
[data-stagger].is-visible > *:nth-child(3)  { transition-delay: .12s; }
[data-stagger].is-visible > *:nth-child(4)  { transition-delay: .18s; }
[data-stagger].is-visible > *:nth-child(5)  { transition-delay: .24s; }
[data-stagger].is-visible > *:nth-child(6)  { transition-delay: .30s; }
[data-stagger].is-visible > *:nth-child(7)  { transition-delay: .36s; }
[data-stagger].is-visible > *:nth-child(8)  { transition-delay: .42s; }
[data-stagger].is-visible > *:nth-child(n+9){ transition-delay: .48s; }

/* ─────────────────────────────────────────────────────
   4. MAGNETIC HOVER BUTTONS
───────────────────────────────────────────────────── */
.btn-magnetic {
  transition: transform .15s cubic-bezier(.25,.46,.45,.94),
              box-shadow .15s ease;
  will-change: transform;
}
.btn-magnetic:hover {
  box-shadow: 0 8px 24px rgba(26,60,94,.25);
}

/* ─────────────────────────────────────────────────────
   5. MORPHING PRODUCT IMAGE (hover alt swap)
───────────────────────────────────────────────────── */
.product-card__img-wrap {
  position: relative;
  overflow: hidden;
}
.product-card__img-wrap img {
  transition: opacity .35s ease, transform .4s ease;
  display: block;
}
.product-card__img-alt {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .35s ease, transform .4s ease;
  width: 100%; height: 100%; object-fit: cover;
}
.product-card:hover .product-card__img-wrap > img:first-child {
  opacity: 0;
  transform: scale(1.04);
}
.product-card:hover .product-card__img-alt {
  opacity: 1;
  transform: scale(1);
}
/* Zoom on hover if no alt image */
.product-card__img-wrap img:only-child {
  transition: transform .5s ease;
}
.product-card:hover .product-card__img-wrap img:only-child {
  transform: scale(1.06);
}

/* ─────────────────────────────────────────────────────
   6. PARALLAX
───────────────────────────────────────────────────── */
.parallax-section {
  position: relative;
  overflow: hidden;
}
.parallax-bg {
  position: absolute;
  inset: -20% 0;
  background-attachment: fixed; /* CSS-only fallback */
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.parallax-content { position: relative; z-index: 1; }

/* Hero parallax overlay */
.hero__parallax {
  position: absolute; inset: -15% 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
  z-index: 0;
}

/* ─────────────────────────────────────────────────────
   7. FLOATING CART DRAWER
───────────────────────────────────────────────────── */
.cart-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 500;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  backdrop-filter: blur(2px);
}
.cart-drawer-overlay.open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(400px, 95vw);
  background: #fff;
  z-index: 501;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.32,0,.67,0);
  box-shadow: -8px 0 40px rgba(0,0,0,.12);
}
.cart-drawer.open {
  transform: translateX(0);
  transition: transform .35s cubic-bezier(.34,1.06,.64,1);
}
.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-drawer__title { font-size: 1.05rem; font-weight: 800; color: var(--primary); }
.cart-drawer__close {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer; border: none; background: none;
  transition: background .15s;
}
.cart-drawer__close:hover { background: var(--bg); }
.cart-drawer__body {
  flex: 1; overflow-y: auto;
  padding: 16px 20px;
  -webkit-overflow-scrolling: touch;
}
.cart-drawer__empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 100%;
  color: var(--text-muted); gap: 12px;
  font-size: .9rem;
}
.cart-drawer__foot {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
  animation: slideInRight .25s ease;
}
.cart-item:last-child { border-bottom: none; }
.cart-item__img {
  width: 60px; height: 60px; border-radius: 8px;
  object-fit: cover; flex-shrink: 0; background: var(--bg);
}
.cart-item__info { flex: 1; }
.cart-item__title { font-size: .84rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.cart-item__price { font-size: .84rem; font-weight: 700; color: var(--primary); }
.cart-item__remove {
  background: none; border: none; cursor: pointer;
  color: var(--text-light); padding: 2px;
  transition: color .15s;
}
.cart-item__remove:hover { color: #ef4444; }
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Cart total */
.cart-total {
  display: flex; justify-content: space-between;
  font-size: 1rem; font-weight: 700;
  margin-bottom: 14px;
}

/* Dark theme drawer overrides */
[data-theme="dark"] .cart-drawer,
:root:not([data-theme="light"]) .cart-drawer {
  background: #1c1b1b;
  box-shadow: -8px 0 40px rgba(0,0,0,.5);
}
[data-theme="dark"] .cart-drawer__head,
:root:not([data-theme="light"]) .cart-drawer__head {
  border-color: rgba(77,70,53,.3);
}
[data-theme="dark"] .cart-drawer__title,
:root:not([data-theme="light"]) .cart-drawer__title {
  color: #f2ca50;
}
[data-theme="dark"] .cart-drawer__close,
:root:not([data-theme="light"]) .cart-drawer__close {
  color: #99907c;
}
[data-theme="dark"] .cart-drawer__close:hover,
:root:not([data-theme="light"]) .cart-drawer__close:hover {
  background: rgba(77,70,53,.2);
}
[data-theme="dark"] .cart-drawer__foot,
:root:not([data-theme="light"]) .cart-drawer__foot {
  border-color: rgba(77,70,53,.3);
}
[data-theme="dark"] .cart-total,
:root:not([data-theme="light"]) .cart-total {
  color: #e5e2e1;
}
[data-theme="dark"] .cart-total strong,
:root:not([data-theme="light"]) .cart-total strong {
  color: #f2ca50;
}

/* Drawer item styles (dark) */
.cd-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(77,70,53,.2);
}
.cd-item:last-child { border-bottom: none; }
.cd-item__img {
  width: 56px; height: 56px; object-fit: cover;
  flex-shrink: 0; background: #0e0e0e;
}
.cd-item__avatar {
  width: 56px; height: 56px; flex-shrink: 0;
  background: linear-gradient(135deg,#1a1208,#0e0e0e);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bodoni Moda', serif; font-size: 1.4rem;
  color: rgba(242,202,80,.25);
}
.cd-item__info { flex: 1; min-width: 0; }
.cd-item__vendor { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #f2ca50; font-family: 'Hanken Grotesk', sans-serif; margin-bottom: 2px; }
.cd-item__title { font-size: .82rem; color: #e5e2e1; font-family: 'Bodoni Moda', serif; line-height: 1.3; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-item__meta { display: flex; align-items: center; gap: 8px; }
.cd-item__price { font-size: .78rem; color: #f2ca50; font-weight: 700; font-family: 'Hanken Grotesk', sans-serif; }
.cd-item__badge { font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 20px; }
.cd-item__badge--sample   { background: rgba(96,165,250,.1); color: #60a5fa; border: 1px solid rgba(96,165,250,.2); }
.cd-item__badge--checkout { background: rgba(74,222,128,.1); color: #4ade80; border: 1px solid rgba(74,222,128,.2); }
.cd-item__badge--rfq      { background: rgba(251,191,36,.1); color: #fbbf24; border: 1px solid rgba(251,191,36,.2); }
.cd-item__remove {
  background: none; border: none; cursor: pointer;
  color: #4d4635; padding: 4px; transition: color .15s; flex-shrink: 0;
}
.cd-item__remove:hover { color: #f87171; }
.cd-loading { text-align: center; padding: 32px 0; color: #99907c; font-size: .82rem; font-family: 'Hanken Grotesk', sans-serif; }
[data-theme="light"] .cd-item { border-color: rgba(196,184,150,.3); }
[data-theme="light"] .cd-item__title { color: #1a1208; }
[data-theme="light"] .cd-item__vendor { color: #a0762a; }

/* ─────────────────────────────────────────────────────
   8. BOTTOM SHEET (mobile filters / quick-view)
───────────────────────────────────────────────────── */
.sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 600;
  opacity: 0; visibility: hidden;
  transition: opacity .22s, visibility .22s;
}
.sheet-overlay.open { opacity: 1; visibility: visible; }

.bottom-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  z-index: 601;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,0,.67,0);
  padding: 0 0 calc(20px + env(safe-area-inset-bottom));
}
.bottom-sheet.open {
  transform: translateY(0);
  transition: transform .38s cubic-bezier(.34,1.06,.64,1);
}
.sheet-handle {
  width: 36px; height: 4px;
  background: #e2e8f0; border-radius: 99px;
  margin: 10px auto 16px;
}
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px 14px;
  border-bottom: 1px solid var(--border);
  font-size: .95rem; font-weight: 700;
}
.sheet-body { padding: 16px 20px; }
.sheet-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.sheet-close:hover { background: var(--bg); }

/* ─────────────────────────────────────────────────────
   9. TOAST NOTIFICATIONS
───────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 80px; right: 16px;
  z-index: 800;
  display: flex; flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
@media (min-width: 769px) {
  #toast-container { bottom: 24px; right: 24px; }
}

.toast {
  display: flex; align-items: center; gap: 10px;
  background: #1e293b; color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: .84rem; font-weight: 500;
  max-width: 300px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  pointer-events: all;
  animation: toastIn .3s cubic-bezier(.34,1.56,.64,1) forwards;
  will-change: transform;
}
.toast.removing {
  animation: toastOut .25s ease forwards;
}
.toast--success { background: #15803d; }
.toast--error   { background: #b91c1c; }
.toast--info    { background: #1d4ed8; }
.toast--warning { background: #b45309; }
.toast__icon { flex-shrink: 0; }
.toast__close {
  margin-left: auto; background: none; border: none;
  color: rgba(255,255,255,.6); cursor: pointer;
  padding: 2px; transition: color .15s; pointer-events: all;
}
.toast__close:hover { color: #fff; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(60px) scale(.85); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0)    scale(1); }
  to   { opacity: 0; transform: translateX(60px) scale(.85); }
}

/* ─────────────────────────────────────────────────────
   10. LOTTIE / SVG ANIMATED ICON PLACEHOLDERS
───────────────────────────────────────────────────── */
.lottie-wrap {
  display: flex; align-items: center; justify-content: center;
}
/* Spinning loader */
@keyframes lottieSpinCW  { to { transform: rotate(360deg); } }
@keyframes lottieSpinCCW { to { transform: rotate(-360deg); } }
.icon-spin  { animation: lottieSpinCW  1s linear infinite; }
.icon-spin2 { animation: lottieSpinCCW .8s linear infinite; }

/* Animated checkmark */
@keyframes drawCheck {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
.icon-check-anim {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawCheck .5s ease forwards;
}

/* Bouncing truck */
@keyframes truckBounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.icon-truck { animation: truckBounce .8s ease infinite; }

/* ─────────────────────────────────────────────────────
   11. QUICK VIEW MODAL
───────────────────────────────────────────────────── */
.quick-view-modal {
  position: fixed; inset: 0; z-index: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s, visibility .2s;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(3px);
}
.quick-view-modal.open { opacity: 1; visibility: visible; }
.quick-view-modal__box {
  background: #fff;
  border-radius: 18px;
  width: 100%; max-width: 740px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  transform: translateY(20px) scale(.96);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.quick-view-modal.open .quick-view-modal__box {
  transform: translateY(0) scale(1);
}
.quick-view-modal__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 600px) {
  .quick-view-modal__grid { grid-template-columns: 1fr; }
}
.quick-view-modal__img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  border-radius: 18px 0 0 18px;
}
@media (max-width: 600px) {
  .quick-view-modal__img { border-radius: 18px 18px 0 0; }
}
.quick-view-modal__info {
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.quick-view-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(0,0,0,.08); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.quick-view-modal__close:hover { background: rgba(0,0,0,.16); }

/* ─────────────────────────────────────────────────────
   PRODUCT CARD QUICK-VIEW TRIGGER
───────────────────────────────────────────────────── */
.product-card { position: relative; }
.product-card__quick-view {
  position: absolute;
  bottom: -40px; left: 0; right: 0;
  background: var(--primary);
  color: #fff; font-size: .78rem; font-weight: 700;
  text-align: center; padding: 10px;
  cursor: pointer; border: none;
  transition: bottom .25s cubic-bezier(.34,1.06,.64,1), opacity .2s;
  opacity: 0;
}
.product-card:hover .product-card__quick-view {
  bottom: 0; opacity: 1;
}