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

@keyframes right-arrow {
	0%, 100% {
        transform: translateX(0px);
      }
        40% {
        transform: translateX(6px);
      }
        60% {
        transform: translateX(0px);
      }
}

@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); /* 上升 */
    }
    100% {
        transform: translateY(0); /* 回到原位 */
    }
}

@keyframes float-mb {
    0% {
        transform: translateY(0) translateX(-50%);
    }
    50% {
        transform: translateY(-10px) translateX(-50%); /* 上升 */
    }
    100% {
        transform: translateY(0) translateX(-50%); /* 回到原位 */
    }
}

@keyframes scale-up-down {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05); /* 放大 */
    }
    100% {
        transform: scale(1); /* 回到原始大小 */
    }
}


@keyframes rubberStretch {
    0% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(5deg);
    }
}

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
  
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

@keyframes spin-half {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes coin-drop {
    0% {
        top: 15%;
        opacity: 1;
    }
    90% {
        top: 85%;
        opacity: 1;
    }
    100% {
        top: 85%;
        opacity: 0;
    }
}

.rotate-animation {
    animation: spin-half 40s linear infinite;
    transform-origin: center center;
}

.clip-half {
    clip-path: inset(0 0 60% 0); /* 顯示上半部，根據實際需要調整 */
  }


.arrow-animation {
    animation: moveArrow 1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.right-arrow-animation {
    animation: right-arrow 0.75s alternate infinite;
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}

.scale-animation {
    animation: scale-up-down 2s ease-in-out infinite;
}

.bubble-left-animation {
    transform-origin: right bottom;
    animation: rubberStretch 0.8s ease-in-out 0s infinite alternate none running;
}

.fadeInUp-animation {
    animation: fadeInUp 1s ease-in-out;
}

.coin-drop-animate {
    animation: coin-drop 3s cubic-bezier(0.4, 1.2, 0.6, 1) 5s infinite;
}