/* Button Effects CSS - Based on Hover.css */
/* Animation Effects - handled via inline styles for better control */
/* Hover Effects - Use !important to override inline styles */
.generated-btn._grow:hover {
  transform: scale(1.03) !important;
}

.generated-btn._shrink:hover {
  transform: scale(0.97) !important;
}

.generated-btn._pulse:hover {
  animation: pulse var(--hover-duration, 0.5s) ease !important;
}

.generated-btn._pulse-grow:hover {
  animation: pulse-grow var(--hover-duration, 0.5s) ease !important;
}

.generated-btn._pulse-shrink:hover {
  animation: pulse-shrink var(--hover-duration, 0.5s) ease !important;
}

.generated-btn._push:hover {
  transform: translateY(-1px) !important;
}

.generated-btn._pop:hover {
  transform: scale(1.06) !important;
}

.generated-btn._bounce-in {
  will-change: transform;
}

.generated-btn._bounce-in:hover {
  animation: bounce-in var(--hover-duration, 0.5s) cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.generated-btn._bounce-out:hover {
  animation: bounce-out var(--hover-duration, 0.5s) ease !important;
}

.generated-btn._rotate:hover {
  transform: rotate(3deg) !important;
}

.generated-btn._grow-rotate:hover {
  transform: scale(1.06) rotate(3deg) !important;
}

.generated-btn._float:hover {
  transform: translateY(-3px) !important;
}

.generated-btn._sink:hover {
  transform: translateY(3px) !important;
}

.generated-btn._bob:hover {
  animation: bob var(--hover-duration, 0.5s) ease !important;
}

.generated-btn._hang:hover {
  transform: translateY(-5px) !important;
}

.generated-btn._skew:hover {
  transform: skew(3deg) !important;
}

.generated-btn._skew-forward:hover {
  transform: skew(-3deg) !important;
}

.generated-btn._skew-backward:hover {
  transform: skew(3deg) !important;
}

.generated-btn._wobble-horizontal:hover {
  animation: wobble-horizontal var(--hover-duration, 0.5s) ease !important;
}

.generated-btn._wobble-vertical:hover {
  animation: wobble-vertical var(--hover-duration, 0.5s) ease !important;
}

.generated-btn._wobble-to-bottom-right:hover {
  animation: wobble-to-bottom-right var(--hover-duration, 0.5s) ease !important;
}

.generated-btn._wobble-to-top-right:hover {
  animation: wobble-to-top-right var(--hover-duration, 0.5s) ease !important;
}

.generated-btn._wobble-top:hover {
  animation: wobble-top var(--hover-duration, 0.5s) ease !important;
}

.generated-btn._wobble-bottom:hover {
  animation: wobble-bottom var(--hover-duration, 0.5s) ease !important;
}

.generated-btn._wobble-skew:hover {
  animation: wobble-skew var(--hover-duration, 0.5s) ease !important;
}

.generated-btn._buzz:hover {
  animation: buzz var(--hover-duration, 0.5s) linear !important;
}

.generated-btn._buzz-out:hover {
  animation: buzz-out var(--hover-duration, 0.5s) linear !important;
}

.generated-btn._glow {
  transition: box-shadow var(--hover-duration, 0.3s) ease !important;
}

.generated-btn._glow:hover {
  box-shadow: 0 0 20px var(--glow-color, rgba(59, 130, 246, 0.6)) !important;
}

/* Background Effects */
.generated-btn._back-pulse:hover {
  animation: back-pulse var(--hover-duration, 0.5s) ease !important;
}

._sweep-to-right {
  position: relative;
  overflow: hidden;
}

._sweep-to-right::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--hover-effect-color, rgba(0, 0, 0, 0.2));
  z-index: 1;
  pointer-events: none;
  transition: left var(--hover-duration, 0.5s) ease;
}

._sweep-to-right:hover::before {
  left: 0;
}

._sweep-to-left {
  position: relative;
  overflow: hidden;
}

._sweep-to-left::before {
  content: '';
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: var(--hover-effect-color, rgba(0, 0, 0, 0.2));
  transition: right var(--hover-duration, 0.5s) ease;
}

._sweep-to-left:hover::before {
  right: 0;
}

._sweep-to-bottom {
  position: relative;
  overflow: hidden;
}

._sweep-to-bottom::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--hover-effect-color, rgba(0, 0, 0, 0.2));
  transition: top var(--hover-duration, 0.5s) ease;
}

