/* ============================================================
   REAL CREDI — Sistema de animações (seção 6 do debriefing)
   Apenas transform/opacity (GPU). prefers-reduced-motion
   desliga tudo; conteúdo visível por padrão sem JS.
   ============================================================ */

/* =========================
   REVEAL ON SCROLL
   A classe .reveal só esconde se o JS carregou (html.js).
   ========================= */
html.js .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity var(--dur-section) var(--ease-brand),
    transform var(--dur-section) var(--ease-brand);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}

html.js .reveal--left  { transform: translateX(-40px); }
html.js .reveal--right { transform: translateX(40px); }
html.js .reveal--zoom  { transform: scale(.92); }

html.js .reveal.in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Clip-path reveal da foto institucional */
html.js .reveal--clip {
  clip-path: inset(12% 12% 12% 12% round var(--radius-card));
  transition:
    opacity var(--dur-section) var(--ease-brand),
    transform var(--dur-section) var(--ease-brand),
    clip-path .9s var(--ease-brand);
}

html.js .reveal--clip.in {
  clip-path: inset(0 0 0 0 round var(--radius-card));
}

/* =========================
   KEYFRAMES
   ========================= */

/* Headline palavra a palavra (hero) */
@keyframes word-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Card Pix flutuante — translateY ±8px, 4s */
@keyframes float-loop {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Pulse do anel do CTA primário a cada 6s */
@keyframes cta-pulse {
  0%, 88%  { opacity: 0; transform: scale(1); }
  92%      { opacity: .7; transform: scale(1); }
  100%     { opacity: 0; transform: scale(1.18); }
}

/* Micro-bounce do ícone nos cards de benefícios */
@keyframes icon-bounce {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-7px) scale(1.05); }
  70%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

/* Marquee de depoimentos (conteúdo duplicado via JS = -50%) */
@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Draw do check SVG (requisitos) */
@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

/* =========================
   PREFERS-REDUCED-MOTION
   Desativa parallax, marquee, reveals, floats e pulses.
   ========================= */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal--left,
  html.js .reveal--right,
  html.js .reveal--zoom,
  html.js .reveal--clip {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .hero h1 .word {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .float-card,
  .btn--pulse::after,
  .marquee,
  .marquee--reverse,
  .benefit-card:hover .icon-circle {
    animation: none !important;
  }

  .brand-arc { transform: none !important; }

  .req-check path { stroke-dashoffset: 0 !important; animation: none !important; }

  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}