/* CSS Keyframe Animations */

@keyframes floatDust {
  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0.1;
  }
  50% {
    transform: translateY(-20px) translateX(15px);
    opacity: 0.35;
  }
}

@keyframes floatCart {
  0%,
  100% {
    transform: translate(-50%, -80%) translateY(0) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -80%) translateY(-5px) rotate(-1deg);
  }
}

@keyframes gemFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(5deg);
  }
}

@keyframes popupFloat {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-50px) scale(1.3);
  }
}

@keyframes flicker {
  0% {
    transform: rotate(-135deg) scale(0.9) skew(2deg, 2deg);
    filter: blur(2px);
  }
  100% {
    transform: rotate(-132deg) scale(1.05) translateY(-5px) skew(-2deg, -2deg);
    filter: blur(3.5px);
  }
}

@keyframes floatEmber {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-75px) translateX(var(--x-shift, 15px)) scale(0.4);
    opacity: 0;
  }
}