.wb-decor-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.wb-decor-layer--front {
  z-index: 5 !important;
}

.wb-decor-layer--behind {
  z-index: 0 !important;
}

.wb-decor-butterflies {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.wb-dot {
  position: absolute;
  top: -12%;

  left: var(--wb-left);
  width: var(--wb-size);
  height: var(--wb-size);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.6) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
  opacity: 0;
  animation: wb-snow-fall var(--wb-dur) linear var(--wb-delay) infinite;
  will-change: transform, opacity;
}

@keyframes wb-snow-fall {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }

  6% {
    opacity: var(--wb-op, 0.85);
  }

  25% {
    transform: translate(calc(var(--wb-drift, 20px) * 0.4), 30vh);
  }

  50% {
    transform: translate(calc(var(--wb-drift, 20px) * -0.7), 58vh);
  }

  75% {
    transform: translate(calc(var(--wb-drift, 20px) * 0.9), 86vh);
  }

  92% {
    opacity: var(--wb-op, 0.85);
  }

  100% {
    transform: translate(0, 116vh);
    opacity: 0;
  }
}

.wb-flyer {
  position: absolute;
  top: var(--wb-top);
  width: 48px;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.wb-flyer--ltr {
  left: 0;
  animation: wb-fly-ltr var(--wb-dur) linear var(--wb-delay) infinite;
}

.wb-flyer--rtl {
  right: 0;
  animation: wb-fly-rtl var(--wb-dur) linear var(--wb-delay) infinite;
}

.wb-flyer-svg {
  width: 100%;
  height: auto;
}

.wb-flyer--bird {
  width: 54px;
}

.wb-flyer--bird .wb-bird-motion {
  display: block;
  perspective: 500px;
  transform-box: fill-box;
  animation: wb-bird-bob var(--wb-bird-flap, 0.44s) ease-in-out infinite
    alternate;
  will-change: transform;
}

.wb-flyer--bird .wb-bird-svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
  overflow: visible;
}

.wb-flyer--bird .wb-bird-wing--far {
  transform-box: fill-box;
  transform-origin: 54% 98%;
  animation: wb-bird-wing-far var(--wb-bird-flap, 0.44s)
    cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
  will-change: transform;
}

.wb-flyer--bird .wb-bird-wing--near {
  transform-box: fill-box;
  transform-origin: 98% 93%;
  animation: wb-bird-wing-near var(--wb-bird-flap, 0.44s)
    cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
  will-change: transform;
}

@keyframes wb-bird-wing-near {
  0% {

    transform: rotate(5deg) rotateX(0deg) translateY(0);
  }

  100% {

    transform: rotate(-28deg) rotateX(135deg) translateY(42px);
  }
}

@keyframes wb-bird-wing-far {
  0% {

    transform: rotate(5deg) rotateX(0deg) translateY(0);
  }

  100% {

    transform: rotate(-24deg) rotateX(130deg) translateY(38px);
  }
}

@keyframes wb-bird-bob {
  0% {

    transform: translateY(5px) rotate(-1deg);
  }

  100% {

    transform: translateY(-9px) rotate(1.5deg);
  }
}

@keyframes wb-fly-ltr {
  0% {
    transform: translate(-80px, 0) scale(var(--wb-scale)) rotate(-1deg);
    opacity: 0;
  }

  6% {
    opacity: 0.95;
  }

  30% {
    transform: translate(calc(30cqi - 20px), -10px) scale(var(--wb-scale))
      rotate(1.5deg);
  }

  65% {
    transform: translate(calc(65cqi - 10px), -4px) scale(var(--wb-scale))
      rotate(-0.5deg);
  }

  94% {
    opacity: 0.95;
  }

  100% {
    transform: translate(calc(100cqi + 80px), -12px) scale(var(--wb-scale))
      rotate(0deg);
    opacity: 0;
  }
}

