/* ═══ Transições de página ══════════════════════════ */
.page-transition {
  animation: pageEnter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══ Cards de produto com stagger ══════════════════ */
.product-grid > * {
  animation: cardFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.product-grid > *:nth-child(1)  { animation-delay: 0.00s; }
.product-grid > *:nth-child(2)  { animation-delay: 0.04s; }
.product-grid > *:nth-child(3)  { animation-delay: 0.08s; }
.product-grid > *:nth-child(4)  { animation-delay: 0.12s; }
.product-grid > *:nth-child(5)  { animation-delay: 0.16s; }
.product-grid > *:nth-child(6)  { animation-delay: 0.20s; }
.product-grid > *:nth-child(7)  { animation-delay: 0.24s; }
.product-grid > *:nth-child(8)  { animation-delay: 0.28s; }
.product-grid > *:nth-child(9)  { animation-delay: 0.32s; }
.product-grid > *:nth-child(10) { animation-delay: 0.36s; }
.product-grid > *:nth-child(11) { animation-delay: 0.40s; }
.product-grid > *:nth-child(12) { animation-delay: 0.44s; }
.product-grid > *:nth-child(n+13) { animation-delay: 0.48s; }

@keyframes cardFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ═══ Hover dos cards mais suave ════════════════════ */
.product-card {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s ease,
              border-color 0.25s ease;
}

.product-card:hover {
  transform: translateY(-4px);
}

/* ═══ Imagem do produto com zoom suave ══════════════ */
.product-image img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover .product-image img {
  transform: scale(1.06);
}

/* ═══ Botões com micro-interação ════════════════════ */
.btn,
.add-btn,
.icon-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:active,
.add-btn:active {
  transform: scale(0.96);
}

/* ═══ Header sticky com fade ═══════════════════════ */
.header {
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

/* ═══ Hero slides crossfade mais suave ═════════════ */
.hero-slide {
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══ Drawer do carrinho ═══════════════════════════ */
.drawer {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ═══ Categorias e filtros ═════════════════════════ */
.catalog-grid,
.filter-pills,
.brands-strip {
  animation: subtleFade 0.5s ease both;
}

@keyframes subtleFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══ Reduz motion para quem prefere ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}