/* =============================================================
   Loja Chuva v2.0 - animations.css
   -------------------------------------------------------------
   Animacoes suaves de entrada (scroll), hover e micro-interacoes.
   Tudo respeita prefers-reduced-motion.
   ============================================================= */

/* ---- Entrada ao rolar (controlada por main.js via .is-visible) ---- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease, ease), transform 0.7s var(--ease, ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Entrada escalonada (stagger) dos itens dentro das grades */
.product-grid .reveal:nth-child(1),
.category-grid .reveal:nth-child(1),
.service-grid .reveal:nth-child(1) { transition-delay: 0.04s; }
.product-grid .reveal:nth-child(2),
.category-grid .reveal:nth-child(2),
.service-grid .reveal:nth-child(2) { transition-delay: 0.12s; }
.product-grid .reveal:nth-child(3),
.category-grid .reveal:nth-child(3),
.service-grid .reveal:nth-child(3) { transition-delay: 0.20s; }
.product-grid .reveal:nth-child(4),
.category-grid .reveal:nth-child(4),
.service-grid .reveal:nth-child(4) { transition-delay: 0.28s; }
.product-grid .reveal:nth-child(5) { transition-delay: 0.36s; }
.product-grid .reveal:nth-child(6) { transition-delay: 0.44s; }
.product-grid .reveal:nth-child(7) { transition-delay: 0.52s; }
.product-grid .reveal:nth-child(8) { transition-delay: 0.60s; }

/* ---- Pulso sutil no botao flutuante do WhatsApp ---- */
.whatsapp-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
  animation: wa-pulse 2.6s var(--ease, ease) infinite;
}
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ---- Acessibilidade: reduz/disable de movimento ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Garante conteudo sempre visivel sem depender da animacao */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .whatsapp-float::after {
    display: none;
  }
}