/* =========================================================
   Camada de movimento — pode ser removida sem quebrar o layout.
   Estados iniciais ocultos só valem com html.js e sem .reduced-motion.
   ========================================================= */

:root {
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-soft: cubic-bezier(.33, 0, .15, 1);
}

/* ---------- 1. Barra de progresso ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120; pointer-events: none; }
.progress__bar { display: block; height: 100%; background: linear-gradient(90deg, var(--bronze), var(--sage)); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }

/* ---------- 2. Navegação que muda ao rolar ---------- */
.nav { transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, -webkit-backdrop-filter .35s, backdrop-filter .35s; }
.nav.scrolled {
  background: rgba(251, 248, 243, .78);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -18px rgba(40, 30, 15, .35);
}

/* ---------- 3. Entrada escalonada do hero ---------- */
.split .line { overflow: hidden; padding: .14em .08em .1em 0; margin: -.14em 0 -.1em; }
.split .w { display: inline-block; }
.js:not(.reduced-motion) .split .w { transform: translateY(110%); opacity: 0; }
.split.is-in .w {
  transform: translateY(0) !important; opacity: 1 !important;
  transition: transform .9s var(--ease-out), opacity .7s ease;
  transition-delay: calc(var(--wi, 0) * 140ms);
}

.js:not(.reduced-motion) .hero-seq { opacity: 0; transform: translateY(18px); }
.hero.is-in .hero-seq {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform .9s var(--ease-out);
  transition-delay: calc(250ms + var(--i, 0) * 140ms);
}

/* ---------- 9. Métricas ---------- */
.js:not(.reduced-motion) .metric { opacity: 0; transform: scale(.94) translateY(8px); transform-origin: left bottom; }
.hero.is-in .metric {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .8s var(--ease-out);
  transition-delay: calc(1050ms + var(--i, 0) * 120ms);
}

/* ---------- 6. Reveal das seções ---------- */
.js:not(.reduced-motion) .reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0ms);
}
.js:not(.reduced-motion) .reveal-up.in { opacity: 1; transform: translateY(0); }
/* item 2 da prova visual mantém o deslocamento editorial no desktop */
@media (min-width: 861px) {
  .js:not(.reduced-motion) .proof__item.reveal-up:nth-child(2) { transform: translateY(56px); }
  .js:not(.reduced-motion) .proof__item.reveal-up.in:nth-child(2) { transform: translateY(32px); }
}

/* ---------- 7. Títulos com stutter editorial ---------- */
.stutter .sw { display: inline-block; }
.js:not(.reduced-motion) .stutter .sw { opacity: 0; }
.stutter.in .sw { animation: stutter .62s steps(1, end) both, stutterSlide .62s var(--ease-out) both; animation-delay: calc(var(--g, 0) * 90ms); }
@keyframes stutter {
  0% { opacity: 0; } 22% { opacity: .55; } 38% { opacity: .2; } 56% { opacity: .85; } 72% { opacity: .6; } 100% { opacity: 1; }
}
@keyframes stutterSlide {
  0% { transform: translateX(-10px); } 40% { transform: translateX(3px); } 70% { transform: translateX(-1px); } 100% { transform: none; }
}

