/* ============================================================
   SupplyKit — Storewide Animations
   Append to /assets/style.css (or load as a separate stylesheet).
   Professional, subtle motion. Respects prefers-reduced-motion.
   ============================================================ */

/* ---------- 1) MARQUEE TRUST BAR (infinite smooth scroll) ---------- */
.trust-bar{overflow:hidden}
.trust-marquee{
  display:flex;
  width:max-content;
  animation:sk-marquee 32s linear infinite;
}
.trust-marquee:hover{animation-play-state:paused;}   /* pause on hover */
.trust-track{
  display:flex;
  gap:0;
  flex-shrink:0;
}
.trust-marquee .trust-item{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  white-space:nowrap;
  padding:0 2.2rem;
  font-size:.95rem;
  color:#475569;
  position:relative;
}
/* thin divider dot between items */
.trust-marquee .trust-item::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;
  background:#cbd5e1;
}
.trust-marquee .trust-icon{font-size:1.1rem;}

@keyframes sk-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}   /* -50% because content is duplicated once */
}

/* ---------- 2) SCROLL-REVEAL (fade + rise as sections enter view) ---------- */
.sk-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.sk-reveal.sk-in{
  opacity:1;
  transform:translateY(0);
}
/* stagger children (product grids) */
.sk-reveal-stagger > *{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.sk-reveal-stagger.sk-in > *{opacity:1;transform:translateY(0);}
.sk-reveal-stagger.sk-in > *:nth-child(1){transition-delay:.02s}
.sk-reveal-stagger.sk-in > *:nth-child(2){transition-delay:.06s}
.sk-reveal-stagger.sk-in > *:nth-child(3){transition-delay:.10s}
.sk-reveal-stagger.sk-in > *:nth-child(4){transition-delay:.14s}
.sk-reveal-stagger.sk-in > *:nth-child(5){transition-delay:.18s}
.sk-reveal-stagger.sk-in > *:nth-child(6){transition-delay:.22s}

/* ---------- 3) PRODUCT CARD POLISH (smooth lift + image zoom) ---------- */
.product-card{
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(15,23,42,.10);
  border-color:#c7d2fe;
}
.product-card .product-img img{transition:transform .35s cubic-bezier(.16,1,.3,1);}
.product-card:hover .product-img img{transform:scale(1.06);}

/* ---------- 4) BUTTON / CTA micro-interactions ---------- */
.add-to-cart,.btn,.btn-primary,.btn-blue{
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.add-to-cart:hover,.btn:hover,.btn-primary:hover,.btn-blue:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(37,99,235,.22);
}
.add-to-cart:active,.btn:active{transform:translateY(0);}

/* category chips get a gentle lift too */
.cat-chip{transition:transform .15s ease, background-color .15s, color .15s, border-color .15s;}
.cat-chip:hover{transform:translateY(-2px);}

/* ---------- 5) HERO entrance (runs once on load) ---------- */
.hero h1, .hero-title{animation:sk-rise .7s cubic-bezier(.16,1,.3,1) both;}
.hero p, .hero-sub{animation:sk-rise .7s cubic-bezier(.16,1,.3,1) .1s both;}
.hero .hero-badges, .hero-cta{animation:sk-rise .7s cubic-bezier(.16,1,.3,1) .2s both;}
@keyframes sk-rise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Respect reduced motion (accessibility + professionalism) ---------- */
@media (prefers-reduced-motion: reduce){
  .trust-marquee{animation:none; justify-content:center; width:100%;}
  .trust-marquee .trust-track:nth-child(2){display:none;} /* hide the duplicate */
  .sk-reveal,.sk-reveal-stagger>*{opacity:1 !important;transform:none !important;transition:none;}
  .product-card,.product-card .product-img img,.add-to-cart,.btn,.cat-chip{transition:none;}
  .hero h1,.hero p,.hero .hero-badges,.hero-title,.hero-sub,.hero-cta{animation:none;}
}

/* ---------- "Powered by NABSPAK" footer credit ---------- */
.powered-by{
  font-size:12px;
  color:#94a3b8;
  margin-top:6px;
  letter-spacing:.2px;
}
.powered-by a{
  color:#64748b;
  text-decoration:none;
  font-weight:600;
  transition:color .15s ease;
}
.powered-by a:hover{ color:#2563eb; }

/* keep "Supply Kit" on one line */
}
.nav-logo > span:first-of-type{ display:inline; }  /* Kit stays inline with Supply */
.nav-powered{
  display:block;
  font-size:9px;
  font-weight:500;
  color:#94a3b8;
  letter-spacing:.2px;
  margin-top:2px;
  line-height:1;
}

/* ---------- "Powered by NABSPAK" under header logo (non-breaking) ---------- */
.nav-logo{ position:relative; white-space:nowrap; }
.nav-logo .nav-powered{
  position:absolute;
  left:0;
  top:100%;
  margin-top:1px;
  font-size:9px;
  font-weight:500;
  color:#94a3b8;
  letter-spacing:.2px;
  white-space:nowrap;
}