/* =============================================================
   HEALTH MERCANTIL — Animações e Scroll Reveal
   ============================================================= */

/* ─── Scroll reveal ─────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

[data-reveal="up"]    { transform: translateY(24px); }
[data-reveal="down"]  { transform: translateY(-24px); }
[data-reveal="left"]  { transform: translateX(24px); }
[data-reveal="right"] { transform: translateX(-24px); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Delays encadeados para grupos de cards */
[data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-delay="4"] { transition-delay: 320ms; }

/* ─── Lazy load de imagens ───────────────────────────────────── */
img[data-src] {
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

img.loaded {
  opacity: 1;
}

/* ─── Hover em cards de solução ─────────────────────────────── */
.solution-card {
  position: relative;
  overflow: hidden;
}

.solution-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-accent-light) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
  border-radius: inherit;
  pointer-events: none;
}

.solution-card:hover::before { opacity: 1; }

/* ─── Pulse no CTA WhatsApp ──────────────────────────────────── */
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 0; }
}

.btn--whatsapp {
  position: relative;
}

.btn--whatsapp::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-accent);
  animation: pulse-ring 2s ease-out infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn--whatsapp::after { display: none; }
}