/* ItsHover - Motion-First Icon Animations for Vanilla JS/HTML */
/* Inspired by itshover.com, adapted for the Cycle design system */

:root {
  --itshover-duration: 0.4s;
  --itshover-ease: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Base Wrapper for Animated Icons */
.itshover-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--itshover-duration) var(--itshover-ease);
  will-change: transform;
}

/* 1. Scale & Pop (Default Hover) */
.itshover-pop:hover .itshover-icon,
.btn:hover .itshover-icon[data-itshover="pop"] {
  transform: scale(1.15) rotate(-2deg);
}

/* 2. Rotate (For Settings/Sync) */
.itshover-rotate:hover .itshover-icon,
.btn:hover .itshover-icon[data-itshover="rotate"] {
  transform: rotate(45deg) scale(1.1);
}

/* 3. Slide Out (For Logout/External) */
.itshover-slide-right:hover .itshover-icon,
.btn:hover .itshover-icon[data-itshover="slide-right"] {
  transform: translateX(4px) scale(1.05);
}

/* 4. Bounce (For Success/Plus) */
@keyframes itshover-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.itshover-bounce:hover .itshover-icon,
.btn:hover .itshover-icon[data-itshover="bounce"] {
  animation: itshover-bounce 0.6s var(--itshover-ease);
}

/* 5. Shake (For Danger/Trash) */
@keyframes itshover-shake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}
.itshover-shake:hover .itshover-icon,
.btn:hover .itshover-icon[data-itshover="shake"] {
  animation: itshover-shake 0.4s ease-in-out;
}

/* Internal Path Animations (mimicking motion/react) */
.itshover-pop:hover svg path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease;
}

/* Integration with Buttons */
.btn .itshover-icon {
  pointer-events: none; /* Let the button handle hover */
}