/* ---------- 8. Cards de tratamentos ---------- */
.treat { transition: transform .45s var(--ease-out), border-color .35s, background-color .35s, box-shadow .45s; }
.treat::after { transition: transform .6s var(--ease-out), opacity .4s; }
.treat .treat__benefit .ico { transition: transform .35s var(--ease-out); }
@media (hover: hover) {
  .treat:not(.treat--cta):hover { transform: translateY(-4px); border-color: var(--bronze); background: #FFFCF6; box-shadow: var(--shadow); }
  .treat:hover::after { transform: scaleX(1); opacity: 1; }
  .treat:hover .treat__benefit .ico { transform: translateX(4px); }
}
.treat:not(.treat--cta):active { transform: translateY(-2px); border-color: var(--bronze); }
.treat.in::after { transform: scaleX(.3); }

/* ---------- 10. Imagens de autoridade ---------- */
.img-hover img { transition: transform 1.1s var(--ease-soft), filter .6s ease; }
.img-hover .img-cap, .about__seal { transition: transform .6s var(--ease-out), background-color .4s; }
@media (hover: hover) {
  .img-hover:hover img { transform: scale(1.03); filter: contrast(1.04); }
  .img-hover:hover .img-cap { transform: translateY(-4px); }
  .about__media:hover .about__seal { transform: translateY(-3px) rotate(-2deg); }
  .proof__item:hover .proof__img { border-color: var(--bronze); }
}

/* Selo técnico do hero — flutuação mínima */
.seal { animation: float 7s ease-in-out infinite; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* ---------- 4. Onda SVG ---------- */
.wave__track { animation: waveDrift 38s linear infinite; }
.wave--loc .wave__track { animation-duration: 52s; animation-direction: reverse; }
.wave.is-paused .wave__track { animation-play-state: paused; }
@keyframes waveDrift { from { transform: translateX(0); } to { transform: translateX(-1200px); } }

/* ---------- 11. Faixa de imagens (marquee lento) ---------- */
.js:not(.reduced-motion) .strip__track.is-marquee { animation: marquee 70s linear infinite; }
.strip__viewport:hover .strip__track, .strip__viewport:focus-within .strip__track, .strip__track.is-paused { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
.strip__track li img { transition: transform .8s var(--ease-soft); }
@media (hover: hover) { .strip__track li:hover img { transform: scale(1.04); } }
.reduced-motion .strip__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }

/* ---------- 12. Depoimentos ---------- */
.test { transition: transform .45s var(--ease-out), border-color .35s, box-shadow .45s; }
@media (hover: hover) { .test:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow); } }
.js:not(.reduced-motion) .test .stars svg { opacity: 0; transform: scale(.6); }
.test.in .stars svg { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s var(--ease-out); }
.test.in .stars svg:nth-child(2) { transition-delay: 80ms; }
.test.in .stars svg:nth-child(3) { transition-delay: 160ms; }
.test.in .stars svg:nth-child(4) { transition-delay: 240ms; }
.test.in .stars svg:nth-child(5) { transition-delay: 320ms; }

/* ---------- Por que escolher: linhas que se desenham ---------- */
.why__line { transform: scaleX(1); transform-origin: left; }
.js:not(.reduced-motion) .why__list .reveal-up .why__line { transform: scaleX(0); }
.why__list .reveal-up.in .why__line { transform: scaleX(1); transition: transform 1.1s var(--ease-out) .2s; }

/* ---------- 13. FAQ ---------- */
.acc__panel { transition: grid-template-rows .45s var(--ease-out), visibility 0s linear .45s; }
.acc__panel.is-open { transition: grid-template-rows .45s var(--ease-out), visibility 0s; }
.acc__inner p { opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .35s var(--ease-out); }
.acc__panel.is-open .acc__inner p { opacity: 1; transform: none; transition-delay: .08s; }
.acc__ico { transition: background-color .3s, color .3s, border-color .3s; }
.acc__ico::after { transition: transform .35s var(--ease-out); }

/* ---------- 14. Ripple ---------- */
.ripple { position: relative; overflow: hidden; }
.ripple__wave {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  background: currentColor; opacity: .18; transform: scale(0);
  animation: ripple .62s ease-out forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- 16. Pulso do WhatsApp (suave) ---------- */
.btn--pulse::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -2;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .45);
  animation: pulse 3.2s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .38); }
  60%, 100% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
}
.btn--pulse { overflow: visible; }
.btn--pulse .ripple__wave { z-index: 0; }

/* ---------- Botão flutuante ---------- */
.fab { transition: transform .45s var(--ease-out), opacity .35s ease; }
.js .fab { transform: translateY(140%); opacity: 0; }
.js .fab.is-visible { transform: none; opacity: 1; }

/* ---------- Mapa ---------- */
.loc__map iframe { opacity: 0; transition: opacity .8s ease; }
.loc__map iframe.is-loaded { opacity: 1; }

/* ---------- Fallback: se o JS de movimento não rodar em 4s, mostra tudo ---------- */
.motion-failsafe:not(.motion-ready) .split .w,
.motion-failsafe:not(.motion-ready) .hero-seq,
.motion-failsafe:not(.motion-ready) .metric,
.motion-failsafe:not(.motion-ready) .reveal-up,
.motion-failsafe:not(.motion-ready) .stutter .sw,
.motion-failsafe:not(.motion-ready) .test .stars svg { opacity: 1 !important; transform: none !important; }
.motion-failsafe:not(.motion-ready) .loc__map iframe { opacity: 1; }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .btn--pulse::before, .seal { animation: none !important; }
  .progress__bar { transition: none; }
}