* {
  animation-play-state: paused !important;
}

main.animate-in,
main.animate-in * {
  animation-play-state: running !important;
}

/* ============================================================== HOME =============================================================== */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BACKGROUND 1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*---------- SECTION 1 ----------*/
#home #bg1 #section-1-text-1 {
  opacity: 0;
}
#home #bg1 #section-1-text-1.animation {
  animation-name: slideFromTop;
}

/* -------- SECTION 2 ----------*/
#home #bg1 #section-2-text-1 {
  opacity: 0;
}
#home #bg1 #section-2-text-1.animation {
  animation-name: slideExpandLeft;
}
#home #bg1 #section-2-img.animation {
  animation: quantumFlicker 4s infinite linear;
}
#home #bg1 #section-2-btn.animation {
  animation: pulse 0.9s infinite linear;
}
#home #bg1 #section-2-box-1.animation {
  animation:
    bubblePopZoom 1.2s ease-out both,
    floatZigzag 6s infinite linear 1.2s;
}
#home #bg1 #section-2-box-2.animation {
  animation:
    bubblePopZoom 1.6s ease-out 0.4s both,
    subtleMove 6s infinite linear 1.2s;
}
#home #bg1 #section-2-box-3.animation {
  animation:
    bubblePopZoom 2s ease-out 0.8s both,
    bounce 5s infinite linear 1.2s;
}
#home #bg1 #section-2-box-4.animation {
  animation:
    bubblePopZoom 2.4s ease-out 1.2s both,
    float 4s infinite linear 1.2s;
}
#home #bg1 #section-2-box-5.animation {
  animation:
    bubblePopZoom 2.8s ease-out 1.6s both,
    subtleMove 6s infinite linear 1.2s;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BACKGROUND 2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*---------- SECTION 4 ----------*/
#home #bg2 #section-4-text {
  opacity: 0;
}
#home #bg2 #section-4-text.animation {
  animation-name: unfoldLeft;
}

/*---------- SECTION 5 ----------*/
#home #bg2 #section-5-text {
  opacity: 0;
}
#home #bg2 #section-5-text.animation {
  animation-name: cascadeFromTop;
}

/*---------- SECTION 6 ----------*/
#home #bg2 #section-6-text {
  opacity: 0;
}
#home #bg2 #section-6-text.animation {
  animation-name: zoomOut;
}

#home #bg2 #section-6-btn.animation {
  animation: pulse2 0.9s infinite linear;
}

/* ============================================================ ABOUT US ============================================================= */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BACKGROUND 1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*---------- SECTION 1 ----------*/
#about #bg1 #section-1-text-1,
#about #bg1 #section-1-text-2,
#about #bg1 #section-1-icon-1,
#about #bg1 #section-1-icon-2,
#about #bg1 #section-1-icon-3,
#about #bg1 #section-1-icon-4,
#about #bg1 #section-1-vision,
#about #bg1 #section-1-mission {
  opacity: 0;
}
#about #bg1 #section-1-text-1.animation {
  animation-name: slideFromTop;
}
#about #bg1 #section-1-text-2.animation {
  animation-name: slideFromBottom;
}
#about #bg1 #section-1-img.animation {
  animation: wobbleRotate 4s infinite linear;
}
#about #bg1 #section-1-icon-1.animation {
  animation:
    icon1SlideIn 2.4s ease-out 1.2s both,
    subtleMove 12s infinite linear 3.6s;
}
#about #bg1 #section-1-icon-2.animation {
  animation:
    icon2SlideIn 2s ease-out 0.8s both,
    wobble 12s infinite linear 2.8s;
}
#about #bg1 #section-1-icon-3.animation {
  animation:
    icon3SlideIn 1.6s ease-out 0.4s both,
    randomMove 12s infinite linear 2s;
}
#about #bg1 #section-1-icon-4.animation {
  animation:
    icon4SlideIn 1.2s ease-out both,
    bounce 12s infinite linear 1.2s;
}
#about #bg1 #section-1-vision.animation {
  animation-name: burnReveal;
}
#about #bg1 #section-1-mission.animation {
  animation-name: burnReveal;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BACKGROUND 2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*---------- SECTION 2 ----------*/
