/* ============================================================
   Help Pragas — animations.css
   Keyframes, estados de reveal e preferências de movimento
   reduzido. A intro do símbolo imita um obturador de câmera:
   as pás giram e "fecham" em cascata, a mira dá zoom e trava
   no mosquito com um flash.
   ============================================================ */

/* ---------- Reveals por scroll (ativados via .js + IntersectionObserver) ----------
   Entrada com profundidade: leve rotateX + translateY, sempre
   via transform/opacity (60fps). */
.js .reveal,
.js .reveal-grupo > * {
  opacity: 0;
  transform: perspective(1100px) translateY(30px) rotateX(5deg);
  transform-origin: 50% 100%;
  transition: opacity 0.7s ease var(--atraso, 0ms),
    transform 0.7s cubic-bezier(0.16, 0.84, 0.28, 1) var(--atraso, 0ms);
}

.js .reveal.is-visible,
.js .reveal-grupo.is-visible > * {
  opacity: 1;
  transform: none;
}

/* ---------- Intro do símbolo (obturador) ---------- */
.camada-halo {
  animation: halo-entrada 1.1s ease 0.05s both;
}

.camada-disco {
  animation: disco-entrada 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) 0.1s both;
}

/* Cada pá gira de um ângulo diferente, em cascata (efeito obturador) */
.camada-pa-1 { --rot: -110deg; animation: pa-entrada 0.95s cubic-bezier(0.18, 0.8, 0.24, 1) 0.18s both; }
.camada-pa-2 { --rot: -145deg; animation: pa-entrada 0.95s cubic-bezier(0.18, 0.8, 0.24, 1) 0.3s both; }
.camada-pa-3 { --rot: -180deg; animation: pa-entrada 0.95s cubic-bezier(0.18, 0.8, 0.24, 1) 0.42s both; }
.camada-pa-4 { --rot: -215deg; animation: pa-entrada 0.95s cubic-bezier(0.18, 0.8, 0.24, 1) 0.54s both; }

/* A mira dá zoom de fora para dentro e "trava" com leve overshoot */
.camada-mira {
  animation: mira-entrada 0.8s cubic-bezier(0.3, 1.35, 0.4, 1) 1.05s both;
}

/* O mosquito surge e fica com um micro-tremor contínuo */
.camada-mosquito {
  animation: mosquito-entrada 0.55s ease 1.2s both,
    mosquito-tremor 1.8s linear 2.3s infinite;
}

.mira-flash {
  animation: flash-mira 0.6s ease-out 1.72s both;
}

/* Flutuação contínua da peça inteira + giro lento das pás */
.mascote-flutua {
  animation: flutuar 7s ease-in-out 2.6s infinite;
}

.mascote-pas {
  animation: pas-giro 90s linear 3s infinite;
}

@keyframes halo-entrada {
  from {
    opacity: 0;
    transform: translateZ(var(--z)) scale(1.18);
  }
  to {
    opacity: 1;
    transform: translateZ(var(--z)) scale(1);
  }
}

@keyframes disco-entrada {
  from {
    opacity: 0;
    transform: translateZ(var(--z)) scale(0.55);
  }
  to {
    opacity: 1;
    transform: translateZ(var(--z)) scale(1);
  }
}

@keyframes pa-entrada {
  0% {
    opacity: 0;
    transform: translateZ(var(--z)) rotate(var(--rot)) scale(1.22);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateZ(var(--z)) rotate(0deg) scale(1);
  }
}

@keyframes mira-entrada {
  0% {
    opacity: 0;
    transform: translateZ(var(--z)) scale(2.4);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateZ(var(--z)) scale(1);
  }
}

@keyframes mosquito-entrada {
  from {
    opacity: 0;
    transform: translateZ(var(--z)) scale(1.28);
  }
  to {
    opacity: 1;
    transform: translateZ(var(--z)) scale(1);
  }
}

@keyframes flash-mira {
  0% {
    opacity: 0;
  }
  22% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}

