/* ==========================================================================
   MOVIMENTO: só transform e opacity. Tudo que esconde conteúdo fica atrás
   de html.js e de prefers-reduced-motion: no-preference.
   ========================================================================== */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Título e subtítulo do hero: já visíveis na primeira pintura, só deslizam */
@keyframes rise {
  from { transform: translateY(10px); }
  to { transform: none; }
}

@keyframes typing {
  0%, 100% { opacity: 0.35; transform: none; }
  50% { opacity: 1; transform: translateY(-3px); }
}

@keyframes cursor-click {
  0% { opacity: 0; transform: translate(60px, 50px); }
  15% { opacity: 1; }
  55% { opacity: 1; transform: translate(0, 0); }
  62% { transform: translate(0, 0) scale(0.85); }
  70% { transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes slide-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {

  /* ---- Entrada do topo da página ---- */
  .js .load-in {
    animation: fade-up 700ms var(--ease-out) both;
  }

  .js .hero-title.load-in,
  .js .hero-lead.load-in {
    animation-name: rise;
  }

  .js .load-in-2 { animation-delay: 80ms; }
  .js .load-in-3 { animation-delay: 160ms; }
  .js .load-in-4 { animation-delay: 260ms; animation-duration: 900ms; }

  /* ---- Entrada ao rolar (uma vez) ---- */
  .js [data-reveal],
  .js [data-stagger] > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-expo);
  }

  .js [data-reveal].is-in,
  .js [data-stagger].is-in > * {
    opacity: 1;
    transform: none;
  }

  .js [data-stagger].is-in > :nth-child(2) { transition-delay: calc(var(--stagger-item) * 1); }
  .js [data-stagger].is-in > :nth-child(3) { transition-delay: calc(var(--stagger-item) * 2); }
  .js [data-stagger].is-in > :nth-child(4) { transition-delay: calc(var(--stagger-item) * 3); }
  .js [data-stagger].is-in > :nth-child(5) { transition-delay: calc(var(--stagger-item) * 4); }
  .js [data-stagger].is-in > :nth-child(6) { transition-delay: calc(var(--stagger-item) * 5); }
  .js [data-stagger].is-in > :nth-child(7) { transition-delay: calc(var(--stagger-item) * 6); }
  .js [data-stagger].is-in > :nth-child(8) { transition-delay: calc(var(--stagger-item) * 7); }

  /* ---- Prévia do hero ---- */
  .js [data-hero-demo] .mock-notif,
  .js [data-hero-demo] .mock-flow-step {
    opacity: 0;
  }

  .js [data-hero-demo].is-lead .mock-notif {
    animation: slide-in 450ms var(--ease-out) both;
  }

  .js [data-hero-demo].is-lead .mock-flow-step {
    opacity: 1;
    transition: opacity 300ms ease 700ms;
  }

  .js [data-hero-demo].is-lead .mock-flow-step + .mock-flow-step {
    transition-delay: 1100ms;
  }

  .js [data-hero-demo].is-clicking .mock-cursor {
    animation: cursor-click 1300ms var(--ease-out) both;
  }

  .js [data-hero-demo].is-press .mock-lp-btn {
    transform: scale(0.96);
    filter: brightness(1.15);
  }

  .js [data-hero-demo] .mock-bars .is-today {
    transform: scaleY(0.85);
  }

  .js [data-hero-demo].is-lead .mock-bars .is-today {
    transform: none;
  }

  /* ---- Notas do Lighthouse ---- */
  .js .bento .score-fill {
    stroke-dashoffset: 175.93;
    transition: stroke-dashoffset 1400ms var(--ease-expo) 300ms;
  }

  .js .bento.is-in .score-fill {
    stroke-dashoffset: 0;
  }

  .js .bento.is-in .score-fill.score-99 {
    stroke-dashoffset: 1.76;
  }

  /* ---- Contatos chegando no WhatsApp ---- */
  .js .bento .wa-pill {
    transform: translateY(-10px);
    opacity: 0;
    transition: opacity 400ms ease, transform 500ms var(--ease-out);
  }

  .js .bento.is-in .wa-pill:nth-child(1) { opacity: 1; transform: none; transition-delay: 900ms; }
  .js .bento.is-in .wa-pill:nth-child(2) { opacity: 0.75; transform: none; transition-delay: 600ms; }
  .js .bento.is-in .wa-pill:nth-child(3) { opacity: 0.5; transform: none; transition-delay: 300ms; }

  /* ---- Barras do gráfico ---- */
  .js .bento .bar i {
    transform: scaleY(0);
    transition: transform 900ms var(--ease-expo);
  }

  .js .bento.is-in .bar i { transform: none; }
  .js .bento.is-in .bar-2 i { transition-delay: 60ms; }
  .js .bento.is-in .bar-3 i { transition-delay: 120ms; }
  .js .bento.is-in .bar-4 i { transition-delay: 180ms; }
  .js .bento.is-in .bar-5 i { transition-delay: 240ms; }
  .js .bento.is-in .bar-6 i { transition-delay: 300ms; }
  .js .bento.is-in .bar-7 i { transition-delay: 360ms; }

  /* ---- Linha do processo se preenchendo ---- */
  .js .steps::after {
    transform: scaleX(0);
    transition: transform 1600ms var(--ease-expo) 200ms;
  }

  .js .steps.is-in::after {
    transform: none;
  }

  .js .steps .process-step {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 500ms ease, transform 700ms var(--ease-out);
  }

  .js .steps.is-in .process-step { opacity: 1; transform: none; }
  .js .steps.is-in .process-step:nth-child(2) { transition-delay: 250ms; }
  .js .steps.is-in .process-step:nth-child(3) { transition-delay: 500ms; }
  .js .steps.is-in .process-step:nth-child(4) { transition-delay: 750ms; }

  .js .steps[data-reveal] {
    opacity: 1;
    transform: none;
  }

  /* ---- Demo do WhatsApp ---- */
  .msg.is-new {
    animation: fade-up 360ms var(--ease-out) both;
  }

  .msg-typing i {
    animation: typing 1s ease-in-out infinite;
  }

  .msg-typing i:nth-child(2) { animation-delay: 150ms; }
  .msg-typing i:nth-child(3) { animation-delay: 300ms; }
}