/* ==========================================================================
   GULFIER — animations.css
   Animações suaves e discretas: reveal ao rolar, hover states, entrada do hero
   ========================================================================== */

/* ---------- Reveal ao rolar (controlado via IntersectionObserver em animation.js) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Atraso escalonado para grupos (cards) */
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* ---------- Entrada do Hero (roda uma vez ao carregar a página) ---------- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero__eyebrow { animation: heroFadeUp 0.7s var(--ease) 0.05s both; }
.hero__title { animation: heroFadeUp 0.75s var(--ease) 0.15s both; }
.hero__subtitle { animation: heroFadeUp 0.75s var(--ease) 0.25s both; }
.hero__actions { animation: heroFadeUp 0.75s var(--ease) 0.35s both; }
.hero__stats { animation: heroFadeUp 0.75s var(--ease) 0.45s both; }

@keyframes heroMediaIn {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}
.hero__media { animation: heroMediaIn 1s var(--ease) both; }

@keyframes ribbonIn {
  from { opacity: 0; transform: rotate(35deg) translateY(-14px); }
  to { opacity: 1; transform: rotate(35deg) translateY(0); }
}
.hero__ribbon { animation: ribbonIn 0.6s var(--ease) 0.6s both; }

/* ---------- Contadores numéricos (estatísticas do hero / diferenciais) ---------- */
.count-up { font-variant-numeric: tabular-nums; }

/* ---------- Pulso sutil no botão flutuante do WhatsApp ---------- */
@keyframes pulseSoft {
  0%, 100% { box-shadow: 0 10px 26px rgba(33,195,90,0.45), 0 0 0 0 rgba(33,195,90,0.35); }
  50% { box-shadow: 0 10px 26px rgba(33,195,90,0.45), 0 0 0 12px rgba(33,195,90,0); }
}
.whatsapp-float { animation: pulseSoft 2.8s ease-in-out infinite; }

/* ---------- Marquee suave para a faixa de marcas (opcional, ativado via JS/classe) ---------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.brands.is-marquee {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}

/* ---------- Skeleton shimmer para placeholders de imagem enquanto carregam ---------- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.img-placeholder.is-loading {
  background: linear-gradient(90deg, var(--gray-50) 25%, var(--gray-100) 50%, var(--gray-50) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}

/* ---------- Acordeão / rotação de ícones já usa transition no style.css ---------- */

/* ---------- Header: sombra ao rolar já usa transition no style.css ---------- */

/* ---------- Micro-interação nos ícones de categoria ---------- */
@keyframes iconPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.cat-card:hover .cat-card__icon svg { animation: iconPop 0.4s var(--ease); }

/* ---------- Linha decorativa "fita métrica" usada em divisores ---------- */
@keyframes tapeSlide {
  from { background-position-x: 0; }
  to { background-position-x: 34px; }
}