/* mosquitos-animation.css — Visual layer for cazamosquitos.com */

#mosquitos-anim-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.mosquito-anim {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  opacity: 0.85;
  will-change: transform;
  transform: translate3d(-200px, -200px, 0);
}

.mosquito-sprite {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 35% 70%;        /* pivot around the body, not the wings */
  animation: mosquito-flap 95ms cubic-bezier(.4,0,.6,1) infinite alternate;
  will-change: transform;
}

@keyframes mosquito-flap {
  from { transform: scaleY(1)    scaleX(1); }
  to   { transform: scaleY(0.82) scaleX(1.04); }
}

.fumigator-anim {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 250px;
  will-change: transform, opacity;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.22));
  transform: translate3d(-400px, -400px, 0);
  transform-origin: 50% 100%;
}

.fumigator-body,
.fumigator-arm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  display: block;
}
.fumigator-arm {
  /* Pivot at the shoulder so only the arm + wand swing up and down */
  transform-origin: 77.2% 30.2%;
  will-change: transform;
}

.shockwave {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 12px;
  border: 4px solid rgba(26, 138, 110, 0.75);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(26, 138, 110, 0.4);
  transform-origin: 50% 50%;
  pointer-events: none;
  animation: shockwave-expand 700ms cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes shockwave-expand {
  0% {
    width: 30px; height: 12px;
    opacity: 0.9;
    border-width: 4px;
  }
  100% {
    width: 260px; height: 60px;
    opacity: 0;
    border-width: 1px;
  }
}

.smoke-particle {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(200, 240, 210, 0.95) 0%,
    rgba(150, 220, 180, 0.75) 35%,
    rgba(120, 200, 150, 0.35) 65%,
    rgba(100, 180, 140, 0.08) 85%,
    rgba(100, 180, 140, 0) 100%
  );
  will-change: transform, opacity, width, height;
  transform: translate3d(-200px, -200px, 0);
  filter: blur(2.5px);
}

@media (prefers-reduced-motion: reduce) {
  #mosquitos-anim-container { display: none !important; }
}