/* Icon animations - link this file ONLY on the pages that need it.
   Usage: add class "icon-anim" (plus one effect) to the <img>.
   Example: <img class="icon-anim icon-float" src="..." width="100" height="100" alt=""> */

.icon-anim {
  display: inline-block;
  transition: transform 0.3s ease, filter 0.3s ease;
  will-change: transform;
}

/* Effect 1: gentle up-and-down floating */
.icon-float {
  animation: icon-float 3s ease-in-out infinite;
}
@keyframes icon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Effect 2: soft pulse */
.icon-pulse {
  animation: icon-pulse 2.4s ease-in-out infinite;
}
@keyframes icon-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* Effect 3: small wiggle */
.icon-wiggle {
  animation: icon-wiggle 2.8s ease-in-out infinite;
}
@keyframes icon-wiggle {
  0%, 100%      { transform: rotate(0); }
  10%, 30%      { transform: rotate(-6deg); }
  20%, 40%      { transform: rotate(6deg); }
  50%           { transform: rotate(0); }
}

/* Hover: pop up a little (works with or without the effects above) */
.icon-anim:hover {
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.12);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.18));
}

/* Respect users who turn off animations in their device settings */
@media (prefers-reduced-motion: reduce) {
  .icon-anim { animation: none !important; transition: none; }
}