@keyframes wb-fly-rtl {
  0% {
    transform: translate(80px, 0) scaleX(-1) scale(var(--wb-scale))
      rotate(-1deg);
    opacity: 0;
  }

  6% {
    opacity: 0.95;
  }

  30% {
    transform: translate(calc(-30cqi + 20px), -10px) scaleX(-1)
      scale(var(--wb-scale)) rotate(1.5deg);
  }

  65% {
    transform: translate(calc(-65cqi + 10px), -4px) scaleX(-1)
      scale(var(--wb-scale)) rotate(-0.5deg);
  }

  94% {
    opacity: 0.95;
  }

  100% {
    transform: translate(calc(-100cqi - 80px), -12px) scaleX(-1)
      scale(var(--wb-scale)) rotate(0deg);
    opacity: 0;
  }
}

@supports not (container-type: inline-size) {
  @keyframes wb-fly-ltr {
    0% {
      transform: translate(-80px, 0) scale(var(--wb-scale)) rotate(-1deg);
      opacity: 0;
    }

    6% {
      opacity: 0.95;
    }

    30% {
      transform: translate(calc(30vw - 20px), -10px) scale(var(--wb-scale))
        rotate(1.5deg);
    }

    65% {
      transform: translate(calc(65vw - 10px), -4px) scale(var(--wb-scale))
        rotate(-0.5deg);
    }

    94% {
      opacity: 0.95;
    }

    100% {
      transform: translate(calc(100vw + 80px), -12px) scale(var(--wb-scale))
        rotate(0deg);
      opacity: 0;
    }
  }

  @keyframes wb-fly-rtl {
    0% {
      transform: translate(80px, 0) scaleX(-1) scale(var(--wb-scale))
        rotate(-1deg);
      opacity: 0;
    }

    6% {
      opacity: 0.95;
    }

    30% {
      transform: translate(calc(-30vw + 20px), -10px) scaleX(-1)
        scale(var(--wb-scale)) rotate(1.5deg);
    }

    65% {
      transform: translate(calc(-65vw + 10px), -4px) scaleX(-1)
        scale(var(--wb-scale)) rotate(-0.5deg);
    }

    94% {
      opacity: 0.95;
    }

    100% {
      transform: translate(calc(-100vw - 80px), -12px) scaleX(-1)
        scale(var(--wb-scale)) rotate(0deg);
      opacity: 0;
    }
  }
}

