.nut-animate {
  /* Animation CSS */
  [class*='nut-animate-'] {
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
  }

  /* Slide Animations */
  @keyframes slide-right {
    0% {
      opacity: 0;
      transform: translateX(100%);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slide-left {
    0% {
      opacity: 0;
      transform: translateX(-100%);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slide-top {
    0% {
      opacity: 0;
      transform: translateY(-100%);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slide-bottom {
    0% {
      opacity: 0;
      transform: translateY(100%);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  // Assign slide animations
  // 右侧向左侧滑入
  .nut-animate-slide-right {
    animation-name: slide-right;
  }
  // 左侧向右侧滑入
  .nut-animate-slide-left {
    animation-name: slide-left;
  }
  // 上面向下面滑入
  .nut-animate-slide-top {
    animation-name: slide-top;
  }
  // 下面向上面滑入
  .nut-animate-slide-bottom {
    animation-name: slide-bottom;
  }

  /* Shake Animation */
  @keyframes shake {
    0%,
    100% {
      transform: translateX(0);
    }
    10% {
      transform: translateX(scale-px(-9px));
    }
    20% {
      transform: translateX(scale-px(8px));
    }
    30% {
      transform: translateX(scale-px(-7px));
    }
    40% {
      transform: translateX(scale-px(6px));
    }
    50% {
      transform: translateX(scale-px(-5px));
    }
    60% {
      transform: translateX(scale-px(4px));
    }
    70% {
      transform: translateX(scale-px(-3px));
    }
    80% {
      transform: translateX(scale-px(2px));
    }
    90% {
      transform: translateX(scale-px(-1px));
    }
  }
  .nut-animate-shake {
    animation-name: shake;
  }

  /* Ripple Animation */
  @keyframes ripple {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }
  .nut-animate-ripple {
    animation-name: ripple;
  }

  /* Breath Animation */
  @keyframes breath {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }
  .nut-animate-breath {
    animation-name: breath;
    animation-duration: 2700ms;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
  }

  /* Twinkle Animation */
  .nut-animate-twinkle {
    position: relative;
    &::after,
    &::before {
      width: scale-px(60px);
      height: scale-px(60px);
      content: '';
      box-sizing: border-box;
      border: scale-px(4px) solid rgba(255, 255, 255, 0.6);
      position: absolute;
      border-radius: scale-px(30px);
      right: 50%;
      margin-top: scale-px(-30px);
      margin-right: scale-px(-30px);
      z-index: 1;
      transform: scale(0);
      animation: twinkle 2s ease-out infinite;
    }
    &::after {
      animation-delay: 0.4s;
    }
  }

  @keyframes twinkle {
    0% {
      transform: scale(0);
    }
    20% {
      opacity: 1;
    }
    50%,
    100% {
      transform: scale(1.4);
      opacity: 0;
    }
  }

  /* Flicker Animation */
  .nut-animate-flicker {
    position: relative;
    overflow: hidden;
    &::after {
      width: scale-px(100px);
      height: scale-px(60px);
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0.73;
      content: '';
      background-image: linear-gradient(
        106deg,
        rgba(232, 224, 255, 0) 24%,
        #e8e0ff 91%
      );
      animation: flicker 1.5s linear infinite;
      transform: skewX(-20deg);
      filter: blur(scale-px(3px));
    }
  }

  @keyframes flicker {
    0% {
      transform: translateX(scale-px(-100px)) skewX(-20deg);
    }
    40%,
    100% {
      transform: translateX(scale-px(150px)) skewX(-20deg);
    }
  }

  /* Jump Animation */
  @keyframes jump {
    0% {
      transform: rotate(0) translateY(0);
    }
    25% {
      transform: rotate(10deg) translateY(scale-px(20px));
    }
    50% {
      transform: rotate(0) translateY(scale-px(-10px));
    }
    75% {
      transform: rotate(-10deg) translateY(scale-px(20px));
    }
    100% {
      transform: rotate(0) translateY(0);
    }
  }
  .nut-animate-jump {
    transform-origin: center center;
    animation: jump 0.7s linear;
  }

  /* Float Animation */
  @keyframes float-pop {
    0% {
      top: 0;
    }
    25% {
      top: scale-px(1px);
    }
    50% {
      top: scale-px(4px);
    }
    75% {
      top: scale-px(1px);
    }
    100% {
      top: 0;
    }
  }
  .nut-animate-float {
    position: relative;
    animation-name: float-pop;
  }

  /* Loop Animation */
  .loop {
    animation-iteration-count: infinite;
  }
}