/* ==========================================================================
   SAFE INSECT — CONTROLE DE PRAGAS
   Motion System & GPU Animations
   Inspirado em: motion-cookbook, frontend-design e gsap
   ========================================================================== */

/* --- 1. KEYFRAMES FUNDAMENTAIS --- */

/* Pulso de radar para indicadores e botão WhatsApp */
@keyframes pulseRadar {
  0% {
    transform: scale(0.98);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.18);
    opacity: 0;
  }
  100% {
    transform: scale(1.18);
    opacity: 0;
  }
}

@keyframes pulsePing {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* Radar ring que se propaga do botão */
@keyframes buttonRadarRing {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  70% {
    transform: scale(1.4);
    opacity: 0;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Revelação Cinematográfica de Texto (Blur -> Nitidez + Fade) */
@keyframes textCinematicReveal {
  from {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Fade com elevação sutil em Y */
@keyframes fadeUpIn {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Revelação suave de imagem com zoom out sutil */
@keyframes imageCinematicReveal {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Leve brilho e flutuação de acento de fundo */
@keyframes ambientGlowFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.08;
  }
  50% {
    transform: translate(-20px, 15px) scale(1.08);
    opacity: 0.14;
  }
}

/* --- 2. ANIMAÇÃO VETORIAL DAS 5 BARATINHAS (ETAPA 1) --- */

/* Movimento alternado e frenético das patas (14Hz) */
@keyframes legScuttleL {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(20deg); }
}

@keyframes legScuttleR {
  0%, 100% { transform: rotate(20deg); }
  50% { transform: rotate(-18deg); }
}

/* Vibração rápida das antenas */
@keyframes antennaTwitchL {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-12deg); }
}

@keyframes antennaTwitchR {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(12deg); }
}

/* Oscilação corporal rápida do inseto correndo */
@keyframes roachWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3.5deg); }
  75% { transform: rotate(3.5deg); }
}

/* Trajetórias de dispersão das 5 baratas em fuga orgânica */

/* Barata 1: Corre em disparada para o canto superior direito */
@keyframes roachFlee1 {
  0% {
    opacity: 0.95;
    transform: translate(46vw, 50vh) rotate(38deg) scale(1);
  }
  15% {
    transform: translate(55vw, 40vh) rotate(48deg) scale(1);
  }
  50% {
    transform: translate(78vw, 18vh) rotate(32deg) scale(1.05);
  }
  100% {
    opacity: 0.95;
    transform: translate(118vw, -15vh) rotate(42deg) scale(1.1);
  }
}

/* Barata 2: Ziguezagueia em pânico para a lateral esquerda */
@keyframes roachFlee2 {
  0% {
    opacity: 0.95;
    transform: translate(44vw, 48vh) rotate(-85deg) scale(0.88);
  }
  25% {
    transform: translate(32vw, 44vh) rotate(-108deg) scale(0.88);
  }
  65% {
    transform: translate(12vw, 36vh) rotate(-78deg) scale(0.9);
  }
  100% {
    opacity: 0.95;
    transform: translate(-22vw, 30vh) rotate(-92deg) scale(0.92);
  }
}

/* Barata 3: Dispara veloz em curva para o topo */
@keyframes roachFlee3 {
  0% {
    opacity: 0.95;
    transform: translate(50vw, 46vh) rotate(-10deg) scale(0.78);
  }
  30% {
    transform: translate(46vw, 30vh) rotate(12deg) scale(0.78);
  }
  70% {
    transform: translate(52vw, 8vh) rotate(-14deg) scale(0.8);
  }
  100% {
    opacity: 0.95;
    transform: translate(48vw, -25vh) rotate(-5deg) scale(0.82);
  }
}

/* Barata 4: Foge em curva rápida para o canto inferior direito */
@keyframes roachFlee4 {
  0% {
    opacity: 0.95;
    transform: translate(52vw, 52vh) rotate(136deg) scale(0.95);
  }
  25% {
    transform: translate(64vw, 66vh) rotate(122deg) scale(0.95);
  }
  65% {
    transform: translate(88vw, 86vh) rotate(148deg) scale(0.98);
  }
  100% {
    opacity: 0.95;
    transform: translate(120vw, 118vh) rotate(138deg) scale(1.02);
  }
}

/* Barata 5: Pequena, hesita 0.15s, gira bruscamente e foge para o canto inferior esquerdo */
@keyframes roachFlee5 {
  0% {
    opacity: 0.95;
    transform: translate(48vw, 54vh) rotate(15deg) scale(0.68);
  }
  12% {
    transform: translate(47vw, 53vh) rotate(-35deg) scale(0.68);
  }
  30% {
    transform: translate(40vw, 62vh) rotate(-135deg) scale(0.7);
  }
  68% {
    transform: translate(16vw, 86vh) rotate(-118deg) scale(0.72);
  }
  100% {
    opacity: 0.95;
    transform: translate(-20vw, 118vh) rotate(-128deg) scale(0.75);
  }
}

