/* =========================================================
   ZH OUTFITS — MICROANIMAÇÕES
   Detalhes de movimento que dão acabamento ao site: botões que
   "afundam" ao clicar, realce suave no carrinho e entrada em
   fade das peças do catálogo.
   Tudo é desligado automaticamente para quem pediu menos
   movimento no sistema (prefers-reduced-motion).
   ========================================================= */

/* ---------- botões ---------- */
.btn,
.cats button,
.brands button,
.card__buy{
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active,
.cats button:active,
.brands button:active,
.card__buy:active{ transform:scale(.97); }

.btn--gold:hover,
.card__buy:hover{ box-shadow:0 8px 22px rgba(201,147,31,.28); }

/* ---------- carrinho ---------- */
.cart-btn{ transition:transform .12s ease; }
.cart-btn:active{ transform:scale(.96); }

@keyframes zh-pulso-carrinho{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.18); }
  100%{ transform:scale(1); }
}
/* js pode adicionar a classe quando um item entra no carrinho */
.cart-btn.is-pulsando [data-cart-count]{
  display:inline-block;
  animation:zh-pulso-carrinho .45s ease;
  color:var(--gold-hi);
}

/* a entrada das peças ao rolar fica em css/revelar-ao-rolar.css */

/* ---------- links do menu ---------- */
.mainnav a{ position:relative; }
.mainnav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
.mainnav a:hover::after{ transform:scaleX(1); }

/* ---------- respeita quem pediu menos movimento ---------- */
@media (prefers-reduced-motion: reduce){
  .btn, .cats button, .brands button, .card__buy, .cart-btn,
  .mainnav a::after{
    transition:none !important;
    animation:none !important;
    transform:none !important;
  }
}