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

@keyframes girlMove {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(-2deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes floatCloud {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(10px, -10px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes marqueeMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes boyMove {
  0% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  20% {
    transform: translateY(-10px) translateX(-3px) rotate(-2deg);
  }
  40% {
    transform: translateY(0px) translateX(3px) rotate(2deg);
  }
  60% {
    transform: translateY(-8px) translateX(-2px) rotate(-1deg);
  }
  80% {
    transform: translateY(0px) translateX(2px) rotate(1deg);
  }
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
}

@keyframes skyMotion {
  0% {
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
  }

  20% {
    transform: translateY(-15px) translateX(-10px) rotate(-2deg) scale(1.02);
  }

  40% {
    transform: translateY(-5px) translateX(15px) rotate(2deg) scale(1.04);
  }

  60% {
    transform: translateY(-20px) translateX(-8px) rotate(-1deg) scale(1.03);
  }

  80% {
    transform: translateY(-10px) translateX(10px) rotate(1deg) scale(1.02);
  }

  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
  }
}

@keyframes capFloat {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }

  20% {
    transform: translateY(-10px) rotate(-2deg) scale(1.02);
  }

  40% {
    transform: translateY(-5px) rotate(2deg) scale(1.03);
  }

  60% {
    transform: translateY(-12px) rotate(-1deg) scale(1.02);
  }

  80% {
    transform: translateY(-6px) rotate(1deg) scale(1.01);
  }

  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
}

@keyframes treeFloat {
  0% {
    transform: translateY(0px) translateX(0px);
  }

  25% {
    transform: translateY(-5px) translateX(2px);
  }

  50% {
    transform: translateY(0px) translateX(-2px);
  }

  75% {
    transform: translateY(-3px) translateX(1px);
  }

  100% {
    transform: translateY(0px) translateX(0px);
  }
}

@keyframes wind-blow {
  0% {
    transform-origin: 50% 100%;
    transform: skewX(-2deg);
  }
  50% {
    transform-origin: 50% 100%;
    transform: skewX(2deg);
  }
  100% {
    transform-origin: 50% 100%;
    transform: skewX(-2deg);
  }
}

@keyframes float-bob-y {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}

@keyframes rotate2 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes flyButterfly {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-50px, -30px) rotate(-10deg);
  }
  50% {
    transform: translate(-100px, 20px) rotate(10deg);
  }
  75% {
    transform: translate(-50px, -20px) rotate(-5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes animation-popup-1 {
    0% {
        transform: scale(.2)rotate(0)
    }

    50% {
        transform: scale(.5)rotate(180deg)
    }

    90% {
        transform: scale(1)rotate(360deg)
    }

    to {
        transform: scale(1)rotate(360deg)
    }
}


@keyframes slideLine {
  0% {
    left: 0%;
  }
  50% {
    left: calc(100% - 60px); /* go right */
  }
  100% {
    left: 0%; /* come back */
  }
}