.wb-butterfly-pair {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wb-butterfly-anchor {
  position: absolute;
  top: var(--wb-top, 30%);
  left: var(--wb-left, 30%);
  width: 0;
  height: 0;
  perspective: 600px;
}

.wb-butterfly-flight {
  display: block;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  animation: wb-butterfly-drift var(--wb-dur, 26s)
    cubic-bezier(0.45, 0.05, 0.55, 0.95) var(--wb-delay, 0s) infinite;
  will-change: transform;
}

@keyframes wb-butterfly-drift {
  0% {
    transform: translate(0, 0) scale(var(--wb-scale, 1))
      rotate(calc(var(--wb-dir, 1) * 14deg));
  }

  15% {
    transform: translate(calc(var(--wb-dir, 1) * 16cqi), -7vh)
      scale(calc(var(--wb-scale, 1) * 1.04))
      rotate(calc(var(--wb-dir, 1) * 30deg));
  }

  30% {
    transform: translate(calc(var(--wb-dir, 1) * 26cqi), -12vh)
      scale(calc(var(--wb-scale, 1) * 1.08))
      rotate(calc(var(--wb-dir, 1) * 10deg));
  }

  45% {
    transform: translate(calc(var(--wb-dir, 1) * 20cqi), -3vh)
      scale(calc(var(--wb-scale, 1) * 1.02))
      rotate(calc(var(--wb-dir, 1) * -22deg));
  }

  58% {
    transform: translate(calc(var(--wb-dir, 1) * 5cqi), 6vh)
      scale(calc(var(--wb-scale, 1) * 0.96))
      rotate(calc(var(--wb-dir, 1) * -34deg));
  }

  72% {
    transform: translate(calc(var(--wb-dir, 1) * -12cqi), 10vh)
      scale(calc(var(--wb-scale, 1) * 0.92))
      rotate(calc(var(--wb-dir, 1) * -14deg));
  }

  86% {
    transform: translate(calc(var(--wb-dir, 1) * -14cqi), 4vh)
      scale(calc(var(--wb-scale, 1) * 0.96))
      rotate(calc(var(--wb-dir, 1) * 16deg));
  }

  100% {
    transform: translate(0, 0) scale(var(--wb-scale, 1))
      rotate(calc(var(--wb-dir, 1) * 14deg));
  }
}

@supports not (container-type: inline-size) {
  @keyframes wb-butterfly-drift {
    0% {
      transform: translate(0, 0) scale(var(--wb-scale, 1))
        rotate(calc(var(--wb-dir, 1) * 14deg));
    }

    15% {
      transform: translate(calc(var(--wb-dir, 1) * 16vw), -7vh)
        scale(calc(var(--wb-scale, 1) * 1.04))
        rotate(calc(var(--wb-dir, 1) * 30deg));
    }

    30% {
      transform: translate(calc(var(--wb-dir, 1) * 26vw), -12vh)
        scale(calc(var(--wb-scale, 1) * 1.08))
        rotate(calc(var(--wb-dir, 1) * 10deg));
    }

    45% {
      transform: translate(calc(var(--wb-dir, 1) * 20vw), -3vh)
        scale(calc(var(--wb-scale, 1) * 1.02))
        rotate(calc(var(--wb-dir, 1) * -22deg));
    }

    58% {
      transform: translate(calc(var(--wb-dir, 1) * 5vw), 6vh)
        scale(calc(var(--wb-scale, 1) * 0.96))
        rotate(calc(var(--wb-dir, 1) * -34deg));
    }

    72% {
      transform: translate(calc(var(--wb-dir, 1) * -12vw), 10vh)
        scale(calc(var(--wb-scale, 1) * 0.92))
        rotate(calc(var(--wb-dir, 1) * -14deg));
    }

    86% {
      transform: translate(calc(var(--wb-dir, 1) * -14vw), 4vh)
        scale(calc(var(--wb-scale, 1) * 0.96))
        rotate(calc(var(--wb-dir, 1) * 16deg));
    }

    100% {
      transform: translate(0, 0) scale(var(--wb-scale, 1))
        rotate(calc(var(--wb-dir, 1) * 14deg));
    }
  }
}

.wb-flyer--butterfly {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  will-change: transform;
}

.wb-mate-a {
  animation: wb-mate-a-weave 3.8s ease-in-out infinite;
}

@keyframes wb-mate-a-weave {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  35% {
    transform: translate(5px, -6px) rotate(4deg);
  }

  70% {
    transform: translate(-4px, 4px) rotate(-3deg);
  }
}

.wb-mate-b {
  animation: wb-courtship-orbit var(--wb-orbit-dur, 5.4s) ease-in-out infinite;
}

@keyframes wb-courtship-orbit {
  0% {
    transform: translate(28px, 20px) rotate(8deg);
  }

  25% {
    transform: translate(32px, -12px) rotate(16deg);
  }

  50% {
    transform: translate(-18px, -22px) rotate(-6deg);
  }

  75% {
    transform: translate(-24px, 14px) rotate(-14deg);
  }

  100% {
    transform: translate(28px, 20px) rotate(8deg);
  }
}

.wb-flyer-motion {
  display: block;
  width: 44px;
  perspective: 500px;
  transform-style: preserve-3d;
  will-change: transform;
  animation: wb-butterfly-body-bob var(--wb-flap-dur, 1.9s) ease-in-out
    var(--wb-flap-delay, 0s) infinite;
}

.wb-butterfly-svg {
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.12));
}

.wb-flyer--butterfly .wb-wing {
  transform-box: fill-box;
  will-change: transform;
}

.wb-flyer--butterfly .wb-wing--left {
  transform-origin: 100% 48%;
  animation: wb-butterfly-flap-left var(--wb-flap-dur, 1.9s)
    cubic-bezier(0.4, 0, 0.6, 1) var(--wb-flap-delay, 0s) infinite;
}

.wb-flyer--butterfly .wb-wing--right {
  transform-origin: 0% 48%;
  animation: wb-butterfly-flap-right var(--wb-flap-dur, 1.9s)
    cubic-bezier(0.4, 0, 0.6, 1) var(--wb-flap-delay, 0s) infinite;
}