._sweep-to-bottom:hover::before {
  top: 0;
}

._sweep-to-top {
  position: relative;
  overflow: hidden;
}

._sweep-to-top::before {
  content: '';
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--hover-effect-color, rgba(0, 0, 0, 0.2));
  transition: bottom var(--hover-duration, 0.5s) ease;
}

._sweep-to-top:hover::before {
  bottom: 0;
}

._bounce-to-right {
  position: relative;
  overflow: hidden;
}

._bounce-to-right::before {
  content: '';
  position: absolute;
  top: -1%;
  left: -102%;
  width: 102%;
  height: 102%;
  background: var(--hover-effect-color, rgba(0, 0, 0, 0.2));
  transition: none;
}

._bounce-to-right:hover::before {
  animation: bounce-bg-to-right var(--hover-duration, 0.5s) ease forwards;
}

._bounce-to-left {
  position: relative;
  overflow: hidden;
}

._bounce-to-left::before {
  content: '';
  position: absolute;
  top: -1%;
  right: -102%;
  width: 102%;
  height: 102%;
  background: var(--hover-effect-color, rgba(0, 0, 0, 0.2));
  transition: none;
}

._bounce-to-left:hover::before {
  animation: bounce-bg-to-left var(--hover-duration, 0.5s) ease forwards;
}

._bounce-to-bottom {
  position: relative;
  overflow: hidden;
}

._bounce-to-bottom::before {
  content: '';
  position: absolute;
  top: -102%;
  left: -1%;
  width: 102%;
  height: 102%;
  background: var(--hover-effect-color, rgba(0, 0, 0, 0.2));
  transition: none;
}

._bounce-to-bottom:hover::before {
  animation: bounce-bg-to-bottom var(--hover-duration, 0.5s) ease forwards;
}

._bounce-to-top {
  position: relative;
  overflow: hidden;
}

._bounce-to-top::before {
  content: '';
  position: absolute;
  bottom: -102%;
  left: -1%;
  width: 102%;
  height: 102%;
  background: var(--hover-effect-color, rgba(0, 0, 0, 0.2));
  transition: none;
}

._bounce-to-top:hover::before {
  animation: bounce-bg-to-top var(--hover-duration, 0.5s) ease forwards;
}

._radial-out {
  position: relative;
  overflow: hidden;
}

._radial-out::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: var(--hover-effect-color, rgba(0, 0, 0, 0.2));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width var(--hover-duration, 0.5s) ease, height var(--hover-duration, 0.5s) ease;
}

._radial-out:hover::before {
  width: 150%;
  height: 300%;
}

._radial-in {
  position: relative;
  overflow: hidden;
}

._radial-in::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: var(--hover-effect-color, rgba(0, 0, 0, 0.2));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  transition: width var(--hover-duration, 0.5s) ease, height var(--hover-duration, 0.5s) ease;
}

._radial-in:hover::before {
  width: 150%;
  height: 300%;
}

._rectangle-in {
  position: relative;
  overflow: hidden;
}

._rectangle-in::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: var(--hover-effect-color, rgba(0, 0, 0, 0.2));
  transform: translate(-50%, -50%) scale(0);
  z-index: 1;
  pointer-events: none;
  transition: transform var(--hover-duration, 0.5s) ease;
}

._rectangle-in:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

._rectangle-out {
  position: relative;
  overflow: hidden;
}

._rectangle-out::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: var(--hover-effect-color, rgba(0, 0, 0, 0.2));
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  transition: width var(--hover-duration, 0.5s) ease, height var(--hover-duration, 0.5s) ease;
}

._rectangle-out:hover::before {
  width: 100%;
  height: 100%;
}

._shutter-in-horizontal {
  position: relative;
  overflow: hidden;
}

._shutter-in-horizontal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--hover-effect-color, rgba(0, 0, 0, 0.2));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--hover-duration, 0.5s) ease;
}

._shutter-in-horizontal:hover::before {
  transform: scaleX(1);
}

._shutter-out-horizontal {
  position: relative;
  overflow: hidden;
}

._shutter-out-horizontal::before,
._shutter-out-horizontal::after {
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  height: 100%;
  background: var(--hover-effect-color, rgba(0, 0, 0, 0.2));
  z-index: 1;
  pointer-events: none;
  transition: width var(--hover-duration, 0.5s) ease;
}

._shutter-out-horizontal::before {
  left: 0;
}

