.fancy {
  font-weight: bold;
  display: flex;
  gap: 0.12rem;
  z-index: 10;
}

.letter {
  display: inline-block;
  transition: all 0.3s ease;
  transform-origin: center;
  will-change: transform, color;
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes bounce {
  0%, 20%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-20px) scale(1.1); }
  60% { transform: translateY(-30px) scale(1.2); }
}

@keyframes spin {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.3); }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-10px) rotate(2deg); }
  75% { transform: translateY(-15px) rotate(5deg); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0) scale(1); }
  25% { transform: translateX(-6px) scale(1.1); }
  75% { transform: translateX(6px) scale(1.1); }
}

@keyframes scale {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.4) rotate(5deg); }
  75% { transform: scale(1.8) rotate(10deg); }
}

@keyframes flip {
  0%, 100% { transform: perspective(400px) rotateY(0); }
  25% { transform: perspective(400px) rotateY(90deg); }
  75% { transform: perspective(400px) rotateY(270deg); }
}

@keyframes wave {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-8px) rotate(-5deg); }
  75% { transform: translateY(8px) rotate(5deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.4); filter: brightness(1.3); }
}

@keyframes slideLeft {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-15px) skewX(5deg); }
  75% { transform: translateX(-20px) skewX(10deg); }
}

@keyframes slideRight {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(15px) skewX(-5deg); }
  75% { transform: translateX(20px) skewX(-10deg); }
}

@keyframes rotateScale {
  0%, 100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(180deg) scale(1.25); }
  75% { transform: rotate(360deg) scale(1.5); }
}

@keyframes glitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-3px, 3px); }
  40% { transform: translate(3px, -3px); }
  60% { transform: translate(-3px, -3px); }
  80% { transform: translate(3px, 3px); }
}

@keyframes vibrate {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(1px, 1px); }
  50% { transform: translate(-1px, -1px); }
  75% { transform: translate(-1px, 1px); }
}

@keyframes swing {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
}

@keyframes rubberBand {
  0%, 100% { transform: scale(1, 1); }
  30% { transform: scale(1.15, 0.85); }
  40% { transform: scale(0.85, 1.15); }
  50% { transform: scale(1.1, 0.9); }
  65% { transform: scale(0.95, 1.05); }
  75% { transform: scale(1.05, 0.95); }
}

@keyframes jello {
  0%, 100% { transform: skewX(0deg) skewY(0deg); }
  25% { transform: skewX(10deg) skewY(10deg); }
  50% { transform: skewX(-8deg) skewY(-8deg); }
  75% { transform: skewX(4deg) skewY(4deg); }
}

@keyframes tada {
  0%, 100% { transform: scale(1) rotate(0); }
  10%, 20% { transform: scale(0.95) rotate(-2deg); }
  30%, 50%, 70%, 90% { transform: scale(1.05) rotate(2deg); }
  40%, 60%, 80% { transform: scale(1.05) rotate(-2deg); }
}

@keyframes wobble {
  0%, 100% { transform: translateX(0%); }
  15% { transform: translateX(-20%) rotate(-3deg); }
  30% { transform: translateX(15%) rotate(2deg); }
  45% { transform: translateX(-10%) rotate(-2deg); }
  60% { transform: translateX(5%) rotate(1deg); }
  75% { transform: translateX(-2%) rotate(-1deg); }
}

@keyframes bounceRotate {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-15px) rotate(90deg); }
  75% { transform: translateY(-30px) rotate(180deg); }
}
@keyframes popIn {
  0% { transform: scale(0.2); opacity: 0; }
  80% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes drop {
  0% { transform: translateY(-100px) scale(0.8); opacity: 0; }
  60% { transform: translateY(10px) scale(1.1); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}

@keyframes zoomRotate {
  0% { transform: scale(0.4) rotate(-360deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes stretch {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(2) scaleY(0.5); }
}

@keyframes shrinkFade {
  0% { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(1); opacity: 0.6; }
}

@keyframes tilt {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(12deg); }
  100% { transform: rotate(0deg); }
}

@keyframes pan {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-15px); }
  75% { transform: translateX(15px); }
}

@keyframes flipX {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(180deg); }
  100% { transform: rotateX(360deg); }
}

@keyframes flipY {
  0% { transform: rotateY(0); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes jiggle {
  0% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}