/* Keyframes */
@keyframes fu {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes bob4 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes bobs {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes dash {
  to { stroke-dashoffset: -28; }
}
@keyframes blink {
  0%, 80%, 100% { opacity: .25; }
  40% { opacity: 1; }
}
@keyframes ping {
  0% { transform: scale(.6); opacity: .7; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes sweep {
  from { transform: translateX(0); }
  to { transform: translateX(280px); }
}
@keyframes growx {
  from { transform: scaleX(.72); }
  to { transform: scaleX(1); }
}
@keyframes growy {
  from { transform: scaleY(.55); }
  to { transform: scaleY(1); }
}
@keyframes marq {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes pr {
  0% { box-shadow: 0 0 0 0 rgba(133,203,166,.75); }
  100% { box-shadow: 0 0 0 10px rgba(133,203,166,0); }
}
@keyframes pglow {
  0%, 100% { box-shadow: 0 6px 18px rgba(58,92,168,.35); }
  50% { box-shadow: -6px 8px 30px rgba(91,127,199,.55), 6px 10px 30px rgba(169,155,214,.45); }
}
@keyframes drag {
  0% { transform: translate(0,0); }
  45% { transform: translate(120px,60px); }
  100% { transform: translate(0,0); }
}
@keyframes drift {
  from { transform: translate(0,0) rotate(0deg); }
  to { transform: translate(0,-18px) rotate(12deg); }
}
@keyframes ring {
  0% { box-shadow: 0 0 0 0 var(--g); }
  100% { box-shadow: 0 0 0 16px rgba(255,255,255,0); }
}
@keyframes starspin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}
/* typing / sequence keyframes (loop with staggered delays) */
@keyframes tlk {
  0% { transform: scaleX(0); opacity: 1; }
  10% { transform: scaleX(1); opacity: 1; }
  88% { transform: scaleX(1); opacity: 1; }
  96%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes popk {
  0% { opacity: 0; transform: translateY(10px) scale(.85); }
  5% { opacity: 1; transform: translateY(0) scale(1); }
  88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}
@keyframes drawk {
  0% { stroke-dashoffset: 1; opacity: 1; }
  40% { stroke-dashoffset: 0; opacity: 1; }
  88% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes chkk {
  0% { stroke-dashoffset: 20; opacity: 1; }
  6% { stroke-dashoffset: 0; opacity: 1; }
  88% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes litk {
  0%, 12%, 100% { transform: scale(1); }
  5% { transform: scale(1.1); }
}

@keyframes caro{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.08)}30%{transform:scale(1)}45%{transform:scale(1.06)}}