._shutter-out-horizontal::after {
  right: 0;
}

._shutter-out-horizontal:hover::before,
._shutter-out-horizontal:hover::after {
  width: 50%;
}

._shutter-in-vertical {
  position: relative;
  overflow: hidden;
}

._shutter-in-vertical::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--hover-effect-color, rgba(0, 0, 0, 0.2));
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--hover-duration, 0.5s) ease;
}

._shutter-in-vertical:hover::before {
  transform: scaleY(1);
}

._shutter-out-vertical {
  position: relative;
  overflow: hidden;
}

._shutter-out-vertical::before,
._shutter-out-vertical::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  background: var(--hover-effect-color, rgba(0, 0, 0, 0.2));
  transition: height var(--hover-duration, 0.5s) ease;
}

._shutter-out-vertical::before {
  top: 0;
}

._shutter-out-vertical::after {
  bottom: 0;
}

._shutter-out-vertical:hover::before,
._shutter-out-vertical:hover::after {
  height: 50%;
}

/* Icon Effects */
._icon-back:hover .btn-icon {
  transform: translateX(-3px);
}

._icon-forward:hover .btn-icon {
  transform: translateX(3px);
}

._icon-down:hover .btn-icon {
  transform: translateY(3px);
}

._icon-up:hover .btn-icon {
  transform: translateY(-3px);
}

._icon-spin:hover .btn-icon {
  animation: spin 2s linear infinite;
}

._icon-drop:hover .btn-icon {
  animation: drop var(--hover-duration, 0.5s) ease;
}

._icon-fade:hover .btn-icon {
  opacity: 0.5;
}

._icon-float-away:hover .btn-icon {
  animation: float-away var(--hover-duration, 0.5s) ease forwards;
}

._icon-sink-away:hover .btn-icon {
  animation: sink-away var(--hover-duration, 0.5s) ease forwards;
}

._icon-bounce:hover .btn-icon {
  animation: bounce var(--hover-duration, 0.5s) ease;
}

._icon-rotate:hover .btn-icon {
  transform: rotate(90deg);
}

._icon-grow:hover .btn-icon {
  transform: scale(1.12);
}

._icon-shrink:hover .btn-icon {
  transform: scale(0.88);
}

._icon-pulse:hover .btn-icon {
  animation: pulse 2s infinite;
}

._icon-pulse-grow:hover .btn-icon {
  animation: pulse-grow 2s infinite;
}

._icon-pulse-shrink:hover .btn-icon {
  animation: pulse-shrink 2s infinite;
}

._icon-push:hover .btn-icon {
  transform: translateY(-1px);
}

._icon-pop:hover .btn-icon {
  transform: scale(1.15);
}

._icon-bounce-in:hover .btn-icon {
  animation: bounce-in var(--hover-duration, 0.5s) ease;
}

._icon-bounce-out:hover .btn-icon {
  animation: bounce-out var(--hover-duration, 0.5s) ease;
}

._icon-grow-rotate:hover .btn-icon {
  transform: scale(1.12) rotate(90deg);
}

._icon-float:hover .btn-icon {
  transform: translateY(-3px);
}

._icon-sink:hover .btn-icon {
  transform: translateY(3px);
}

._icon-bob:hover .btn-icon {
  animation: bob 2s infinite;
}

._icon-hang:hover .btn-icon {
  transform: translateY(-5px);
}

._icon-skew:hover .btn-icon {
  transform: skew(3deg);
}

._icon-skew-forward:hover .btn-icon {
  transform: skew(-3deg);
}

._icon-skew-backward:hover .btn-icon {
  transform: skew(3deg);
}

._icon-wobble-horizontal:hover .btn-icon {
  animation: wobble-horizontal 2s infinite;
}

._icon-wobble-vertical:hover .btn-icon {
  animation: wobble-vertical 2s infinite;
}

._icon-wobble-to-bottom-right:hover .btn-icon {
  animation: wobble-to-bottom-right 2s infinite;
}

._icon-wobble-to-top-right:hover .btn-icon {
  animation: wobble-to-top-right 2s infinite;
}

._icon-wobble-top:hover .btn-icon {
  animation: wobble-top 2s infinite;
}

._icon-wobble-bottom:hover .btn-icon {
  animation: wobble-bottom 2s infinite;
}

._icon-wobble-skew:hover .btn-icon {
  animation: wobble-skew 0.8s ease-in-out infinite;
}

