/* ================================================
   ANIMAÇÕES - Mercearia Sandra Pernambucana
================================================ */

/* ===== FADE IN UP — elemento entra de baixo ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== FADE IN — aparece suavemente ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===== SCALE IN — cresce do centro ===== */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ===== SLIDE IN RIGHT — vem da direita ===== */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ===== SHIMMER — loading skeleton ===== */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ================================================
   CLASSES UTILITÁRIAS DE ANIMAÇÃO
================================================ */
.anim-fade-up   { animation: fadeInUp 0.6s ease both; }
.anim-fade-in   { animation: fadeIn 0.5s ease both; }
.anim-scale-in  { animation: scaleIn 0.5s ease both; }
.anim-slide-right { animation: slideInRight 0.5s ease both; }

/* delays encadeados */
.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }
.anim-delay-5 { animation-delay: 0.5s; }

/* ================================================
   SCROLL REVEAL — ativa via JS
================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* stagger automático para filhos de grid */
.reveal-grid > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-grid > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-grid > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-grid > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-grid > *:nth-child(5) { transition-delay: 0.33s; }
.reveal-grid > *:nth-child(6) { transition-delay: 0.40s; }
.reveal-grid > *:nth-child(7) { transition-delay: 0.47s; }
.reveal-grid > *:nth-child(8) { transition-delay: 0.54s; }

/* ================================================
   HERO — animação de entrada
================================================ */
.hero__eyebrow  { animation: fadeInUp 0.5s ease 0.1s both; }
.hero__title    { animation: fadeInUp 0.6s ease 0.2s both; }
.hero__subtitle { animation: fadeInUp 0.6s ease 0.35s both; }
.hero__actions  { animation: fadeInUp 0.6s ease 0.45s both; }
.hero__meta     { animation: fadeInUp 0.5s ease 0.55s both; }
.hero__highlight { animation: scaleIn 0.7s ease 0.3s both; }

/* ================================================
   HEADER — entra suave ao carregar
================================================ */
.site-header {
  animation: fadeIn 0.4s ease both;
}

/* ================================================
   PRODUCT CARDS — hover com elevação
================================================ */
.product-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(109, 40, 217, 0.2);
}
.product-card__image {
  transition: transform 0.4s ease;
}
.product-card:hover .product-card__image {
  transform: scale(1.06);
}

/* ================================================
   COLLECTION CARDS — hover
================================================ */
.collections-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.collections-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(109, 40, 217, 0.2);
}

/* ================================================
   CONTACT CARDS — hover
================================================ */
.contact-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.contact-card:hover {
  transform: translateY(-5px);
}

/* ================================================
   BOTÕES — feedback ao clicar
================================================ */
.btn {
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* ================================================
   WHATSAPP FLOAT — pulso contínuo
================================================ */
@keyframes waPulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.whatsapp-float {
  animation: waPulse 2.2s infinite;
  transition: transform 0.2s;
}
.whatsapp-float:hover { transform: scale(1.1); }

/* ================================================
   NAVBAR LINKS — underline animado
================================================ */
.site-header__link {
  position: relative;
}
.site-header__link::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: #6d28d9;
  border-radius: 2px;
  transition: width 0.25s ease;
}
.site-header__link:hover::after,
.site-header__link.is-active::after {
  width: 100%;
}

/* ================================================
   HERO CARD — brilho animado
================================================ */
@keyframes heroCardGlow {
  0%, 100% { box-shadow: 0 0 30px rgba(109,40,217,0.15); }
  50%       { box-shadow: 0 0 60px rgba(109,40,217,0.35); }
}
.hero-card {
  animation: heroCardGlow 3s ease-in-out infinite;
}

/* ================================================
   PAGE TRANSITIONS — fade ao entrar
================================================ */
main {
  animation: fadeIn 0.4s ease both;
}

/* ================================================
   SKELETON LOADING
================================================ */
.skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #2d3748 50%, #1e293b 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* ================================================
   MOBILE — reduz animações pesadas
================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}