/* =========================================================
   BeDog — camada de MOVIMENTO (v2.3 — enxuta)
   Para desligar tudo: remover motion.css e motion.js das páginas.
   Só age quando o JS adiciona .motion-on ao <html>
   (e nunca com "reduzir movimento" ativado no aparelho).
   ========================================================= */

/* rolagem suave é feita pelo Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* as entradas passam a ser controladas pelo GSAP */
.motion-on .reveal { transition: none; }

/* cabeçalho encolhe ao rolar */
.motion-on .nav { transition: min-height .3s ease; }
.motion-on .brand img { transition: width .3s ease; }
.motion-on .site-header.is-scrolled .nav { min-height: 62px; }
.motion-on .site-header.is-scrolled .brand img { width: 116px; }

/* sublinhado "desenhado" quando entra na tela */
.motion-on .squiggle::after { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.65,0,.35,1) .25s; }
.motion-on .squiggle.is-drawn::after { clip-path: inset(0 0 0 0); }

/* linha tracejada das 3 fases desenha com a rolagem */
.motion-on .steps::before { transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
@media (max-width: 760px) { .motion-on .steps::before { transform: scaleY(var(--p, 0)); transform-origin: 50% 0; } }

/* títulos palavra por palavra */
.split-word { display: inline-block; will-change: transform, opacity; }

/* WhatsApp: pulso para chamar atenção */
.wa-float::before { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 3px solid #25D366; opacity: 0; pointer-events: none; }
.motion-on .wa-float::before { animation: wa-pulse 2.8s ease-out 3 3s; /* pulsa 3x e para */ }
@keyframes wa-pulse { 0% { opacity: .7; transform: scale(.9); } 70%, 100% { opacity: 0; transform: scale(1.18); } }

/* balão da Nala */
.nala-bubble { position: fixed; right: clamp(14px, 2.5vw, 26px); bottom: calc(clamp(14px, 2.5vw, 26px) + 74px); z-index: 91; max-width: 260px;
  background: #FFFDF9; border: var(--border); border-radius: 18px 18px 4px 18px; box-shadow: var(--shadow-s); padding: 14px 40px 14px 16px;
  font-weight: 700; color: var(--ink); font-size: .95rem; line-height: 1.35; opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease; }
.nala-bubble.is-on { opacity: 1; transform: none; pointer-events: auto; }
.nala-bubble a { color: var(--teal); }
.nala-bubble button { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--brown); background: var(--amber); font-size: 1rem; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .nala-bubble { display: none; }
}