/* Micro-tremor nervoso do mosquito (amplitude de ~1px) */
@keyframes mosquito-tremor {
  0%, 100% {
    transform: translateZ(var(--z)) translate(0, 0) rotate(0deg);
  }
  12% {
    transform: translateZ(var(--z)) translate(1.2px, -0.8px) rotate(0.35deg);
  }
  24% {
    transform: translateZ(var(--z)) translate(-1px, 0.7px) rotate(-0.3deg);
  }
  36% {
    transform: translateZ(var(--z)) translate(0.8px, 0.5px) rotate(0.15deg);
  }
  48% {
    transform: translateZ(var(--z)) translate(-1.2px, -0.6px) rotate(0.25deg);
  }
  62% {
    transform: translateZ(var(--z)) translate(0.9px, -1px) rotate(-0.2deg);
  }
  78% {
    transform: translateZ(var(--z)) translate(-0.7px, 0.9px) rotate(0.3deg);
  }
  90% {
    transform: translateZ(var(--z)) translate(1px, 0.3px) rotate(-0.15deg);
  }
}

@keyframes flutuar {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes pas-giro {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Fundo do hero ---------- */
@keyframes espiral-giro {
  to {
    transform: rotate(360deg);
  }
}

@keyframes particula-flutua {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(10px, -26px);
  }
}

/* ---------- Timeline: pulso quando a mira trava numa etapa ---------- */
.linha-tempo-mira.is-travada {
  animation: mira-trava 0.55s ease;
}

@keyframes mira-trava {
  0% {
    box-shadow: 0 6px 18px rgba(45, 67, 31, 0.18), 0 0 0 0 rgba(120, 186, 89, 0.55);
    transform: translate(-50%, -50%) scale(1);
  }
  45% {
    transform: translate(-50%, -50%) scale(1.22);
  }
  100% {
    box-shadow: 0 6px 18px rgba(45, 67, 31, 0.18), 0 0 0 18px rgba(120, 186, 89, 0);
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes passo-trava {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}

/* ---------- Marquee ---------- */
@keyframes marquee-rolar {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 8px));
  }
}

/* ---------- Selo ---------- */
@keyframes selo-brilho {
  0%, 55% {
    background-position: 130% 0;
  }
  85%, 100% {
    background-position: -130% 0;
  }
}

/* ---------- Botão flutuante ---------- */
@keyframes pulso-mira {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  70% {
    transform: scale(1.55);
    opacity: 0;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

@keyframes girar-lento {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- FAQ ---------- */
@keyframes faq-abrir {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   UPGRADE — Preloader de obturador
   Só aparece com JS (classe .js no html); sem JS o conteúdo
   permanece visível normalmente.
   ============================================================ */
.preloader {
  display: none;
}

.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 44%, var(--verde-medio) 0%, var(--verde-floresta) 72%);
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.7s cubic-bezier(0.72, 0, 0.18, 1);
}

.js .preloader.is-saindo {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}

.preloader-simbolo {
  position: relative;
  width: 118px;
  height: 119px;
  animation: preloader-giro 2.2s linear infinite;
}

.preloader-simbolo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.preloader-pa-1 { animation: preloader-pa 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) 0.05s both; }
.preloader-pa-2 { animation: preloader-pa 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) 0.15s both; }
.preloader-pa-3 { animation: preloader-pa 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) 0.25s both; }
.preloader-pa-4 { animation: preloader-pa 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) 0.35s both; }

.preloader-anel {
  position: absolute;
  inset: -22px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  animation: preloader-anel 1.4s ease-out 0.3s infinite;
}

@keyframes preloader-giro {
  to { transform: rotate(360deg); }
}

