/* MarketPlus Premium — motion / micro-interactions (UI only) */

/* Button ripple */
.ui-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(255,255,255,.45), transparent 55%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.ui-btn:active::after { opacity: 1; transition: opacity 0s; }

/* Soft image reveal after decode (does not hide unloaded slides) */
@keyframes ui-img-in {
  from { opacity: .35; }
  to { opacity: 1; }
}
.mp-card__img img,
.mapp-card__img img,
.ui-slide__media img {
  animation: ui-img-in .45s ease both;
}

/* Static placeholder (no infinite shimmer — was burning GPU on mobile) */
.mp-card__img,
.mapp-card__img {
  background: #EFF1F5;
}
.mp-card__img img,
.mapp-card__img img { position: relative; z-index: 1; }

/* Hub stagger */
#roundCats .mp-round-cat {
  animation: ui-fade-up .45s cubic-bezier(.22,1,.36,1) both;
}
#roundCats .mp-round-cat:nth-child(1) { animation-delay: .02s; }
#roundCats .mp-round-cat:nth-child(2) { animation-delay: .06s; }
#roundCats .mp-round-cat:nth-child(3) { animation-delay: .1s; }
#roundCats .mp-round-cat:nth-child(4) { animation-delay: .14s; }
#roundCats .mp-round-cat:nth-child(5) { animation-delay: .18s; }
#roundCats .mp-round-cat:nth-child(6) { animation-delay: .22s; }

/* Brand stagger */
#brandGrid .mp-brand {
  animation: ui-fade-up .4s cubic-bezier(.22,1,.36,1) both;
}
#brandGrid .mp-brand:nth-child(1) { animation-delay: .02s; }
#brandGrid .mp-brand:nth-child(2) { animation-delay: .05s; }
#brandGrid .mp-brand:nth-child(3) { animation-delay: .08s; }
#brandGrid .mp-brand:nth-child(4) { animation-delay: .11s; }
#brandGrid .mp-brand:nth-child(5) { animation-delay: .14s; }
#brandGrid .mp-brand:nth-child(6) { animation-delay: .17s; }
#brandGrid .mp-brand:nth-child(7) { animation-delay: .2s; }

/* Tab press feedback */
.ui-tab:active { transform: scale(.96); }

/* Focus rings */
.ui-btn:focus-visible,
.ui-action:focus-visible,
.mp-round-cat:focus-visible,
.mp-card__cart:focus-visible,
.mapp-card__cart:focus-visible {
  outline: 3px solid rgba(255, 0, 102, .35);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  img[loading='lazy'] { opacity: 1; animation: none; }
  #roundCats .mp-round-cat,
  #brandGrid .mp-brand { animation: none; }
}