/* ==========================================================================
   MOVIMENTO — animações leves para o site ficar fluido
   Regras: curtas (≤ 600ms), só opacity/transform (não travam), e desligadas
   para quem pede "reduzir movimento" no sistema.
   ========================================================================== */

html { scroll-behavior: smooth; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Cartões de produto e categorias entram em sequência */
.products__grid > *,
.categories__grid > .category-card.is-visible,
.benefits__list > .benefit.is-visible {
  animation: fade-up 0.5s var(--ease) backwards;
}

.products__grid > *:nth-child(2) { animation-delay: 60ms; }
.products__grid > *:nth-child(3) { animation-delay: 120ms; }
.products__grid > *:nth-child(4) { animation-delay: 180ms; }
.products__grid > *:nth-child(5) { animation-delay: 220ms; }
.products__grid > *:nth-child(6) { animation-delay: 260ms; }
.products__grid > *:nth-child(n+7) { animation-delay: 300ms; }

.categories__grid > *:nth-child(2) { animation-delay: 70ms; }
.categories__grid > *:nth-child(3) { animation-delay: 140ms; }
.categories__grid > *:nth-child(4) { animation-delay: 210ms; }
.benefits__list > *:nth-child(2) { animation-delay: 70ms; }
.benefits__list > *:nth-child(3) { animation-delay: 140ms; }
.benefits__list > *:nth-child(4) { animation-delay: 210ms; }

/* Cartões: levantam ao passar o mouse */
.product-card,
.category-card,
.benefit {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

@media (hover: hover) {
  .product-card:hover { transform: translateY(-4px); }
  .category-card:hover { transform: translateY(-4px); }
  .benefit:hover .icon { transform: scale(1.12) rotate(-4deg); }
}

.benefit .icon { transition: transform var(--dur) var(--ease); }

/* Botões: sobem um pouco e "afundam" ao clicar */
.btn {
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast), color var(--dur-fast),
    border-color var(--dur-fast), box-shadow var(--dur) var(--ease);
}

@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn--primary:hover { box-shadow: 0 8px 20px rgba(253, 204, 3, 0.35); }
}

.btn:active { transform: translateY(0) scale(0.98); }

/* Links do rodapé deslizam */
.footer__links a { display: inline-block; transition: transform var(--dur) var(--ease), color var(--dur-fast); }
@media (hover: hover) { .footer__links a:hover { transform: translateX(4px); } }

/* Carrinho: contador "pula" ao adicionar item */
.counter-badge.is-bumped { animation: pop 0.45s var(--ease); }

/* Botão do WhatsApp flutuante respira de leve */
.whatsapp-float { animation: fade-up 0.6s var(--ease) 0.8s backwards; }
@keyframes float-ring { to { transform: scale(1.5); opacity: 0; } }
.whatsapp-float { position: fixed; }
.whatsapp-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--whatsapp);
  /* pulsa algumas vezes e para (animação infinita gasta bateria à toa) */
  animation: float-ring 2.6s ease-out 1.4s 4;
  pointer-events: none;
}

/* Campos de formulário: foco suave */
.field__input { transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); }

/* Faixa CTA e título das seções: entram com leve atraso */
.reveal { transition-duration: 0.7s; }

/* Troca de página: transição suave entre páginas (Chrome, Edge, Safari) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.22s; animation-timing-function: var(--ease); }

/* Rodapé e faixa de orçamento entram em sequência ao rolar */
.footer__cols > .reveal:nth-child(2) { transition-delay: 70ms; }
.footer__cols > .reveal:nth-child(3) { transition-delay: 140ms; }
.footer__cols > .reveal:nth-child(4) { transition-delay: 210ms; }
.cta-band .btn.reveal { transition-delay: 120ms; }

/* Conteúdo que chega depois (abas, telas do painel, listas) aparece suave */
.account__panel > *,
.checkout__main > *,
.live-order,
.addr,
.order-row {
  animation: fade-up 0.4s var(--ease) backwards;
}
.checkout__main > *:nth-child(2) { animation-delay: 60ms; }
.checkout__main > *:nth-child(3) { animation-delay: 120ms; }
.checkout__main > *:nth-child(4) { animation-delay: 180ms; }
.live-order:nth-child(2), .addr:nth-child(2), .order-row:nth-child(2) { animation-delay: 60ms; }
.live-order:nth-child(3), .addr:nth-child(3), .order-row:nth-child(3) { animation-delay: 120ms; }

/* Imagens de produto: leve zoom ao passar o mouse */
.product-card__media img { transition: transform 0.5s var(--ease); }
@media (hover: hover) { .product-card:hover .product-card__media img { transform: scale(1.05); } }

/* Botão "Confirmar pedido" destrava com suavidade */
.checkout-summary [data-submit] { transition: opacity var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); }
.checkout-summary__missing:not([hidden]) { animation: fade-in 0.3s var(--ease); }

/* Ícones de ação: setas andam um pouco no hover */
.icon--arrow { transition: transform var(--dur) var(--ease); }
@media (hover: hover) { a:hover > .icon--arrow, .btn:hover > .icon--arrow { transform: translateX(3px); } }

/* Campos: o rótulo acompanha o foco */
.field:focus-within .field__label { color: var(--navy-700); transition: color var(--dur-fast); }

/* Partes longas fora da tela não pesam até chegar perto (rolagem mais leve) */
.faq, .footer { content-visibility: auto; contain-intrinsic-size: auto 700px; }

/* Quem prefere menos movimento não vê nada disso */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}