/* ===== ZakariA — camada de animação =====
   Tudo aqui só vale com html.zm (adicionada no <head> quando o usuário não
   pede movimento reduzido). Sem JS ou com prefers-reduced-motion a página
   fica exatamente como o layout estático. */

html.zm { scroll-behavior: smooth; }

/* ---------- Barra de progresso de leitura ---------- */
.zm-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 50;
  background: linear-gradient(90deg, var(--zakaria-laranja), var(--zakaria-amarelo), var(--zakaria-verde), var(--zakaria-azul));
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* ---------- Revelação ao rolar (base) ---------- */
html.zm [data-zm] {
  transition:
    opacity .3s ease var(--d, 0ms),
    transform .5s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms),
    filter .3s ease var(--d, 0ms),
    clip-path .55s cubic-bezier(.77, 0, .18, 1) var(--d, 0ms),
    translate .45s cubic-bezier(.2, .9, .3, 1.3),
    box-shadow .3s ease;
}
html.zm [data-zm].zm-done { --d: 0ms; }

/* sobe desfocando -> nítido */
html.zm [data-zm="rise"]:not(.is-in) { opacity: 0; transform: translateY(40px) scale(.97); filter: blur(8px); }

/* cai de cima */
html.zm [data-zm="drop"]:not(.is-in) { opacity: 0; transform: translateY(-32px) rotate(-6deg); }

/* cartão virando em 3D, de baixo para cima */
html.zm [data-zm="flip"] { transform-origin: 50% 0; }
html.zm [data-zm="flip"]:not(.is-in) { opacity: 0; transform: perspective(900px) translateY(90px) rotateX(-62deg) scale(.9); }

/* cartão subindo com inclinação lateral */
html.zm [data-zm="tilt-in"]:not(.is-in) { opacity: 0; transform: perspective(1000px) translateY(80px) rotateY(-18deg) rotateX(12deg) scale(.92); filter: blur(6px); }
html.zm [data-zm="tilt-in"]:nth-child(even):not(.is-in) { transform: perspective(1000px) translateY(80px) rotateY(18deg) rotateX(12deg) scale(.92); }

/* entrando pelas laterais (comparativo) */
html.zm [data-zm="left"]:not(.is-in)  { opacity: 0; transform: translateX(-160px) rotate(-4deg) scale(.94); filter: blur(8px); }
html.zm [data-zm="right"]:not(.is-in) { opacity: 0; transform: translateX(160px) rotate(4deg) scale(.94); filter: blur(8px); }

/* estouro com mola (ícones, badges, marcas) */
html.zm [data-zm="pop"] { transition-timing-function: ease, cubic-bezier(.34, 1.8, .5, 1), ease, ease, cubic-bezier(.2, .9, .3, 1.3), ease; }
html.zm [data-zm="pop"]:not(.is-in) { opacity: 0; transform: scale(0) rotate(-160deg); }

/* etiquetas */
html.zm [data-zm="tag"] { transition-timing-function: ease, cubic-bezier(.34, 1.7, .5, 1), ease, ease, ease, ease; }
html.zm [data-zm="tag"]:not(.is-in) { opacity: 0; transform: scale(.3) rotate(-10deg); }

/* imagem revelada como cortina + zoom */
html.zm [data-zm="wipe"] { clip-path: inset(0 0 0 0 round 12px); }
html.zm [data-zm="wipe"]:not(.is-in) { clip-path: inset(0 0 100% 0 round 12px); transform: scale(1.15); }

/* balão da foto */
html.zm [data-zm="bubble"] { transform-origin: 0 100%; transition-timing-function: ease, cubic-bezier(.34, 1.9, .5, 1), ease, ease, ease, ease; }
html.zm [data-zm="bubble"]:not(.is-in) { opacity: 0; transform: scale(0) rotate(-12deg); }
html.zm [data-zm="bubble"].zm-done { animation: zm-bob 3.4s ease-in-out infinite; }

/* ---------- Títulos palavra a palavra ---------- */
.zm-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.zm-wi { display: inline-block; }
html.zm [data-zm="words"] .zm-wi {
  transform: translateY(115%) rotate(9deg); transform-origin: 0 100%;
  transition: transform .45s cubic-bezier(.2, 1.1, .3, 1) calc(var(--d, 0ms) + var(--i) * 20ms);
}
html.zm [data-zm="words"].is-in .zm-wi { transform: none; }

/* ---------- Hero: entrada do mascote e formas vivas ---------- */
html.zm .hero-mascot {
  transform-origin: 50% 100%;
  /* sobe de trás da borda do hero e desacelera até parar, sem quique, com a base presa à borda:
     nada de translate para cima nem rotação (que levantaria um canto da base) */
  animation:
    zm-mascot-in .8s cubic-bezier(.16, 1, .3, 1) .1s both,
    zm-breathe 4.5s ease-in-out .9s infinite;
}
html.zm .zm-deco { animation: zm-deco-in .8s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0ms) both, zm-morph 14s ease-in-out calc(var(--d, 0ms) + .8s) infinite; }
html.zm .zm-deco-sq { animation: zm-deco-in .8s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0ms) both, zm-wobble 7s ease-in-out calc(var(--d, 0ms) + .8s) infinite; }
html.zm .zm-drift { animation: zm-morph 16s ease-in-out infinite, zm-drift 11s ease-in-out infinite; }
html.zm .zm-drift + .zm-drift { animation-duration: 18s, 13s; animation-direction: normal, reverse; }

