/* Keyframes & helpers (GPU-friendly: transform/opacity) */
.cwc-anim { display:inline-block; will-change: transform, opacity; animation-timing-function: ease-in-out; }
.cwc-anim.cwc-anim-pause-on-hover:hover { animation-play-state: paused; }

/* Base keyframes (existing) */
@keyframes cwc-float { 0% { transform: translateY(0) } 50% { transform: translateY(-6%) } 100% { transform: translateY(0) } }
@keyframes cwc-wave  { 0% { transform: rotate(0deg) } 50% { transform: rotate(3deg) } 100% { transform: rotate(0deg) } }
@keyframes cwc-breathe{ 0% { letter-spacing: 0 } 50% { letter-spacing: 1.5px } 100% { letter-spacing: 0 } }
@keyframes cwc-jitter{ 0% { transform: translate(0,0) } 50% { transform: translate(1px,-1px) } 100% { transform: translate(0,0) } }

/* New keyframes */
@keyframes cwc-sway   { 0% { transform: translateX(0) } 50% { transform: translateX(6%) } 100% { transform: translateX(0) } }
@keyframes cwc-pop    { 0% { transform: scale(1) } 50% { transform: scale(1.08) } 100% { transform: scale(1) } }
@keyframes cwc-pulse  { 0% { opacity:1 } 50% { opacity:.7 } 100% { opacity:1 } }
@keyframes cwc-bounce { 0%,100% { transform: translateY(0) } 20% { transform: translateY(-12%) } 40% { transform: translateY(0) } 60% { transform: translateY(-6%) } 80% { transform: translateY(0) } }
@keyframes cwc-tilt   { 0% { transform: rotate(-2deg) } 50% { transform: rotate(2deg) } 100% { transform: rotate(-2deg) } }
@keyframes cwc-wobble { 0% { transform: translateX(0) rotate(0) } 25% { transform: translateX(-2%) rotate(-1.5deg) } 50% { transform: translateX(2%) rotate(1.5deg) } 75% { transform: translateX(-1%) rotate(-1deg) } 100% { transform: translateX(0) rotate(0) } }
@keyframes cwc-swing  { 0% { transform: rotate(3deg) } 50% { transform: rotate(-3deg) } 100% { transform: rotate(3deg) } }
@keyframes cwc-spin   { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } }
@keyframes cwc-flipY  { 0% { transform: rotateY(0) } 50% { transform: rotateY(180deg) } 100% { transform: rotateY(360deg) } }
@keyframes cwc-zoom   { 0% { transform: scale(1) } 50% { transform: scale(0.92) } 100% { transform: scale(1) } }
@keyframes cwc-drift  { 0% { transform: translate(0,0) } 25% { transform: translate(2%,-2%) } 50% { transform: translate(0,-3%) } 75% { transform: translate(-2%, -1%) } 100% { transform: translate(0,0) } }

/* Map classes to animation names */
.cwc-float  { animation-name: cwc-float; }
.cwc-wave   { animation-name: cwc-wave; }
.cwc-breathe{ animation-name: cwc-breathe; }
.cwc-jitter { animation-name: cwc-jitter; }
.cwc-sway   { animation-name: cwc-sway; }
.cwc-pop    { animation-name: cwc-pop; }
.cwc-pulse  { animation-name: cwc-pulse; }
.cwc-bounce { animation-name: cwc-bounce; }
.cwc-tilt   { animation-name: cwc-tilt; }
.cwc-wobble { animation-name: cwc-wobble; }
.cwc-swing  { animation-name: cwc-swing; transform-origin: top center; }
.cwc-spin   { animation-name: cwc-spin; }
.cwc-flipY  { animation-name: cwc-flipY; transform-style: preserve-3d; }
.cwc-zoom   { animation-name: cwc-zoom; }
.cwc-drift  { animation-name: cwc-drift; }

/* Debug badge (optional) */
.cwcanimate-badge{
  position:fixed; right:.5rem; bottom:.5rem; z-index:99999; padding:.25rem .5rem;
  font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:#111; color:#fff; border-radius:.4rem; opacity:.75; pointer-events:none;
}