#about #bg2 #section-2-text,
#about #bg2 #section-2-content1,
#about #bg2 #section-2-content2,
#about #bg2 #section-2-content3 {
  opacity: 0;
}
#about #bg2 #section-2-text.animation {
  animation-name: slideFromMidL;
}
#about #bg2 #section-2-content1.animation {
  animation-name: slideFromMidR;
}
#about #bg2 #section-2-content2.animation {
  animation-name: slideFromMidL;
}
#about #bg2 #section-2-content3.animation {
  animation-name: slideFromMidR;
}

/*---------- SECTION 3 ----------*/
#about #bg2 #section-3-text.animation {
  animation-name: zoomOut;
}

/* ============================================================ SERVICES ============================================================= */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BACKGROUND 1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*---------- SECTION 1 ----------*/
#services #bg1 #section-1-text-1.animation {
  animation-name: cascadeFromTop;
}

#services #bg1 #section-1-icon-1,
#services #bg1 #section-1-icon-2,
#services #bg1 #section-1-icon-3,
#services #bg1 #section-1-icon-4 {
  opacity: 0;
}
#services #bg1 #section-1-img.animation {
  animation: wobbleRotate 4s infinite linear;
}
#services #bg1 #section-1-icon-1.animation {
  animation:
    icon1SlideIn 2.4s ease-out 1.2s both,
    subtleMove 12s infinite linear 3.6s;
}
#services #bg1 #section-1-icon-2.animation {
  animation:
    icon2SlideIn 2s ease-out 0.8s both,
    wobble 12s infinite linear 2.8s;
}
#services #bg1 #section-1-icon-3.animation {
  animation:
    icon3SlideIn 1.6s ease-out 0.4s both,
    randomMove 12s infinite linear 2s;
}
#services #bg1 #section-1-icon-4.animation {
  animation:
    icon4SlideIn 1.2s ease-out both,
    bounce 12s infinite linear 1.2s;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BACKGROUND 2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*---------- SECTION 2 ----------*/
#services #bg2 #section-2-faq-item-1,
#services #bg2 #section-2-faq-item-2,
#services #bg2 #section-2-faq-item-3,
#services #bg2 #section-2-faq-item-4,
#services #bg2 #section-2-faq-item-5,
#services #bg2 #section-2-faq-item-6 {
  opacity: 0;
}
#services #bg2 #section-2-text.animation {
  animation-name: typewriterSlide;
}
#services #bg2 #section-2-faq-item-1.animation {
  animation-name: slideFromMidL;
}
#services #bg2 #section-2-faq-item-2.animation {
  animation-name: slideFromMidR;
}
#services #bg2 #section-2-faq-item-3.animation {
  animation-name: slideFromMidL;
}
#services #bg2 #section-2-faq-item-4.animation {
  animation-name: slideFromMidR;
}
#services #bg2 #section-2-faq-item-5.animation {
  animation-name: slideFromMidL;
}
#services #bg2 #section-2-faq-item-6.animation {
  animation-name: slideFromMidR;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BACKGROUND 3 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*---------- SECTION 3 ----------*/
#services #bg3 #section-3-text {
  opacity: 0;
}
#services #bg3 #section-3-text.animation {
  animation-name: zoomBlurFade;
}
#services #bg3 #section-3-content .section-3-content-item {
  opacity: 0;
}
#services #bg3 #section-3-content .section-3-content-item.animation {
  animation-name: typewriterSlide;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BACKGROUND 4 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*---------- SECTION 4 ----------*/
#services #bg4 #section-4-text.animation {
  animation-name: pixelEffect;
}
#services #bg4 #section-4-content1,
#services #bg4 #section-4-content2,
#services #bg4 #section-4-content3,
#services #bg4 #section-4-content4 {
  opacity: 0;
}
#services #bg4 #section-4-content1.animation {
  animation-name: slideFromMidL;
}
#services #bg4 #section-4-content2.animation {
  animation-name: slideFromMidR;
}
#services #bg4 #section-4-content3.animation {
  animation-name: slideFromMidL;
}
#services #bg4 #section-4-content4.animation {
  animation-name: slideFromMidR;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BACKGROUND 5 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*---------- SECTION 5 ----------*/
#services #bg5 #section-5-text.animation {
  animation-name: burnRevealFromBottom;
}

