/* Bichos & Cia 9.1.0 · camada de movimento do site público
   - fundo líquido: formas SVG que se transformam devagar nos topos escuros
   - metamorfose: menu ☰ → ✕ e confirmação do "Adicionar"
   - botões magnéticos (só com mouse) e glitch discreto nas etiquetas
   - entrada suave dos cartões conforme a rolagem
   Só transform/opacity (não pesa no celular). Quem pede "reduzir movimento"
   no aparelho não vê nada disso. Sem biblioteca externa. */

:root {
  --mv-ease: cubic-bezier(.2, .8, .2, 1);
  --mv-spring: cubic-bezier(.25, 1.6, .4, 1);
  --mv-teal: #2fd1cf;
  --mv-gold: #f0c46a;
  --mv-rose: #ff7aa8;
}

/* ---------- Fundo líquido (inserido pelo motion-v910.js) ---------- */
.mv-liquid-host { isolation: isolate; }
.mv-liquid {
  display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  border-radius: inherit;
}
.mv-liquid svg { position: absolute; inset: -12%; width: 124%; height: 124%; filter: blur(34px) saturate(1.15); opacity: .62; }
.mv-liquid path { mix-blend-mode: screen; }

/* ---------- Menu ☰ → ✕ ---------- */
.bc-site .nav-toggle span { transition: transform .35s var(--mv-ease), opacity .25s ease, width .3s var(--mv-ease); transform-origin: center; }
.bc-site .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bc-site .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.bc-site .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Botões magnéticos ---------- */
.mv-magnetic { transition: transform .55s var(--mv-spring), box-shadow .3s ease; will-change: transform; }
.mv-magnetic.is-pulled { transition: transform .12s linear, box-shadow .3s ease; }
.mv-magnetic.is-pulled:not(:disabled) { box-shadow: 0 14px 34px rgba(7, 29, 53, .22); }

/* ---------- "Adicionar": pulso de confirmação ---------- */
[data-add-product].mv-added {
  background: #12a36b !important; color: #fff !important;
  animation: mv-added .6s var(--mv-ease);
}
@keyframes mv-added {
  0% { box-shadow: 0 0 0 0 rgba(18, 163, 107, .55); transform: scale(.96); }
  60% { box-shadow: 0 0 0 12px rgba(18, 163, 107, 0); transform: scale(1.03); }
  100% { box-shadow: 0 0 0 0 rgba(18, 163, 107, 0); transform: scale(1); }
}
/* Sacola flutuante "pula" quando entra um item. */
.mv-bump { animation: mv-bump .5s var(--mv-spring); }
@keyframes mv-bump { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* ---------- Glitch discreto nas etiquetas de seção ---------- */
.bc-site .section-kicker { display: inline-block; }
.bc-site .section-kicker.mv-glitch { animation: mv-glitch .42s steps(2, end) 1; }
@keyframes mv-glitch {
  0%   { text-shadow: none; transform: none; }
  20%  { text-shadow: -2px 0 var(--mv-teal), 2px 0 var(--mv-rose); transform: translateX(1px); clip-path: inset(0 0 45% 0); }
  40%  { text-shadow: 2px 0 var(--mv-teal), -2px 0 var(--mv-gold); transform: translateX(-1px); clip-path: inset(40% 0 0 0); }
  60%  { text-shadow: -1px 0 var(--mv-rose), 1px 0 var(--mv-teal); transform: none; clip-path: inset(0); }
  100% { text-shadow: none; transform: none; clip-path: none; }
}

/* ---------- Entrada suave ao rolar ---------- */
html.mv-on .mv-reveal { opacity: 0; transform: translateY(18px); }
html.mv-on .mv-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--mv-ease) calc(var(--mv-i, 0) * 55ms), transform .7s var(--mv-ease) calc(var(--mv-i, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
  .mv-liquid { display: none !important; }
  .bc-site .nav-toggle span, .mv-magnetic { transition: none !important; }
  [data-add-product].mv-added, .mv-bump, .bc-site .section-kicker.mv-glitch { animation: none !important; }
  html.mv-on .mv-reveal { opacity: 1 !important; transform: none !important; }
}