@keyframes preloader-pa {
  from {
    opacity: 0;
    transform: rotate(-150deg) scale(1.3);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes preloader-anel {
  0% { transform: scale(0.8); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ============================================================
   UPGRADE — Gate da intro: enquanto o preloader está na tela
   (body sem .is-pronto), a coreografia do hero fica pausada e
   os reveals do hero seguram o estado inicial.
   ============================================================ */
.js body:not(.is-pronto) .hero .camada,
.js body:not(.is-pronto) .hero .mira-flash,
.js body:not(.is-pronto) .hero .mascote-flutua,
.js body:not(.is-pronto) .hero .mascote-pas,
.js body:not(.is-pronto) .mascote-cena {
  animation-play-state: paused !important;
}

.js body:not(.is-pronto) .hero .reveal {
  opacity: 0 !important;
  transform: translateY(26px) !important;
  transition: none !important;
}

/* ============================================================
   UPGRADE — Headline com split de palavras em stagger 3D
   (rotateX). O JS embrulha cada palavra em .palavra com --i.
   ============================================================ */
.js .hero-titulo.titulo-3d {
  opacity: 1;
  transform: none;
}

.titulo-3d .palavra {
  display: inline-block;
  opacity: 0;
  transform: perspective(640px) rotateX(92deg) translateY(0.4em);
  transform-origin: 50% 100%;
}

.js body.is-pronto .titulo-3d .palavra {
  animation: palavra-entra 0.8s cubic-bezier(0.2, 0.85, 0.3, 1.06) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + 140ms);
}

@keyframes palavra-entra {
  to {
    opacity: 1;
    transform: perspective(640px) rotateX(0deg) translateY(0);
  }
}

/* ============================================================
   UPGRADE — "Click" da mira: shake sutil (2-3px) do símbolo
   sincronizado com o flash da intro.
   ============================================================ */
.js body.is-pronto .mascote-cena {
  animation: hero-shake 0.4s linear 1.72s both;
}

@keyframes hero-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(2.5px, -2px); }
  40% { transform: translate(-2.5px, 1.5px); }
  60% { transform: translate(2px, 2.5px); }
  80% { transform: translate(-1.5px, -2px); }
}

/* ============================================================
   UPGRADE — Cena WebGL do símbolo (js/hero3d.js)
   O canvas entra como camada 3D; as pás e o disco em SVG saem
   de cena (mas continuam no DOM para o fundo do hero via <use>).
   ============================================================ */
.camada-webgl {
  --z: 40px;
  pointer-events: none;
}

.webgl-ativo .camada-pa,
.webgl-ativo .camada-disco {
  opacity: 0 !important;
  animation: none !important;
}

.webgl-ativo .mascote-pas {
  animation: none !important;
}

/* ---------- Canvas de partículas ("mosquitos") do hero ---------- */
.particulas-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ============================================================
   Modo "sem animacoes": desliga loops, parallax e intro.
   IMPORTANTE: as animacoes ficam LIGADAS por padrao para todo
   mundo (independentemente do prefers-reduced-motion do sistema,
   por decisao do dono do site). Este modo so e ativado pela
   classe .sem-animacoes no <html>, controlada pelo botao
   "Pausar animacoes" (js/movimento.js) e persistida em
   localStorage (help-animacoes = on/off).
   ============================================================ */
html.sem-animacoes *,
html.sem-animacoes *::before,
html.sem-animacoes *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
  animation-delay: 0ms !important;
}

html.sem-animacoes {
  scroll-behavior: auto;
}

/* Marquee vira lista estatica completa, sem a copia duplicada */
html.sem-animacoes .marquee-esteira {
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

html.sem-animacoes .marquee-trilho {
  flex-wrap: wrap;
  justify-content: center;
}

html.sem-animacoes .marquee-trilho[aria-hidden='true'] {
  display: none;
}

/* Elementos de movimento somem por completo */
html.sem-animacoes .preloader {
  display: none !important;
}

html.sem-animacoes .cursor-mira,
html.sem-animacoes .cursor-ponto,
html.sem-animacoes .particulas-canvas,
html.sem-animacoes .marquee-esteira--reversa {
  display: none !important;
}

/* Nada fica preso em opacity: 0 esperando reveal */
html.sem-animacoes .reveal,
html.sem-animacoes .reveal-grupo > * {
  opacity: 1 !important;
  transform: none !important;
}

html.sem-animacoes .titulo-3d .palavra {
  opacity: 1 !important;
  transform: none !important;
}

html.sem-animacoes body:not(.is-pronto) .hero .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Cena WebGL sai de cena; o simbolo estatico em SVG volta */
html.sem-animacoes .camada-webgl {
  display: none !important;
}

html.sem-animacoes .webgl-ativo .camada-pa,
html.sem-animacoes .webgl-ativo .camada-disco {
  opacity: 1 !important;
}

html.sem-animacoes.cursor-custom * {
  cursor: auto !important;
}