/*---------- SECTION 6 ----------*/
#services #bg5 #section-6-text.animation {
  animation-name: slideFromTop;
}
#services #bg5 #section-6-btn.animation {
  animation: pulse 0.9s infinite linear;
}

/* ============================================================ CONTACT ============================================================ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ HOOK ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#hook #hook-text-1,
#hook #hook-text-2,
#hook #hook-text-3,
#hook #hook-contact-1,
#hook #hook-contact-2,
#hook #hook-contact-3 {
  opacity: 0;
}
#hook #hook-text-1.animation {
  animation-name: slideFromTop;
}
#hook #hook-text-2.animation,
#hook #hook-text-3.animation {
  animation-name: shatterAssemble;
}
#hook #hook-contact-1.animation,
#hook #hook-contact-2.animation,
#hook #hook-contact-3.animation {
  animation-name: zoomBlurFade;
}
#hook #hook-btn.animation {
  animation: pulse 0.9s infinite linear;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FORM ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#form #form-btn.animation {
  animation: pulse 0.9s infinite linear;
  margin: 0 auto;
}

/* ========================================================== ANIMATION ============================================================== */
.animation {
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-play-state: running !important;
  opacity: 1;
}

/*========================================================== SLIDE ANIMATION ======================================================== */
@keyframes slideFromTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideFromRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideFromMidL {
  from {
    transform: translateX(50%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideFromMidR {
  from {
    transform: translateX(-50%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes zoomOut {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes bubblePopZoom {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9);
    opacity: 1;
  }
  85% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pixelEffect {
  0% {
    clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes cascadeFromTop {
  0% {
    transform: translateY(-10vh) scale(0.9);
    opacity: 0;
  }
  60% {
    transform: translateY(2vh) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes slideExpandLeft {
  0% {
    transform: translateX(-15vw) scaleX(0.8);
    opacity: 0;
  }
  70% {
    transform: translateX(1vw) scaleX(1.02);
    opacity: 1;
  }
  100% {
    transform: translateX(0) scaleX(1);
    opacity: 1;
  }
}

@keyframes burnReveal {
  0% {
    opacity: 0;
    filter: blur(6px) brightness(2);
    transform: scale(1.2);
  }
  50% {
    opacity: 0.5;
    filter: blur(3px) brightness(1.5);
  }
  100% {
    opacity: 1;
    filter: blur(0px) brightness(1);
    transform: scale(1);
  }
}

@keyframes burnRevealFromBottom {
  0% {
    opacity: 0;
    filter: blur(6px) brightness(2);
    transform: translateY(100%);
  }
  50% {
    opacity: 0.5;
    filter: blur(3px) brightness(1.5);
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    filter: blur(0px) brightness(1);
    transform: translateY(0);
  }
}

@keyframes unfoldLeft {
  0% {
    transform: perspective(100vw) rotateY(-90deg);
    transform-origin: left;
    opacity: 0;
  }
  100% {
    transform: perspective(100vw) rotateY(0deg);
    transform-origin: left;
    opacity: 1;
  }
}

@keyframes rollInLeft {
  0% {
    transform: translateX(-20vw) rotate(-180deg);
    opacity: 0;
  }
  100% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes zoomBlurFade {
  0% {
    transform: scale(3) translateY(-50%);
    opacity: 0;
    filter: blur(20px);
  }
  50% {
    transform: scale(0.8) translateY(10%);
    opacity: 0.7;
    filter: blur(5px);
  }
  75% {
    transform: scale(1.05) translateY(-2%);
    opacity: 0.9;
    filter: blur(1px);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes typewriterSlide {
  0% {
    transform: translateX(-20%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}

@keyframes shatterAssemble {
  0% {
    transform: translate(50%, -50%) rotate(45deg) scale(0.3);
    opacity: 0;
    filter: blur(15px) brightness(3);
  }
  25% {
    transform: translate(-20%, 30%) rotate(-30deg) scale(0.6);
    opacity: 0.4;
    filter: blur(10px) brightness(2);
  }
  50% {
    transform: translate(15%, -15%) rotate(20deg) scale(0.9);
    opacity: 0.7;
    filter: blur(5px) brightness(1.5);
  }
  75% {
    transform: translate(-5%, 5%) rotate(-10deg) scale(1.05);
    opacity: 0.9;
    filter: blur(2px) brightness(1.2);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: blur(0px) brightness(1);
  }
}

/* ============================================= ICON SLIDE IN ANIMATIONS =============================================== */
@keyframes icon1SlideIn {
  0% {
    transform: translate(-2.5vw, 5vh);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes icon2SlideIn {
  0% {
    transform: translate(-5vw, 2.5vh);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes icon3SlideIn {
  0% {
    transform: translate(-3.5vw, -2.5vh);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes icon4SlideIn {
  0% {
    transform: translate(-5vw, -5vh);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* ============================================== FLOATING ICON ANIMATIONS ============================================== */
@keyframes floatZigzag {
  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(10px, -5px);
  }

  40% {
    transform: translate(-10px, -10px);
  }

  60% {
    transform: translate(10px, -15px);
  }

  80% {
    transform: translate(-5px, -10px);
  }

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

@keyframes spiralSpin {
  0% {
    transform: rotate(0deg) scale(1) translateX(0);
  }
  25% {
    transform: rotate(90deg) scale(1.3) translateX(20px);
  }
  50% {
    transform: rotate(180deg) scale(1) translateX(0);
  }
  75% {
    transform: rotate(270deg) scale(0.7) translateX(-20px);
  }
  100% {
    transform: rotate(360deg) scale(1) translateX(0);
  }
}

@keyframes bounceDiagonal {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(30px, -30px);
  }
  50% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(-30px, 30px);
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0 rgba(255, 0, 255, 0));
  }
  50% {
    transform: scale(1.15);
    filter: brightness(1.5) drop-shadow(0 0 20px rgba(255, 0, 255, 0.8));
  }
}

@keyframes wobbleRotate {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  15% {
    transform: rotate(5deg) translateY(-10px);
  }
  30% {
    transform: rotate(-5deg) translateY(0);
  }
  45% {
    transform: rotate(8deg) translateY(-8px);
  }
  60% {
    transform: rotate(-8deg) translateY(0);
  }
  75% {
    transform: rotate(5deg) translateY(-5px);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}

@keyframes infinityLoop {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(40px, -20px) rotate(90deg);
  }
  50% {
    transform: translate(0, 0) rotate(180deg);
  }
  75% {
    transform: translate(-40px, 20px) rotate(270deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

@keyframes waveDrift {
  0%,
  100% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(50px) translateY(-15px);
  }
  50% {
    transform: translateX(0) translateY(0);
  }
  75% {
    transform: translateX(-50px) translateY(15px);
  }
}

@keyframes zigzagBounce {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(30px, -25px);
  }
  40% {
    transform: translate(-20px, -10px);
  }
  60% {
    transform: translate(25px, 15px);
  }
  80% {
    transform: translate(-30px, 5px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes orbitCircle {
  0% {
    transform: rotate(0deg) translateX(30px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(30px) rotate(-360deg);
  }
}

@keyframes elasticSqueeze {
  0%,
  100% {
    transform: scaleX(1) scaleY(1);
  }
  25% {
    transform: scaleX(1.4) scaleY(0.6);
  }
  50% {
    transform: scaleX(0.6) scaleY(1.4);
  }
  75% {
    transform: scaleX(1.2) scaleY(0.8);
  }
}

@keyframes pendulumSwing {
  0%,
  100% {
    transform: rotate(0deg) translateY(0);
    transform-origin: top center;
  }
  25% {
    transform: rotate(15deg) translateY(10px);
    transform-origin: top center;
  }
  50% {
    transform: rotate(0deg) translateY(0);
    transform-origin: top center;
  }
  75% {
    transform: rotate(-15deg) translateY(10px);
    transform-origin: top center;
  }
}

@keyframes butterflyFlutter {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scaleX(1);
  }
  25% {
    transform: translateY(-15px) rotate(-5deg) scaleX(0.9);
  }
  50% {
    transform: translateY(-5px) rotate(0deg) scaleX(1.1);
  }
  75% {
    transform: translateY(-20px) rotate(5deg) scaleX(0.9);
  }
}

@keyframes tornadoSpin {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  33% {
    transform: translateY(-40px) rotate(180deg) scale(0.7);
  }
  66% {
    transform: translateY(-20px) rotate(360deg) scale(1.1);
  }
  100% {
    transform: translateY(0) rotate(540deg) scale(1);
  }
}

@keyframes heartbeatPulse {
  0%,
  100% {
    transform: scale(1);
  }
  5% {
    transform: scale(1.15);
  }
  10% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.2);
  }
  20% {
    transform: scale(1);
  }
}

@keyframes meteorStreak {
  0% {
    transform: translate(100px, -100px) rotate(45deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(-100px, 100px) rotate(45deg);
    opacity: 0;
  }
}

@keyframes jellyBounce {
  0%,
  100% {
    transform: scaleX(1) scaleY(1) translateY(0);
  }
  30% {
    transform: scaleX(1.25) scaleY(0.75) translateY(0);
  }
  40% {
    transform: scaleX(0.75) scaleY(1.25) translateY(-40px);
  }
  50% {
    transform: scaleX(1.15) scaleY(0.85) translateY(0);
  }
  65% {
    transform: scaleX(0.95) scaleY(1.05) translateY(-15px);
  }
  75% {
    transform: scaleX(1.05) scaleY(0.95) translateY(0);
  }
}

@keyframes magneticPull {
  0%,
  100% {
    transform: scale(1) translateX(0);
  }
  25% {
    transform: scale(0.8) translateX(-20px);
  }
  50% {
    transform: scale(1.2) translateX(0);
  }
  75% {
    transform: scale(0.9) translateX(20px);
  }
}

@keyframes quantumFlicker {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
  10% {
    transform: translate(5px, -5px);
    opacity: 0.8;
  }
  20% {
    transform: translate(-3px, 3px);
    opacity: 1;
  }
  30% {
    transform: translate(7px, 2px);
    opacity: 0.7;
  }
  40% {
    transform: translate(-2px, -4px);
    opacity: 1;
  }
  50% {
    transform: translate(4px, 6px);
    opacity: 0.9;
  }
  60% {
    transform: translate(-6px, -2px);
    opacity: 1;
  }
  70% {
    transform: translate(3px, -3px);
    opacity: 0.8;
  }
  80% {
    transform: translate(-4px, 4px);
    opacity: 1;
  }
  90% {
    transform: translate(2px, -1px);
    opacity: 0.9;
  }
}

@keyframes oceanWave {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  25% {
    transform: translateY(-20px) translateX(30px) rotate(5deg);
  }
  50% {
    transform: translateY(0) translateX(60px) rotate(0deg);
  }
  75% {
    transform: translateY(20px) translateX(30px) rotate(-5deg);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(0.95);
  }
}

@keyframes pulse2 {
  0% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1.05);
  }
}

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

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

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

@keyframes moveSouthEast {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(20px, 20px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes randomMove {
  0% {
    transform: translate(0px, 0px);
  }
  10% {
    transform: translate(8px, -5px);
  }
  20% {
    transform: translate(-3px, 12px);
  }
  30% {
    transform: translate(15px, 3px);
  }
  40% {
    transform: translate(-8px, -10px);
  }
  50% {
    transform: translate(5px, 8px);
  }
  60% {
    transform: translate(-12px, 2px);
  }
  70% {
    transform: translate(10px, -8px);
  }
  80% {
    transform: translate(-5px, 15px);
  }
  90% {
    transform: translate(3px, -3px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes subtleMove {
  0% {
    transform: translate(0px, 0px);
  }
  10% {
    transform: translate(2px, -1px);
  }
  20% {
    transform: translate(-1px, 3px);
  }
  30% {
    transform: translate(3px, 1px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  50% {
    transform: translate(1px, 2px);
  }
  60% {
    transform: translate(-3px, 0px);
  }
  70% {
    transform: translate(2px, -2px);
  }
  80% {
    transform: translate(-1px, 3px);
  }
  90% {
    transform: translate(1px, -1px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

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

@keyframes wobble {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  15% {
    transform: translateX(-15px) rotate(-5deg);
  }
  30% {
    transform: translateX(10px) rotate(3deg);
  }
  45% {
    transform: translateX(-10px) rotate(-3deg);
  }
  60% {
    transform: translateX(5px) rotate(2deg);
  }
  75% {
    transform: translateX(-5px) rotate(-1deg);
  }
}