/* Movimento suave do site AD Fama.
   - Só anima transform e opacity; 0,4 s a 0,8 s; deslocamentos de 12 a 24 px.
   - O conteúdo só é escondido quando o <html> tem a classe .mov, que o script do <head> coloca
     apenas se houver JavaScript, IntersectionObserver e o visitante não pedir menos movimento.
   - Com prefers-reduced-motion: reduce, tudo fica parado. */

:root {
  --mov-ease: cubic-bezier(.22, .61, .36, 1);
  --mov-dur: .6s;
  --mov-dist: 20px;
}

/* 1. Revelar ao rolar, com escalonamento (o atraso vem do movimento.js) */
.mov .reveal {
  opacity: 0;
  transform: translate3d(0, var(--mov-dist), 0);
  transition: opacity var(--mov-dur) var(--mov-ease), transform var(--mov-dur) var(--mov-ease);
  transition-delay: var(--mov-atraso, 0s);
}
.mov .reveal.visible { opacity: 1; transform: none; }

/* 4. Contadores: ficam invisíveis só até o script assumir (evita piscar "20+ → 0") */
.mov [data-contar] { opacity: 0; transition: opacity .4s var(--mov-ease); }
.mov [data-contar].contando { opacity: 1; }

/* 2. Fundo com manchas de luz nas cores da marca (sem filtro de desfoque: o degradê já é suave) */
.mov-fundo { position: relative; isolation: isolate; overflow: hidden; }
.mov-fundo::before,
.mov-fundo::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: var(--blob, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: var(--blob-opacidade, .22);
  translate: 0 var(--mov-py, 0px); /* parallax (só no topo, só no computador) */
}
.mov-fundo::before {
  top: 4%;
  left: 6%;
  background: radial-gradient(circle, rgba(192, 57, 43, .9) 0%, rgba(192, 57, 43, .35) 32%, rgba(192, 57, 43, 0) 68%);
}
.mov-fundo::after {
  bottom: 2%;
  right: 6%;
  background: radial-gradient(circle, rgba(212, 160, 23, .85) 0%, rgba(230, 126, 34, .35) 34%, rgba(230, 126, 34, 0) 68%);
}
.mov-fundo--claro { --blob-opacidade: .13; }

@media (min-width: 768px) and (hover: hover) {
  .mov .mov-fundo::before { animation: mov-mancha-a 22s ease-in-out infinite alternate; }
  .mov .mov-fundo::after { animation: mov-mancha-b 26s ease-in-out infinite alternate; }
}
@media (max-width: 767px) {
  .mov-fundo { --blob: 340px; --blob-opacidade: .16; }
  .mov-fundo--claro { --blob-opacidade: .07; }
}
@keyframes mov-mancha-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(24px, 18px, 0) scale(1.08); }
}
@keyframes mov-mancha-b {
  from { transform: translate3d(0, 0, 0) scale(1.06); }
  to   { transform: translate3d(-24px, -16px, 0) scale(.96); }
}

/* 3. Elevação ao passar o mouse (só em aparelhos com mouse) */
@media (hover: hover) and (pointer: fine) {
  .mov-card, .mov-btn {
    transition: transform .4s var(--mov-ease), opacity .4s var(--mov-ease);
  }
  .mov-card:hover { transform: translate3d(0, -4px, 0); }
  .mov-btn:hover { transform: translate3d(0, -2px, 0); }

  /* A sombra é uma camada à parte que só muda de opacidade */
  .mov-card { position: relative; isolation: isolate; }
  .mov-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: 0 14px 36px rgba(28, 28, 28, .1);
    opacity: 0;
    transition: opacity .4s var(--mov-ease);
    pointer-events: none;
  }
  .mov-card:hover::after { opacity: 1; }
}

/* Menos movimento pedido pelo sistema: nada se mexe */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .mov-card:hover, .mov-btn:hover, .reveal { transform: none !important; }
  .reveal, [data-contar] { opacity: 1 !important; }
}