/* ==========================================================================
   Mestre Piso — camada de movimento (mp-motion)
   Leve: só transform/opacity. Sem imagens, sem libs, ~2 KB gzip.
   Inclua DEPOIS do styles.css:
     <link rel="stylesheet" href="mp-motion.css" />
   ========================================================================== */

/* --- 1. Desliga as animações permanentes antigas (float / shine / fade global) --- */
.hero img,
.hero .hero-image img,
.hero .phone img,
.hero .mockup img,
.mp-hero-float,
.mp-cta-shine,
.btn-primary,
.btn.btn-primary,
main,
section,
.card,
.feature,
.plan,
.pricing-card {
  animation: none !important;
}
.mp-cta-shine,
.btn-primary,
.btn.btn-primary {
  background-size: auto !important;
}

/* --- 2. Entrada ao rolar ------------------------------------------------- */
/* Só esconde se o JS estiver ativo (html.mp-motion), nunca sem JS. */
.mp-motion .mp-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--mp-d, 0s);
  will-change: opacity, transform;
}
.mp-motion .mp-reveal.mp-left  { transform: translate3d(-20px, 0, 0); }
.mp-motion .mp-reveal.mp-right { transform: translate3d(20px, 0, 0); }
.mp-motion .mp-reveal.mp-scale { transform: translate3d(0, 14px, 0) scale(.985); }

.mp-motion .mp-reveal.mp-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --- 3. Microinterações (hover discreto) --------------------------------- */
.btn,
a.btn,
button.btn {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover,
a.btn:hover {
  transform: translateY(-2px);
}
.btn:active,
a.btn:active {
  transform: translateY(0);
  transition-duration: .06s;
}

.card,
.plan,
.tcard,
.step {
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease;
}
.card:hover,
.tcard:hover {
  transform: translateY(-4px);
}
.plan:hover {
  transform: translateY(-3px);
}

.card .icon {
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.card:hover .icon {
  transform: translateY(-2px) scale(1.06);
}

.card img,
.img-card img,
.hero-card img {
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.card:hover img,
.img-card:hover img {
  transform: scale(1.02);
}

.menu a,
.footer a {
  transition: color .16s ease, opacity .16s ease;
}

.playstore-badge {
  transition: transform .18s ease, box-shadow .18s ease;
}
.playstore-badge:hover {
  transform: translateY(-2px);
}

/* Foco de teclado sempre visível */
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue2, #2563eb);
  outline-offset: 2px;
}

/* --- 4. Barra de prova social: números contando -------------------------- */
.sp-num {
  font-variant-numeric: tabular-nums;
}

/* --- 5. FAQ: abertura mais suave ----------------------------------------- */
.faq-q::after {
  content: "＋" !important;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), color .2s ease;
}
.faq-item.open .faq-q::after {
  transform: rotate(45deg);
}
.faq-a {
  transition: max-height .32s cubic-bezier(.2, .8, .2, 1), padding .32s ease, opacity .28s ease;
  opacity: 0;
}
.faq-item.open .faq-a {
  max-height: 520px;
  opacity: 1;
}
.faq-q {
  transition: background-color .18s ease;
}
.faq-q:hover {
  background-color: rgba(37, 99, 235, .04);
}

/* --- 6. Modal de suporte -------------------------------------------------- */
.modal-overlay {
  transition: opacity .22s ease;
}
.modal-card {
  transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .22s ease;
}
.mp-motion .modal-overlay:not(.open) .modal-card {
  transform: translateY(12px) scale(.98);
}

/* --- 7. Respeitar prefers-reduced-motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mp-motion .mp-reveal,
  .mp-motion .mp-reveal.mp-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  * {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}