/* @import url("https://fonts.googleapis.com/css2?family=Syne:wght@500..800&display=swap");

body {
  font-family: "Syne", sans-serif;
} */

@keyframes combinedMotion {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  25% {
    transform: translate(-4px, -4px) scale(1.015);
    opacity: 0.98;
  }

  50% {
    transform: translate(4px, -2px) scale(1.025);
    opacity: 0.97;
  }

  75% {
    transform: translate(-2px, 2px) scale(1.01);
    opacity: 0.99;
  }

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

.animate-combined-motion {
  animation: combinedMotion 6s ease-in-out infinite;
  transition: transform 0.4s ease, filter 0.4s ease;
  will-change: transform, opacity;
  filter: brightness(1.1) drop-shadow(0 4px 10px rgba(0, 123, 255, 0.2));
}

.animate-combined-motion:hover {
  transform: scale(1.06) translateY(-3px);
  filter: brightness(1.1) drop-shadow(0 4px 10px rgba(255, 255, 255, 0.197));
}