/* Estilos estruturais da animação das baratas */
.cockroach-scatter-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  z-index: 99999;
  overflow: hidden;
  transition: opacity 0.5s ease;
}

.cockroach-scatter-layer.is-fled {
  opacity: 0;
  display: none !important;
}

.roach-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 92px;
  transform-origin: center center;
  will-change: transform, opacity;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 6px rgba(217, 119, 6, 0.4));
}

.roach-item .legs-left .leg {
  transform-origin: 36px 70px;
  animation: legScuttleL 0.075s infinite ease-in-out alternate;
}

.roach-item .legs-right .leg {
  transform-origin: 64px 70px;
  animation: legScuttleR 0.075s infinite ease-in-out alternate;
}

.roach-item .antenna-l {
  transform-origin: 46px 36px;
  animation: antennaTwitchL 0.11s infinite ease-in-out alternate;
}

.roach-item .antenna-r {
  transform-origin: 54px 36px;
  animation: antennaTwitchR 0.11s infinite ease-in-out alternate;
}

.roach-item svg {
  animation: roachWiggle 0.08s infinite ease-in-out;
}

/* Associações individuais de fuga com curva de aceleração biológica */
.roach-1 {
  width: 58px;
  height: 92px;
  animation: roachFlee1 1.45s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
  animation-delay: 0.04s;
}

.roach-2 {
  width: 50px;
  height: 80px;
  animation: roachFlee2 1.55s cubic-bezier(0.12, 0.8, 0.3, 1) forwards;
  animation-delay: 0.12s;
}

.roach-3 {
  width: 44px;
  height: 72px;
  animation: roachFlee3 1.35s cubic-bezier(0.18, 0.9, 0.4, 1) forwards;
  animation-delay: 0.02s;
}

.roach-4 {
  width: 54px;
  height: 86px;
  animation: roachFlee4 1.6s cubic-bezier(0.14, 0.82, 0.32, 1) forwards;
  animation-delay: 0.18s;
}

.roach-5 {
  width: 38px;
  height: 62px;
  animation: roachFlee5 1.5s cubic-bezier(0.2, 0.88, 0.38, 1) forwards;
  animation-delay: 0.22s;
}

/* --- 3. CLASSES DE ANIMAÇÃO DE SCROLL (REVEAL) --- */

.reveal-element {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-element.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Revelação com blur para headlines (Receita Jakub) */
.reveal-blur {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.reveal-blur.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Revelação com zoom lento para imagens */
.reveal-media {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-media.is-revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger Delays para listas e grids */
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }
.stagger-5 { transition-delay: 0.40s; }

/* Micro-animações ambientais */
.hero-ambient-glow {
  animation: ambientGlowFloat 14s ease-in-out infinite;
}

/* Radar ring decorativo no botão CTA */
.btn-radar-ring {
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-lime);
  pointer-events: none;
  animation: buttonRadarRing 3.5s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}

/* --- ANIMAÇÃO DE BARATAS CAMINHANDO NA BASE DA HERO --- */
@keyframes roachCrawlAcross {
  0% {
    transform: translateX(-100px) translateY(0) rotate(0deg);
    opacity: 0;
  }
  4% {
    opacity: 0.95;
  }
  25% {
    transform: translateX(25vw) translateY(-4px) rotate(2deg);
  }
  50% {
    transform: translateX(52vw) translateY(3px) rotate(-1deg);
  }
  75% {
    transform: translateX(78vw) translateY(-3px) rotate(2deg);
  }
  96% {
    opacity: 0.95;
  }
  100% {
    transform: translateX(105vw) translateY(0) rotate(0deg);
    opacity: 0;
  }
}

@keyframes roachLegsWalkLeft {
  0% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(8deg);
  }
}

@keyframes roachLegsWalkRight {
  0% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(-8deg);
  }
}

@keyframes roachAntennaFlicker {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(6deg);
  }
}

/* --- 4. ACESSIBILIDADE: PREFERS-REDUCED-MOTION --- */
@media (prefers-reduced-motion: reduce) {
  *:not(.roach-crawler):not(.roach-leg):not(.roach-antenna):not(.crawl-svg):not(.crawl-leg-l):not(.crawl-leg-r):not(.crawl-antenna) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .cockroach-scatter-layer {
    display: none !important;
  }

  .reveal-element,
  .reveal-blur,
  .reveal-media {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .stepper-track-progress {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}