._icon-buzz:hover .btn-icon {
  animation: buzz 0.3s linear infinite;
}

._icon-buzz-out:hover .btn-icon {
  animation: buzz-out var(--hover-duration, 0.5s) linear;
}

/* Border Effects */
._border-trim:hover {
  border: 2px solid currentColor;
}

._border-ripple-out:hover {
  position: relative;
  overflow: hidden;
}

._border-ripple-out:hover::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width var(--hover-duration, 0.5s) ease, height var(--hover-duration, 0.5s) ease;
}

._border-ripple-out:hover::before {
  width: 300px;
  height: 300px;
}

._border-ripple-in:hover {
  position: relative;
  overflow: hidden;
}

._border-ripple-in:hover::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width var(--hover-duration, 0.5s) ease, height var(--hover-duration, 0.5s) ease;
}

._border-ripple-in:hover::before {
  width: 0;
  height: 0;
}

._border-outline-out:hover {
  border: 2px solid currentColor;
  background: transparent;
}

._border-outline-in:hover {
  border: 2px solid transparent;
  background: currentColor;
}

._border-round-corners:hover {
  border-radius: 50px;
}

._border-underline-from-left:hover {
  position: relative;
}

._border-underline-from-left:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--hover-duration, 0.5s) ease;
}

._border-underline-from-left:hover::after {
  transform: scaleX(1);
}

._border-underline-from-center:hover {
  position: relative;
}

._border-underline-from-center:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: currentColor;
  transform: translateX(-50%);
  transition: width var(--hover-duration, 0.5s) ease;
}

._border-underline-from-center:hover::after {
  width: 100%;
}

._border-underline-from-right:hover {
  position: relative;
}

._border-underline-from-right:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--hover-duration, 0.5s) ease;
}

._border-underline-from-right:hover::after {
  transform: scaleX(1);
}

._border-underline-reveal:hover {
  position: relative;
  overflow: hidden;
}

._border-underline-reveal:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: translateX(-100%);
  transition: transform var(--hover-duration, 0.5s) ease;
}

._border-underline-reveal:hover::after {
  transform: translateX(0);
}

._border-overline-from-left:hover {
  position: relative;
}

._border-overline-from-left:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--hover-duration, 0.5s) ease;
}

._border-overline-from-left:hover::after {
  transform: scaleX(1);
}

._border-overline-from-center:hover {
  position: relative;
}

._border-overline-from-center:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: currentColor;
  transform: translateX(-50%);
  transition: width var(--hover-duration, 0.5s) ease;
}

._border-overline-from-center:hover::after {
  width: 100%;
}

._border-overline-from-right:hover {
  position: relative;
}

._border-overline-from-right:hover::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--hover-duration, 0.5s) ease;
}

._border-overline-from-right:hover::after {
  transform: scaleX(1);
}

._border-overline-reveal:hover {
  position: relative;
  overflow: hidden;
}

._border-overline-reveal:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: translateX(-100%);
  transition: transform var(--hover-duration, 0.5s) ease;
}

._border-overline-reveal:hover::after {
  transform: translateX(0);
}

/* Keyframe Animations */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(calc(1 + (0.03 * var(--animation-intensity, 1)))); }
  100% { transform: scale(1); }
}

@keyframes pulse-grow {
  0% { transform: scale(1); }
  50% { transform: scale(calc(1 + (0.06 * var(--animation-intensity, 1)))); }
  100% { transform: scale(1); }
}

@keyframes pulse-shrink {
  0% { transform: scale(1); }
  50% { transform: scale(calc(1 - (0.06 * var(--animation-intensity, 1)))); }
  100% { transform: scale(1); }
}

@keyframes bounce-in {
  0% { 
    transform: scale(0.8); 
    opacity: 0.8; 
  }
  50% { 
    transform: scale(1.05); 
  }
  70% { 
    transform: scale(0.98); 
  }
  100% { 
    transform: scale(1); 
    opacity: 1; 
  }
}

@keyframes bounce-out {
  0% { transform: scale(1); opacity: 1; }
  25% { transform: scale(calc(1 - (0.03 * var(--animation-intensity, 1)))); }
  50% { transform: scale(calc(1 + (0.06 * var(--animation-intensity, 1)))); opacity: 1; }
  100% { transform: scale(calc(0.3 + (0.7 * (1 - var(--animation-intensity, 1))))); opacity: 0; }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(-5px * var(--animation-intensity, 1))); }
}


