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

@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}

@keyframes ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes bg-position {
  from {
    background-position: var(--animate-from, 1rem) 0;
  }
  to {
    background-position: var(--animate-to, 0) 0;
  }
}

@keyframes position {
  from {
    inset-inline-start: var(--animate-from-x);
    inset-block-start: var(--animate-from-y);
  }
  to {
    inset-inline-start: var(--animate-to-x);
    inset-block-start: var(--animate-to-y);
  }
}

@keyframes circular-progress {
  0% {
    stroke-dasharray: 1, 400;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 400, 400;
    stroke-dashoffset: -100%;
  }
  100% {
    stroke-dasharray: 400, 400;
    stroke-dashoffset: -260%;
  }
}

@keyframes expand-height {
  from {
    height: 0;
  }
  to {
    height: var(--height);
  }
}

@keyframes collapse-height {
  from {
    height: var(--height);
  }
  to {
    height: 0;
  }
}

@keyframes expand-width {
  from {
    width: 0;
  }
  to {
    width: var(--width);
  }
}

@keyframes collapse-width {
  from {
    height: var(--width);
  }
  to {
    height: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slide-from-left-full {
  from {
    translate: -100% 0;
  }
  to {
    translate: 0 0;
  }
}

@keyframes slide-from-right-full {
  from {
    translate: 100% 0;
  }
  to {
    translate: 0 0;
  }
}

@keyframes slide-from-top-full {
  from {
    translate: 0 -100%;
  }
  to {
    translate: 0 0;
  }
}

@keyframes slide-from-bottom-full {
  from {
    translate: 0 100%;
  }
  to {
    translate: 0 0;
  }
}

@keyframes slide-to-left-full {
  from {
    translate: 0 0;
  }
  to {
    translate: -100% 0;
  }
}

@keyframes slide-to-right-full {
  from {
    translate: 0 0;
  }
  to {
    translate: 100% 0;
  }
}

@keyframes slide-to-top-full {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 -100%;
  }
}

@keyframes slide-to-bottom-full {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 100%;
  }
}

@keyframes slide-from-top {
  0% {
    translate: 0 -0.5rem;
  }
  to {
    translate: 0;
  }
}

@keyframes slide-from-bottom {
  0% {
    translate: 0 0.5rem;
  }
  to {
    translate: 0;
  }
}

@keyframes slide-from-left {
  0% {
    translate: -0.5rem 0;
  }
  to {
    translate: 0;
  }
}

@keyframes slide-from-right {
  0% {
    translate: 0.5rem 0;
  }
  to {
    translate: 0;
  }
}

@keyframes slide-to-top {
  0% {
    translate: 0;
  }
  to {
    translate: 0 -0.5rem;
  }
}

@keyframes slide-to-bottom {
  0% {
    translate: 0;
  }
  to {
    translate: 0 0.5rem;
  }
}

@keyframes slide-to-left {
  0% {
    translate: 0;
  }
  to {
    translate: -0.5rem 0;
  }
}

@keyframes slide-to-right {
  0% {
    translate: 0;
  }
  to {
    translate: 0.5rem 0;
  }
}

@keyframes scale-in {
  from {
    scale: 0.95;
  }
  to {
    scale: 1;
  }
}

@keyframes scale-out {
  from {
    scale: 1;
  }
  to {
    scale: 0.95;
  }
}