/* ---------- Botões: brilho + ímã ---------- */
html.zm .zm-shine { position: relative; overflow: hidden; isolation: isolate; display: inline-block; }
html.zm .zm-shine::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%); animation: zm-shine 3.2s ease-in-out 1.2s infinite;
}
html.zm .zm-shine:hover { box-shadow: 0 12px 26px -10px rgba(68, 186, 128, .85); }
html.zm .zm-mag:not([data-zm]) { transition: translate .45s cubic-bezier(.2, .9, .3, 1.3), box-shadow .3s ease; }

/* ---------- Como funciona: badge pulsando + chat digitando ---------- */
html.zm .zk-badge-num { position: relative; }
html.zm .is-in > .zk-badge-num::after, html.zm .zk-badge-num.is-in::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; z-index: -1;
  animation: zm-ping 1.2s cubic-bezier(0, .5, .5, 1) calc(var(--d, 0ms) + .25s) 3 both;
}
.zm-chat { position: relative; }
.zm-typing {
  position: absolute; bottom: 10px; left: 10px; display: flex; gap: 3px; padding: 8px 10px;
  background: #fff; border: 1px solid #e2ddd3; border-radius: 10px 10px 10px 2px;
  opacity: 0; transform: scale(.3); transform-origin: 0 100%;
  transition: opacity .25s ease, transform .4s cubic-bezier(.34, 1.7, .5, 1);
}
.zm-typing.zm-me { left: auto; right: 10px; background: #dcf8c6; border-color: transparent; border-radius: 10px 10px 2px 10px; transform-origin: 100% 100%; }
.zm-typing.on { opacity: 1; transform: none; }
.zm-typing i { width: 5px; height: 5px; border-radius: 50%; background: #8a8c90; animation: zm-dot 1s ease-in-out infinite; }
.zm-typing i:nth-child(2) { animation-delay: .15s; }
.zm-typing i:nth-child(3) { animation-delay: .3s; }
html.zm .zm-bub { opacity: 0; transform: scale(.2) translateY(12px); transform-origin: 0 100%; transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.8, .5, 1); }
html.zm .zm-bub.zm-me { transform-origin: 100% 100%; }
html.zm .zm-bub.in { opacity: 1; transform: none; }

/* ---------- Comparativo ---------- */
html.zm .zm-x.is-in.zm-done { animation: zm-shake .6s ease-in-out; }
html.zm .zk-card-comp.zm-done { transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), box-shadow .35s ease; }
html.zm .zk-card-comp.zm-done:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 16px 30px -18px rgba(20, 20, 20, .35); }

/* ---------- Entregáveis: cartões com inclinação 3D ---------- */
html.zm .zm-tilt.zm-done { transition: transform .25s ease-out, box-shadow .3s ease; will-change: transform; }
html.zm .zm-tilt.zm-done:hover { box-shadow: 0 30px 50px -28px rgba(20, 20, 20, .5); }

/* ícones mexem no hover */
html.zm .zk-icone-cat.zm-done:hover { animation: zm-wiggle .6s ease-in-out; }

/* ---------- Captura: holofote seguindo o cursor ---------- */
html.zm #captura::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--sx, 30%) var(--sy, 30%), rgba(68, 186, 128, .2), transparent 65%);
  transition: opacity .4s ease;
}

/* ---------- Keyframes ---------- */
@keyframes zm-mascot-in {
  from { translate: 0 100%; opacity: 0; filter: blur(14px) saturate(.4); }
  60%  { opacity: 1; filter: blur(0) saturate(1); }
  to   { translate: 0 0; opacity: 1; filter: none; }
}
@keyframes zm-breathe { 50% { scale: 1.006 1.018; } }
@keyframes zm-deco-in { from { scale: 0; opacity: 0; } }
@keyframes zm-morph {
  0%, 100% { border-radius: 50%; }
  33% { border-radius: 62% 38% 55% 45% / 45% 60% 40% 55%; }
  66% { border-radius: 40% 60% 42% 58% / 58% 40% 60% 42%; }
}
@keyframes zm-wobble { 50% { rotate: 14deg; scale: 1.08; } }
@keyframes zm-drift { 50% { translate: 40px 30px; scale: 1.12; } }
@keyframes zm-shine { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }
@keyframes zm-ping { from { transform: scale(1); opacity: .55; } to { transform: scale(2.3); opacity: 0; } }
@keyframes zm-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes zm-bob { 50% { translate: 0 -8px; } }
@keyframes zm-shake { 20%, 60% { rotate: -14deg; } 40%, 80% { rotate: 14deg; } }
@keyframes zm-wiggle { 25% { rotate: -12deg; scale: 1.12; } 75% { rotate: 10deg; scale: 1.12; } }

@media (prefers-reduced-motion: reduce) {
  html.zm * { animation: none !important; transition: none !important; }
}