@keyframes wobble-horizontal {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(calc(-5px * var(--animation-intensity, 1))) rotate(calc(-1deg * var(--animation-intensity, 1))); }
  30% { transform: translateX(calc(4px * var(--animation-intensity, 1))) rotate(calc(0.75deg * var(--animation-intensity, 1))); }
  45% { transform: translateX(calc(-3px * var(--animation-intensity, 1))) rotate(calc(-0.75deg * var(--animation-intensity, 1))); }
  60% { transform: translateX(calc(2px * var(--animation-intensity, 1))) rotate(calc(0.5deg * var(--animation-intensity, 1))); }
  75% { transform: translateX(calc(-1px * var(--animation-intensity, 1))) rotate(calc(-0.25deg * var(--animation-intensity, 1))); }
}

@keyframes wobble-vertical {
  0%, 100% { transform: translateY(0); }
  15% { transform: translateY(calc(-5px * var(--animation-intensity, 1))) rotate(calc(-1deg * var(--animation-intensity, 1))); }
  30% { transform: translateY(calc(4px * var(--animation-intensity, 1))) rotate(calc(0.75deg * var(--animation-intensity, 1))); }
  45% { transform: translateY(calc(-3px * var(--animation-intensity, 1))) rotate(calc(-0.75deg * var(--animation-intensity, 1))); }
  60% { transform: translateY(calc(2px * var(--animation-intensity, 1))) rotate(calc(0.5deg * var(--animation-intensity, 1))); }
  75% { transform: translateY(calc(-1px * var(--animation-intensity, 1))) rotate(calc(-0.25deg * var(--animation-intensity, 1))); }
}

@keyframes wobble-to-bottom-right {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  15% { transform: translate(calc(5px * var(--animation-intensity, 1)), calc(5px * var(--animation-intensity, 1))) rotate(calc(1deg * var(--animation-intensity, 1))); }
  30% { transform: translate(calc(-4px * var(--animation-intensity, 1)), calc(4px * var(--animation-intensity, 1))) rotate(calc(-0.75deg * var(--animation-intensity, 1))); }
  45% { transform: translate(calc(3px * var(--animation-intensity, 1)), calc(-3px * var(--animation-intensity, 1))) rotate(calc(0.75deg * var(--animation-intensity, 1))); }
  60% { transform: translate(calc(-2px * var(--animation-intensity, 1)), calc(2px * var(--animation-intensity, 1))) rotate(calc(-0.5deg * var(--animation-intensity, 1))); }
  75% { transform: translate(calc(1px * var(--animation-intensity, 1)), calc(-1px * var(--animation-intensity, 1))) rotate(calc(0.25deg * var(--animation-intensity, 1))); }
}

@keyframes wobble-to-top-right {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  15% { transform: translate(calc(5px * var(--animation-intensity, 1)), calc(-5px * var(--animation-intensity, 1))) rotate(calc(1deg * var(--animation-intensity, 1))); }
  30% { transform: translate(calc(-4px * var(--animation-intensity, 1)), calc(-4px * var(--animation-intensity, 1))) rotate(calc(-0.75deg * var(--animation-intensity, 1))); }
  45% { transform: translate(calc(3px * var(--animation-intensity, 1)), calc(3px * var(--animation-intensity, 1))) rotate(calc(0.75deg * var(--animation-intensity, 1))); }
  60% { transform: translate(calc(-2px * var(--animation-intensity, 1)), calc(-2px * var(--animation-intensity, 1))) rotate(calc(-0.5deg * var(--animation-intensity, 1))); }
  75% { transform: translate(calc(1px * var(--animation-intensity, 1)), calc(1px * var(--animation-intensity, 1))) rotate(calc(0.25deg * var(--animation-intensity, 1))); }
}

@keyframes wobble-top {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  15% { transform: translateY(calc(-5px * var(--animation-intensity, 1))) rotate(calc(-1deg * var(--animation-intensity, 1))); }
  30% { transform: translateY(calc(4px * var(--animation-intensity, 1))) rotate(calc(0.75deg * var(--animation-intensity, 1))); }
  45% { transform: translateY(calc(-3px * var(--animation-intensity, 1))) rotate(calc(-0.75deg * var(--animation-intensity, 1))); }
  60% { transform: translateY(calc(2px * var(--animation-intensity, 1))) rotate(calc(0.5deg * var(--animation-intensity, 1))); }
  75% { transform: translateY(calc(-1px * var(--animation-intensity, 1))) rotate(calc(-0.25deg * var(--animation-intensity, 1))); }
}

