:root{
  --nv-green:#184530;
  --nv-green-dark:#0F2E1F;
  --nv-gold:#A9782F;
  --nv-orange:#E0883C;
  --nv-offwhite:#FDFFFA;
}

@media (prefers-reduced-motion: reduce){
  .pet-walker__animal,
  .pet-walker__animal .leg-a,
  .pet-walker__animal .leg-b,
  .pet-walker__animal .tail,
  .paw-trail .paw,
  .paw-click,
  .paw-click__glow{
    animation: none !important;
  }
}

/* ============ EFEITO 1 — Família andando pelo rodapé ============ */
.pet-walker{
  position:relative; width:100%; height:58px; overflow:hidden; pointer-events:none;
}
.pet-walker__animal{
  position:absolute; bottom:0; left:-10%;
  /* `backwards`: sem isso, um bicho com `animation-delay` fica com a
     aparência BASE (visível, opacity:1 por padrão) durante o próprio delay —
     todos empilhados no canto esquerdo até a vez de cada um começar a andar,
     em vez de escondidos (opacity:0, como no primeiro quadro da animação).
     Achado em 25/09/2026 testando no mobile: mais visível em tela estreita
     porque -10% em pixels é pouco, e o bicho "escondido" acaba sobrando
     visível dentro da faixa. */
  animation: pw-walk-across 16s linear infinite backwards;
  transform: scale(var(--pw-scale, 1));
  transform-origin: 50% 100%;
}
/* 25/09/2026: no mobile a travessia (mesma % da tela, então mesma duração)
   lia como "muito devagar" — o bicho ocupa uma fatia maior da tela estreita,
   e um objeto grande cruzando o quadro no mesmo tempo que um pequeno parece
   mais lento. Duração menor só abaixo de 640px pra andar mais rápido sem
   mexer no desktop. */
@media (max-width: 640px) {
  .pet-walker__animal{ animation-duration: 9s; }
}
.pet-walker__animal .leg-a{ transform-origin: 50% 0%; animation: pw-leg-a .5s ease-in-out infinite; }
.pet-walker__animal .leg-b{ transform-origin: 50% 0%; animation: pw-leg-b .5s ease-in-out infinite; }
.pet-walker__animal .tail{ transform-origin: 14px 14px; animation: pw-tail .4s ease-in-out infinite; }

@keyframes pw-walk-across{
  0%   { left:-10%; opacity:0; }
  6%   { opacity:1; }
  94%  { opacity:1; }
  100% { left:110%; opacity:0; }
}
/* Faixa reversa — mesma família, andando da direita pra esquerda, espelhada
   (scaleX(-1)) pra parecer que vão de fato pra esquerda, não andando de costas.
   Colocada perto do topo de cada página (logo após o header), oposta ao
   rodapé (que anda da esquerda pra direita). */
.pet-walker--reverse .pet-walker__animal{
  animation-name: pw-walk-across-reverse;
  transform: scale(var(--pw-scale, 1)) scaleX(-1);
}
@keyframes pw-walk-across-reverse{
  0%   { left:110%; opacity:0; }
  6%   { opacity:1; }
  94%  { opacity:1; }
  100% { left:-10%; opacity:0; }
}
@keyframes pw-leg-a{ 0%,100%{ transform:rotate(16deg);} 50%{ transform:rotate(-16deg);} }
@keyframes pw-leg-b{ 0%,100%{ transform:rotate(-16deg);} 50%{ transform:rotate(16deg);} }
@keyframes pw-tail{ 0%,100%{ transform:rotate(-10deg);} 50%{ transform:rotate(10deg);} }

/* ============ EFEITO 2 — Trilha de patinhas (trajeto único, em zigue-zague) ============ */
.paw-trail{ position:relative; }
.paw-trail .paw{
  position:absolute; width:26px; height:26px; opacity:0;
  color: var(--nv-green);
  transform: scale(.6);
  transition: none;
  pointer-events:none;
  filter: drop-shadow(0 1px 1px rgba(15,46,31,.15));
}
.paw-trail .paw.is-visible{
  animation: pw-print-in .5s ease-out forwards;
}
/* Variante clara — pra trilha atravessar também os blocos de fundo escuro
   (hero verde-escuro etc.) sem sumir por falta de contraste (patinha e fundo
   quase da mesma cor). Mesmo padrão do Efeito 3 (.paw-click--light). */
.hero.paw-trail .paw{
  color: var(--nv-offwhite);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
@keyframes pw-print-in{
  0%   { opacity:0; transform:scale(.6) rotate(var(--pw-rot, 0deg)); }
  60%  { opacity:.95; transform:scale(1.1) rotate(var(--pw-rot, 0deg)); }
  100% { opacity:.68; transform:scale(1) rotate(var(--pw-rot, 0deg)); }
}
/* Some fora em telas pequenas pra não competir com o texto — decisão de UX,
   o efeito continua presente de tablet pra cima. */
@media (max-width: 640px){
  .paw-trail .paw{ display:none; }
}

/* ============ EFEITO 3 — Pegada + brilho ao clicar (todo o site) ============ */
.paw-click{
  position:fixed; width:36px; height:36px; pointer-events:none; z-index:9999;
  color: var(--nv-green);
  animation: pw-click-fade .8s ease-out forwards;
}
.paw-click.paw-click--light{ color: var(--nv-offwhite); }
.paw-click__glow{
  position:absolute; left:50%; top:50%; width:64px; height:64px;
  margin:-32px 0 0 -32px; border-radius:50%;
  background: radial-gradient(circle, rgba(224,136,60,.6) 0%, rgba(169,120,47,.35) 45%, transparent 72%);
  animation: pw-glow-burst .8s ease-out forwards;
}
@keyframes pw-click-fade{
  0%   { opacity:.9; transform:translate(-50%,-50%) scale(.3) rotate(var(--pw-rot,0deg)); }
  100% { opacity:0;   transform:translate(-50%,-50%) scale(2.1) rotate(var(--pw-rot,0deg)); }
}
@keyframes pw-glow-burst{
  0%   { opacity:1; transform:scale(.3); }
  100% { opacity:0; transform:scale(2.6); }
}