/* Animated decorative mosquitoes — home page sections only. */

/* Force every host section to be a positioning context, so the absolute
   .mosquitoes-layer pins to it. Some section blocks are styled without
   `position: relative` (e.g. .hero, .symptoms, .where-to-use, .notice). */
.hero,
.symptoms,
.where-to-use,
.notice,
.section.how-helps,
.section.how-works,
.section.how-apply,
.section.where-buy,
.section.for-moms {
  position: relative;
}

.mosquitoes-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  overflow: visible;
}

.has-mosquitoes {
  overflow: visible;
}

/* Outer wrapper: position + fly-in translate (in rem from Figma coords). */
.mosquito {
  position: absolute;
  top: var(--mosquito-top, 0);
  left: var(--mosquito-left, auto);
  right: var(--mosquito-right, auto);
  width: var(--mosquito-size, 4rem);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translate3d(var(--mosquito-fly-x, 0), 0, 0);
  will-change: transform, opacity;
}

.mosquito.is-visible {
  opacity: 1;
}

.mosquito.is-flying {
  transition:
    transform var(--mosquito-fly-duration, 1.4s) cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.55s ease;
}

/* Inner element owns facing, base rotation, and idle wobble.
   Uses the individual transform properties (translate / rotate / scale)
   so three independent animations can run in parallel without stomping
   on each other — they each touch a different property and the browser
   composes the final transform automatically. */
.mosquito__inner {
  display: block;
  width: 100%;
  height: auto;
  translate: 0 0;
  rotate: var(--mosquito-rotate, 0deg);
  scale: var(--mosquito-mirror, 1) 1;
  transform-origin: center;
  will-change: translate, rotate, scale;
}

/* Sprite variant — used when a wing-flap sprite sheet is shipped.
   No <img> child: this <span> owns the background and animates its
   background-position-x via steps(N, jump-none) for a frame-accurate
   loop. The wing-flap runs ALWAYS (also during fly-in) because that's
   how the previous APNG behaved. Each mosquito sets its own
   --mosquito-flap-duration and a negative --mosquito-flap-delay in JS,
   so two adjacent mosquitoes are virtually never in the same phase. */
.mosquito__inner--sprite {
  aspect-ratio: 150 / 172;       /* native frame aspect (sprite is 6× wide) */
  background-image: var(--mosquito-sprite, none);
  background-repeat: no-repeat;
  background-size: 600% 100%;    /* 6 frames laid out horizontally */
  background-position: 0% 0%;
  animation: mosquito-wing-flap var(--mosquito-flap-duration, 0.33s)
    steps(6, jump-none) infinite;
  animation-delay: var(--mosquito-flap-delay, 0s);
}

@keyframes mosquito-wing-flap {
  from { background-position-x: 0%; }
  to   { background-position-x: 100%; }
}

/* Three desynced idle wobble loops (only after fly-in settles):
     • translate — slow drift in 2D (≈3.6–5.4s)
     • rotate    — fast tiny rocking around the base rotation (≈2.4–3.4s)
     • scale     — slow breath in/out (≈4.6–6.2s)
   Mutually-prime durations + per-mosquito negative delays (set in JS)
   make the cycle effectively non-repeating to the eye.
   Wing-flap is repeated in the list so the shorthand doesn't reset it. */
.mosquito.is-settled .mosquito__inner--sprite {
  animation:
    mosquito-wing-flap var(--mosquito-flap-duration, 0.33s)
      steps(6, jump-none) infinite,
    mosquito-wobble-translate var(--mosquito-translate-duration, 4.2s)
      ease-in-out infinite,
    mosquito-wobble-rotate var(--mosquito-rotate-duration, 2.8s)
      ease-in-out infinite,
    mosquito-wobble-scale var(--mosquito-scale-duration, 5.3s)
      ease-in-out infinite;
  animation-delay:
    var(--mosquito-flap-delay, 0s),
    var(--mosquito-translate-delay, 0s),
    var(--mosquito-rotate-delay, 0s),
    var(--mosquito-scale-delay, 0s);
}

/* Fallback (no sprite shipped): still play the wobble on the static img. */
.mosquito.is-settled .mosquito__inner:not(.mosquito__inner--sprite) {
  animation:
    mosquito-wobble-translate var(--mosquito-translate-duration, 4.2s)
      ease-in-out infinite,
    mosquito-wobble-rotate var(--mosquito-rotate-duration, 2.8s)
      ease-in-out infinite,
    mosquito-wobble-scale var(--mosquito-scale-duration, 5.3s)
      ease-in-out infinite;
  animation-delay:
    var(--mosquito-translate-delay, 0s),
    var(--mosquito-rotate-delay, 0s),
    var(--mosquito-scale-delay, 0s);
}

@keyframes mosquito-wobble-translate {
  0%,
  100% { translate: 0 0; }
  25%  { translate: 1rem -0.6rem; }
  50%  { translate: -0.7rem 0.8rem; }
  75%  { translate: 0.5rem 0.45rem; }
}

@keyframes mosquito-wobble-rotate {
  0%,
  100% { rotate: var(--mosquito-rotate, 0deg); }
  33%  { rotate: calc(var(--mosquito-rotate, 0deg) + 4deg); }
  66%  { rotate: calc(var(--mosquito-rotate, 0deg) - 3deg); }
}

@keyframes mosquito-wobble-scale {
  0%,
  100% { scale: var(--mosquito-mirror, 1) 1; }
  50%  {
    scale: calc(var(--mosquito-mirror, 1) * 1.025) 1.025;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mosquito.is-flying {
    transition: opacity 0.2s ease;
  }

  .mosquito__inner,
  .mosquito.is-settled .mosquito__inner,
  .mosquito.is-settled .mosquito__inner--sprite,
  .mosquito.is-settled
    .mosquito__inner:not(.mosquito__inner--sprite) {
    animation: none;
  }

  .mosquito__inner--sprite {
    background-position-x: 0%;          /* freeze on rest-pose frame */
  }
}