@keyframes wobble-bottom {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  15% { transform: translateY(calc(5px * var(--animation-intensity, 1))) rotate(calc(1deg * var(--animation-intensity, 1))); }
  30% { transform: translateY(calc(-4px * var(--animation-intensity, 1))) rotate(calc(-0.75deg * var(--animation-intensity, 1))); }
  45% { transform: translateY(calc(3px * var(--animation-intensity, 1))) rotate(calc(0.75deg * var(--animation-intensity, 1))); }
  60% { transform: translateY(calc(-2px * var(--animation-intensity, 1))) rotate(calc(-0.5deg * var(--animation-intensity, 1))); }
  75% { transform: translateY(calc(1px * var(--animation-intensity, 1))) rotate(calc(0.25deg * var(--animation-intensity, 1))); }
}

@keyframes wobble-skew {
  0%, 100% { transform: skewX(0deg) skewY(0deg); }
  10% { transform: skewX(-8deg) skewY(-2deg); }
  20% { transform: skewX(8deg) skewY(2deg); }
  30% { transform: skewX(-6deg) skewY(-1.5deg); }
  40% { transform: skewX(6deg) skewY(1.5deg); }
  50% { transform: skewX(-4deg) skewY(-1deg); }
  60% { transform: skewX(4deg) skewY(1deg); }
  70% { transform: skewX(-2deg) skewY(-0.5deg); }
  80% { transform: skewX(2deg) skewY(0.5deg); }
  90% { transform: skewX(-1deg) skewY(-0.25deg); }
}

@keyframes buzz {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(calc(-5px * var(--animation-intensity, 1))) rotate(calc(-0.5deg * var(--animation-intensity, 1))); }
  20% { transform: translateX(calc(5px * var(--animation-intensity, 1))) rotate(calc(0.5deg * var(--animation-intensity, 1))); }
  30% { transform: translateX(calc(-5px * var(--animation-intensity, 1))) rotate(calc(-0.5deg * var(--animation-intensity, 1))); }
  40% { transform: translateX(calc(5px * var(--animation-intensity, 1))) rotate(calc(0.5deg * var(--animation-intensity, 1))); }
  50% { transform: translateX(calc(-5px * var(--animation-intensity, 1))) rotate(calc(-0.5deg * var(--animation-intensity, 1))); }
  60% { transform: translateX(calc(5px * var(--animation-intensity, 1))) rotate(calc(0.5deg * var(--animation-intensity, 1))); }
  70% { transform: translateX(calc(-5px * var(--animation-intensity, 1))) rotate(calc(-0.5deg * var(--animation-intensity, 1))); }
  80% { transform: translateX(calc(5px * var(--animation-intensity, 1))) rotate(calc(0.5deg * var(--animation-intensity, 1))); }
  90% { transform: translateX(calc(-5px * var(--animation-intensity, 1))) rotate(calc(-0.5deg * var(--animation-intensity, 1))); }
}

@keyframes buzz-out {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(calc(-5px * var(--animation-intensity, 1))) rotate(calc(-0.5deg * var(--animation-intensity, 1))); }
  20% { transform: translateX(calc(5px * var(--animation-intensity, 1))) rotate(calc(0.5deg * var(--animation-intensity, 1))); }
  30% { transform: translateX(calc(-5px * var(--animation-intensity, 1))) rotate(calc(-0.5deg * var(--animation-intensity, 1))); }
  40% { transform: translateX(calc(5px * var(--animation-intensity, 1))) rotate(calc(0.5deg * var(--animation-intensity, 1))); }
  50% { transform: translateX(calc(-5px * var(--animation-intensity, 1))) rotate(calc(-0.5deg * var(--animation-intensity, 1))); }
  60% { transform: translateX(calc(5px * var(--animation-intensity, 1))) rotate(calc(0.5deg * var(--animation-intensity, 1))); }
  70% { transform: translateX(calc(-5px * var(--animation-intensity, 1))) rotate(calc(-0.5deg * var(--animation-intensity, 1))); }
  80% { transform: translateX(calc(5px * var(--animation-intensity, 1))) rotate(calc(0.5deg * var(--animation-intensity, 1))); }
  90% { transform: translateX(calc(-5px * var(--animation-intensity, 1))) rotate(calc(-0.5deg * var(--animation-intensity, 1))); }
}

