/* Badge Standing Fan Oscillation Animation */

.badge-detail-art img {
  animation: badgeOscillate 6s ease-in-out infinite;
  transform-origin: center top;
}

@keyframes badgeOscillate {
  0% {
    transform: perspective(300px) rotateY(-15deg);
  }
  50% {
    transform: perspective(300px) rotateY(15deg);
  }
  100% {
    transform: perspective(300px) rotateY(-15deg);
  }
}


/* Mobile optimization - slower oscillation for performance */
@media (max-width: 768px) {
  .badge-detail-art img {
    animation: badgeOscillateMobile 5s ease-in-out infinite;
  }

  @keyframes badgeOscillateMobile {
    0% {
      transform: perspective(200px) rotateY(-12deg);
    }
    50% {
      transform: perspective(200px) rotateY(12deg);
    }
    100% {
      transform: perspective(200px) rotateY(-12deg);
    }
  }

  /* Keep same speed on mobile hover */
  .badge-detail-art:hover img {
    animation: badgeOscillateMobile 5s ease-in-out infinite;
  }
}

/* Option to disable animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .badge-detail-art img {
    animation: none;
  }

  .badge-detail-art:hover img {
    animation: none;
  }
}

/* Alternative wind gust effect (commented out - can be enabled instead) */
/*
.badge-detail-art img {
  animation: windGust 4.5s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes windGust {
  0%, 85%, 100% {
    transform: perspective(150px) rotateY(0deg) skewX(0deg);
  }

  10% {
    transform: perspective(150px) rotateY(3deg) skewX(2deg);
  }

  15% {
    transform: perspective(150px) rotateY(-1deg) skewX(-0.5deg);
  }

  20% {
    transform: perspective(150px) rotateY(0deg) skewX(0deg);
  }
}
*/