@keyframes wb-butterfly-flap-left {
  0% {
    transform: scaleX(1) rotateY(0deg) skewY(0deg) translateY(0);
  }

  7% {
    transform: scaleX(0.12) rotateY(-72deg) skewY(-8deg) translateY(-2px);
  }

  15% {
    transform: scaleX(0.96) rotateY(10deg) skewY(2deg) translateY(1px);
  }

  22% {
    transform: scaleX(0.14) rotateY(-68deg) skewY(-7deg) translateY(-2px);
  }

  30% {
    transform: scaleX(0.98) rotateY(8deg) skewY(2deg) translateY(1px);
  }

  37% {
    transform: scaleX(0.22) rotateY(-58deg) skewY(-5deg) translateY(-1px);
  }

  45% {
    transform: scaleX(1) rotateY(0deg) skewY(0deg) translateY(0);
  }

  65% {
    transform: scaleX(0.92) rotateY(-14deg) skewY(-2deg) translateY(-0.5px);
  }

  82% {
    transform: scaleX(0.96) rotateY(-6deg) skewY(-1deg) translateY(0);
  }

  100% {
    transform: scaleX(1) rotateY(0deg) skewY(0deg) translateY(0);
  }
}

@keyframes wb-butterfly-flap-right {
  0% {
    transform: scaleX(1) rotateY(0deg) skewY(0deg) translateY(0);
  }

  7% {
    transform: scaleX(0.12) rotateY(72deg) skewY(8deg) translateY(-2px);
  }

  15% {
    transform: scaleX(0.96) rotateY(-10deg) skewY(-2deg) translateY(1px);
  }

  22% {
    transform: scaleX(0.14) rotateY(68deg) skewY(7deg) translateY(-2px);
  }

  30% {
    transform: scaleX(0.98) rotateY(-8deg) skewY(-2deg) translateY(1px);
  }

  37% {
    transform: scaleX(0.22) rotateY(58deg) skewY(5deg) translateY(-1px);
  }

  45% {
    transform: scaleX(1) rotateY(0deg) skewY(0deg) translateY(0);
  }

  65% {
    transform: scaleX(0.92) rotateY(14deg) skewY(2deg) translateY(-0.5px);
  }

  82% {
    transform: scaleX(0.96) rotateY(6deg) skewY(1deg) translateY(0);
  }

  100% {
    transform: scaleX(1) rotateY(0deg) skewY(0deg) translateY(0);
  }
}

@keyframes wb-butterfly-body-bob {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  7% {
    transform: translateY(2.5px) rotate(-1deg);
  }

  15% {
    transform: translateY(-3px) rotate(1.5deg);
  }

  22% {
    transform: translateY(2px) rotate(-1deg);
  }

  30% {
    transform: translateY(-2.5px) rotate(1deg);
  }

  37% {
    transform: translateY(1px) rotate(-0.5deg);
  }

  45%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

.wb-decor-paused .wb-dot,
.wb-decor-paused .wb-flyer,
.wb-decor-paused .wb-flyer-motion,
.wb-decor-paused .wb-bird-motion,
.wb-decor-paused .wb-bird-wing,
.wb-decor-paused .wb-bird-tail,
.wb-decor-paused .wb-butterfly-pair,
.wb-decor-paused .wb-butterfly-flight,
.wb-decor-paused .wb-flyer--butterfly,
.wb-decor-paused .wb-wing,
.wb-decor-layer.wb-decor-paused * {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .wb-dot,
  .wb-flyer,
  .wb-flyer-motion,
  .wb-bird-motion,
  .wb-bird-wing,
  .wb-bird-tail,
  .wb-butterfly-pair,
  .wb-butterfly-flight,
  .wb-flyer--butterfly,
  .wb-wing {
    animation: none !important;
  }
}

@media (max-width: 782px) {
  .wb-decor-hide-mobile .wb-decor-layer,
  .wb-decor-hide-mobile .wb-decor-butterflies {
    display: none !important;
  }
}