@keyframes back-pulse {
  0%, 100% { background-color: inherit; }
  50% { background-color: var(--hover-effect-color, rgba(0, 0, 0, 0.2)); }
}

@keyframes bounce-to-right {
  0% { transform: translateX(0); }
  50% { transform: translateX(calc(5px * var(--animation-intensity, 1))); }
  100% { transform: translateX(0); }
}

@keyframes bounce-to-left {
  0% { transform: translateX(0); }
  50% { transform: translateX(calc(-5px * var(--animation-intensity, 1))); }
  100% { transform: translateX(0); }
}

@keyframes bounce-to-bottom {
  0% { transform: translateY(0); }
  50% { transform: translateY(calc(5px * var(--animation-intensity, 1))); }
  100% { transform: translateY(0); }
}

@keyframes bounce-to-top {
  0% { transform: translateY(0); }
  50% { transform: translateY(calc(-5px * var(--animation-intensity, 1))); }
  100% { transform: translateY(0); }
}

@keyframes bounce-bg-to-right {
  0% { left: -102%; }
  50% { left: 4%; }
  70% { left: -1%; }
  85% { left: 1%; }
  100% { left: -1%; }
}

@keyframes bounce-bg-to-left {
  0% { right: -102%; }
  50% { right: 4%; }
  70% { right: -1%; }
  85% { right: 1%; }
  100% { right: -1%; }
}

@keyframes bounce-bg-to-bottom {
  0% { top: -102%; }
  50% { top: 4%; }
  70% { top: -1%; }
  85% { top: 1%; }
  100% { top: -1%; }
}

@keyframes bounce-bg-to-top {
  0% { bottom: -102%; }
  50% { bottom: 4%; }
  70% { bottom: -1%; }
  85% { bottom: 1%; }
  100% { bottom: -1%; }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes drop {
  0% { transform: translateY(calc(-10px * var(--animation-intensity, 1))); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes float-away {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(calc(-10px * var(--animation-intensity, 1))); opacity: 0; }
}

@keyframes sink-away {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(calc(10px * var(--animation-intensity, 1))); opacity: 0; }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(calc(-5px * var(--animation-intensity, 1))); }
  60% { transform: translateY(calc(-3px * var(--animation-intensity, 1))); }
}


@keyframes heartBeat {
  0% { transform: scale(1); }
  14% { transform: scale(calc(1 + (0.06 * var(--animation-intensity, 1)))); }
  28% { transform: scale(1); }
  42% { transform: scale(calc(1 + (0.06 * var(--animation-intensity, 1)))); }
  70% { transform: scale(1); }
}

@keyframes headShake {
  0% { transform: translateX(0); }
  6.5% { transform: translateX(calc(-3px * var(--animation-intensity, 1))) rotateY(calc(-4.5deg * var(--animation-intensity, 1))); }
  18.5% { transform: translateX(calc(2.5px * var(--animation-intensity, 1))) rotateY(calc(3.5deg * var(--animation-intensity, 1))); }
  31.5% { transform: translateX(calc(-1.5px * var(--animation-intensity, 1))) rotateY(calc(-2.5deg * var(--animation-intensity, 1))); }
  43.5% { transform: translateX(calc(1px * var(--animation-intensity, 1))) rotateY(calc(1.5deg * var(--animation-intensity, 1))); }
  50% { transform: translateX(0); }
}

@keyframes jello {
  0%, 11.1%, 100% { transform: translate3d(0, 0, 0); }
  22.2% { transform: skewX(calc(-6.25deg * var(--animation-intensity, 1))) skewY(calc(-6.25deg * var(--animation-intensity, 1))); }
  33.3% { transform: skewX(calc(3.125deg * var(--animation-intensity, 1))) skewY(calc(3.125deg * var(--animation-intensity, 1))); }
  44.4% { transform: skewX(calc(-1.5625deg * var(--animation-intensity, 1))) skewY(calc(-1.5625deg * var(--animation-intensity, 1))); }
  55.5% { transform: skewX(calc(0.78125deg * var(--animation-intensity, 1))) skewY(calc(0.78125deg * var(--animation-intensity, 1))); }
  66.6% { transform: skewX(calc(-0.390625deg * var(--animation-intensity, 1))) skewY(calc(-0.390625deg * var(--animation-intensity, 1))); }
  77.7% { transform: skewX(calc(0.1953125deg * var(--animation-intensity, 1))) skewY(calc(0.1953125deg * var(--animation-intensity, 1))); }
  88.8% { transform: skewX(calc(-0.09765625deg * var(--animation-intensity, 1))) skewY(calc(-0.09765625deg * var(--animation-intensity, 1))); }
}

