/* =========================================================
   Animations — keyframes, reveal, cursor, motion system
   ========================================================= */

/* ---------- keyframes ---------- */
@keyframes piscar {
  0%   { box-shadow: 0 0 0 0 rgba(61,97,66,.5) }
  70%  { box-shadow: 0 0 0 14px rgba(61,97,66,0) }
  100% { box-shadow: 0 0 0 0 rgba(61,97,66,0) }
}
@keyframes piscar-flutuante {
  0%   { box-shadow: 0 0 0 0 rgba(20,47,29,.55) }
  70%  { box-shadow: 0 0 0 14px rgba(20,47,29,0) }
  100% { box-shadow: 0 0 0 0 rgba(20,47,29,0) }
}
@keyframes heroi-intro-seta-quicar {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(8px) }
}
@keyframes popup-captura-entrar {
  from { opacity: 0; transform: translateY(10px) scale(.98) }
  to   { opacity: 1; transform: none }
}
@keyframes palavra-revelar {
  from { clip-path: inset(0 100% 0 0); opacity: 0 }
  to   { clip-path: inset(0 0% 0 0);   opacity: 1 }
}

/* ---------- flutuante pulse ---------- */
.flutuante::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  animation: piscar-flutuante 2.4s ease-out infinite; pointer-events: none;
}
.botao-lima::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  animation: piscar 2.4s ease-out infinite; pointer-events: none;
}

/* ---------- reveal no scroll ---------- */
[data-revelar] {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-base) var(--curva), transform var(--dur-base) var(--curva);
}
[data-revelar].visivel { opacity: 1; transform: none }

/* ---------- split-text (h1 hero) ---------- */
.heroi-texto h1 .palavra {
  display: inline-block; overflow: hidden;
  clip-path: inset(0 100% 0 0);
  animation: palavra-revelar var(--dur-motion) var(--curva) forwards;
  opacity: 0;
}

/* ---------- parallax foto herói ---------- */
.heroi-foto { will-change: transform }

/* ---------- cursor custom (desktop, fine pointer only) ---------- */
.cursor-custom {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--folha); opacity: .65;
  transform: translate(-50%, -50%);
  transition: transform .08s linear, opacity .2s, width .2s, height .2s;
  mix-blend-mode: multiply;
}
.cursor-custom.sobre-clicavel { width: 28px; height: 28px; opacity: .45 }
@media (pointer: fine) and (min-width: 921px) {
  body { cursor: none }
  a, button, [role="button"] { cursor: none }
}

/* ---------- reduced motion: desabilita tudo extra ---------- */
@media (prefers-reduced-motion: reduce) {
  .heroi-intro { display: none }
  .heroi-intro-seta { animation: none }
  [data-revelar] { opacity: 1; transform: none; transition: none }
  .botao:hover,.botao:active,.flutuante:hover { transform: none }
  .cartao:hover,.passo-cartao:hover,.modo-cartao:hover { transform: none }
  .botao-lima::after,.flutuante::after { animation: none }
  .trilho { scroll-behavior: auto }
  .temas-modal,.popup-captura-caixa { animation: none }
  .heroi-texto h1 .palavra { animation: none; clip-path: none; opacity: 1 }
  .heroi-foto { will-change: auto }
  .cursor-custom { display: none }
  body,a,button,[role="button"] { cursor: auto }
}