/* Camada de movimento leve: mantém resposta visual sem filtros, observers ou animações contínuas. */
:root {
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.2,.9,.25,1);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

.topbar {
  transition: box-shadow .2s ease, background-color .2s ease;
}
.topbar.scrolled {
  box-shadow: 0 8px 22px rgba(0,0,0,.07);
  background: #fff;
}

.brand-mark,
.product-card,
.product-image,
.add-btn,
.categories button,
.primary-btn,
.ghost-btn,
.delivery-toggle button,
.account-btn,
.product-add-confirm,
.floating-cart-button,
.qty-control button,
.product-qty-selector button,
.addon-row {
  transition: transform .18s var(--ease-out), box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}

.brand-mark:hover { transform: scale(1.04); }

.motion-lite [data-motion-ready="true"],
.motion-lite .reveal-on-scroll,
.motion-failsafe-visible [data-motion-ready="true"] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.product-card {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}
.product-card:hover {
  transform: translateY(-2px);
  border-color: rgba(234,29,44,.18);
  box-shadow: 0 10px 24px rgba(25,18,19,.08);
}
.product-card:active { transform: translateY(0) scale(.99); }
.product-card:hover .product-image { transform: scale(1.025); }
.product-card:hover .add-btn { transform: scale(1.07); }
.add-btn:active { transform: scale(.92) !important; }

.categories button:hover { color: var(--primary); transform: translateY(-1px); }
.categories button.category-tap { animation: categoryTap .24s var(--ease-out); }

.primary-btn:not(:disabled):hover,
.product-add-confirm:hover,
.floating-cart-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 20px rgba(234,29,44,.18);
}
.primary-btn:not(:disabled):active,
.product-add-confirm:active,
.delivery-toggle button:active,
.ghost-btn:active,
.account-btn:active { transform: scale(.98); }

.qty-control button:hover,
.product-qty-selector button:hover {
  transform: scale(1.08);
  background: var(--primary-soft);
  color: var(--primary);
}
.quantity-pop { animation: quantityPop .2s var(--ease-out); }
.option-pop { animation: optionPop .22s var(--ease-out); }

.account-menu-item {
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.account-menu-item:hover { transform: translateX(3px); }

.cart-item {
  transition: opacity .2s ease, transform .2s var(--ease-out), background-color .18s ease;
}
.cart-item:hover { background: rgba(234,29,44,.02); }
.cart-item.is-removing {
  pointer-events: none;
  animation: cartItemRemove .22s ease forwards;
}

.floating-cart-button.cart-celebrate,
#openCartBtn.cart-celebrate,
#cartCount.bump,
.motion-pulse {
  animation: motionPulse .32s var(--ease-out) !important;
}

.toast {
  transform: translate(-50%, 16px) scale(.96);
  opacity: 0;
  transition: opacity .2s ease, transform .24s var(--ease-out);
}
.toast.show {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}

.products-grid.products-refresh .product-card {
  animation: productGridRefresh .22s var(--ease-out) both;
}
.products-grid.products-refresh .product-card:nth-child(2) { animation-delay: 20ms; }
.products-grid.products-refresh .product-card:nth-child(3) { animation-delay: 40ms; }
.products-grid.products-refresh .product-card:nth-child(4) { animation-delay: 60ms; }
.products-grid.products-refresh .product-card:nth-child(n+5) { animation-delay: 75ms; }

@keyframes productGridRefresh {
  from { opacity: .55; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
@keyframes categoryTap {
  50% { transform: scale(.97); }
}
@keyframes quantityPop {
  50% { transform: scale(.9); }
}
@keyframes optionPop {
  50% { transform: scale(.99); }
}
@keyframes motionPulse {
  45% { transform: scale(1.035); }
}
@keyframes cartItemRemove {
  to { opacity: 0; transform: translateX(24px); }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