@keyframes flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

@keyframes rubberBand {
  0% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(calc(1 + (0.12 * var(--animation-intensity, 1))), calc(1 - (0.12 * var(--animation-intensity, 1))), 1); }
  40% { transform: scale3d(calc(1 - (0.12 * var(--animation-intensity, 1))), calc(1 + (0.12 * var(--animation-intensity, 1))), 1); }
  50% { transform: scale3d(calc(1 + (0.08 * var(--animation-intensity, 1))), calc(1 - (0.08 * var(--animation-intensity, 1))), 1); }
  65% { transform: scale3d(calc(1 - (0.03 * var(--animation-intensity, 1))), calc(1 + (0.03 * var(--animation-intensity, 1))), 1); }
  75% { transform: scale3d(calc(1 + (0.03 * var(--animation-intensity, 1))), calc(1 - (0.03 * var(--animation-intensity, 1))), 1); }
  100% { transform: scale3d(1, 1, 1); }
}

@keyframes shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(calc(-5px * var(--animation-intensity, 1)), 0, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(calc(5px * var(--animation-intensity, 1)), 0, 0); }
}

@keyframes shakeX {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(calc(-5px * var(--animation-intensity, 1)), 0, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(calc(5px * var(--animation-intensity, 1)), 0, 0); }
}

@keyframes shakeY {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(0, calc(-5px * var(--animation-intensity, 1)), 0); }
  20%, 40%, 60%, 80% { transform: translate3d(0, calc(5px * var(--animation-intensity, 1)), 0); }
}

@keyframes swing {
  20% { transform: rotate3d(0, 0, 1, calc(7.5deg * var(--animation-intensity, 1))); }
  40% { transform: rotate3d(0, 0, 1, calc(-5deg * var(--animation-intensity, 1))); }
  60% { transform: rotate3d(0, 0, 1, calc(2.5deg * var(--animation-intensity, 1))); }
  80% { transform: rotate3d(0, 0, 1, calc(-2.5deg * var(--animation-intensity, 1))); }
  100% { transform: rotate3d(0, 0, 1, 0deg); }
}

@keyframes tada {
  0% { transform: scale3d(1, 1, 1); }
  10%, 20% { transform: scale3d(calc(1 - (0.05 * var(--animation-intensity, 1))), calc(1 - (0.05 * var(--animation-intensity, 1))), 1) rotate3d(0, 0, 1, calc(-1.5deg * var(--animation-intensity, 1))); }
  30%, 50%, 70%, 90% { transform: scale3d(calc(1 + (0.05 * var(--animation-intensity, 1))), calc(1 + (0.05 * var(--animation-intensity, 1))), 1) rotate3d(0, 0, 1, calc(1.5deg * var(--animation-intensity, 1))); }
  40%, 60%, 80% { transform: scale3d(calc(1 + (0.05 * var(--animation-intensity, 1))), calc(1 + (0.05 * var(--animation-intensity, 1))), 1) rotate3d(0, 0, 1, calc(-1.5deg * var(--animation-intensity, 1))); }
  100% { transform: scale3d(1, 1, 1); }
}

@keyframes wobble {
  15% { transform: translate3d(calc(-5% * var(--animation-intensity, 1)), 0, 0) rotate3d(0, 0, 1, calc(-1deg * var(--animation-intensity, 1))); }
  30% { transform: translate3d(calc(4% * var(--animation-intensity, 1)), 0, 0) rotate3d(0, 0, 1, calc(0.75deg * var(--animation-intensity, 1))); }
  45% { transform: translate3d(calc(-3% * var(--animation-intensity, 1)), 0, 0) rotate3d(0, 0, 1, calc(-0.75deg * var(--animation-intensity, 1))); }
  60% { transform: translate3d(calc(2% * var(--animation-intensity, 1)), 0, 0) rotate3d(0, 0, 1, calc(0.5deg * var(--animation-intensity, 1))); }
  75% { transform: translate3d(calc(-1% * var(--animation-intensity, 1)), 0, 0) rotate3d(0, 0, 1, calc(-0.25deg * var(--animation-intensity, 1))); }
  100% { transform: translate3d(0, 0, 0); }
}