@keyframes pop-open {
  0% { transform: scale(0.3); opacity: 0; }
  75% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes blind-open {
  from { max-height: 0; }
  to { max-height: 100rem; }
}

@keyframes blind-close {
  from { max-height: 100rem; }
  to { max-height: 0; }
}

@keyframes appear {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; }
}

@keyframes appear-and-slide-up {
  0% { margin-top: 10rem; opacity: 0; }
  50% { margin-top: -1rem; opacity: 0.5; }
  100% { margin-top: 0; opacity: 1; }
}

@keyframes fade-out {
  100% { opacity: 0; }
}

@keyframes fade-in-out {
  50% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes appear-then-fade {
  0%,100% { opacity: 0; }
  5%,60% { opacity: 1; }
}

@keyframes appear-then-fade-extended {
  0%,100% { opacity: 0; }
  2%,90% { opacity: 1; }
}

@keyframes slide-up-then-down {
  0%,100% { transform: translateY(100px); opacity: 0; }
  5%,95% { transform: translateY(0); opacity: 1; }
}

@keyframes hide {
  to {
    max-height: 0;
    max-width: 0;
    visibility: hidden;
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes wiggle {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(3deg); }
  40% { transform: rotate(-3deg); }
  60% { transform: rotate(3deg); }
  80% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

@keyframes pop-visible {
  0% { transform: scale(0.75); text-indent: 0; }
  33% { transform: scale(0.85); }
  67% { transform: scale(1.25); }
  100% { transform: scale(1); text-indent: 2.3em; }
}

@keyframes fade-in-up {
  0% { transform: translateY(50px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes fade-in-down {
  0% { transform: translateY(-50px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes fade-out-up {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-50px); opacity: 0; }
}

@keyframes fade-out-down {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(500px); opacity: 0; }
}

@keyframes flip-up {
  0% { transform: rotateX(90deg) translateY(50px); opacity: 0; }
  100% { transform: rotateX(0deg) translateY(0px); opacity: 1; }
}

@keyframes dot-falling {
  0% { box-shadow: 9999px -8px 0 0 transparent; }
  25%, 50%, 75% { box-shadow: 9999px 0 0 0 var(--color-shadow); }
  100% { box-shadow: 9999px 8px 0 0 transparent; }
}

@keyframes dot-falling-before {
  0% { box-shadow: 9988px -8px 0 0 transparent; }
  25%, 50%, 75% { box-shadow: 9988px 0 0 0 var(--color-shadow); }
  100% { box-shadow: 9988px 8px 0 0 transparent; }
}

@keyframes dot-falling-after {
  0% { box-shadow: 10010px -8px 0 0 transparent; }
  25%, 50%, 75% { box-shadow: 10010px 0 0 0 var(--color-shadow); }
  100% { box-shadow: 10010px 8px 0 0 transparent; }
}

@keyframes slide-right {
  0% { transform: translateX(0); }
  10% { transform: translateX(0); }
  40% { transform: translateX(0); }
  80% { transform: translateX(116px); opacity: 1; }
  90% { transform: translateX(116px); opacity: 0; }
  100% { transform: translateX(116px); opacity: 0; }
}

@keyframes slide-left {
  0% { transform: translateX(0); }
  10% { transform: translateX(0); }
  40% { transform: translateX(0); }
  80% { transform: translateX(-116px); opacity: 1; }
  90% { transform: translateX(-116px); opacity: 0; }
  100% { transform: translateX(-116px); opacity: 0; }
}

@keyframes slide-in-from-left {
  0% { opacity: 0; }
  40% { transform: translateX(320px); opacity: 0; }
  80% { transform: translateX(0); opacity: 1;}
}

@keyframes slide-in-from-bottom {
  0% { transform: translateY(10rem); opacity: 0; }
  50% { transform: translateY(-1rem); opacity: 0.5; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes slide-in-from-bottom-no-fade {
  0% { transform: translateY(20rem); }
  50% { transform: translateY(-1rem); }
  100% { transform: translateY(0); }
}

@keyframes slide-in-from-bottom-no-bounce {
  0% { transform: translateY(10rem); opacity: 0; }
  50% { opacity: 0.5; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes slide-in-tilt-left {
  0% { transform: translateY(100rem) rotate(0); opacity: 0; }
  50% { transform: translateY(-1rem) rotate(-3deg); opacity: 1; }
  100% { transform: translateY(0) rotate(-1deg); opacity: 1; }
}

@keyframes slide-in-tilt-right {
  0% { transform: translateY(100rem) rotate(0); opacity: 0; }
  50% { transform: translateY(-1rem) rotate(3deg); opacity: 1; }
  100% { transform: translateY(0) rotate(1deg); opacity: 1; }
}

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1); }
  80% { transform: scale(1.1); }
  85% { transform: scale(1.1); }
  90% { transform: scale(0.95); }
  95% { transform: scale(1); }
  100% { transform: scale(1); }
}

@keyframes burst {
  0% { opacity: 0; transform: scale(0.2); }
  30% { opacity: 1; }
  50% { opacity: 0; transform: scale(1); }
  52% { opacity: 0; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(0.2); }
}

@keyframes bubble-burst {
  0% { opacity: 0; transform: scale(0.6); transform-origin: center; }
  33% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}

@keyframes bump {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes pulsing-glow {
  0% { box-shadow: 0 0 0 0 var(--color-tertiary); }
  33% { box-shadow: 0 0 3px 5px var(--color-tertiary); }
}

@keyframes purple-blue {
  0% {
    filter: invert(15%) sepia(88%) saturate(6807%) hue-rotate(257deg) brightness(96%) contrast(106%);
  }
  100% {
    filter: invert(37%) sepia(90%) saturate(6264%) hue-rotate(198deg) brightness(101%) contrast(101%);
  }
}

@keyframes shake {
  0% { transform: translateX(-2rem); }
  25% { transform: translateX(2rem); }
  50% { transform: translateX(-1rem); }
  75% { transform: translateX(1rem); }
}

@keyframes yellowfade {
  from { background: var(--color-bg--warning); }
  to { background: transparent; }
}

@keyframes dancing-ants {
  0% { background-position: left top, right bottom, left bottom, right top; }
  100% { background-position: left 1.5rem top, right 1.5rem bottom , left bottom 1.5rem , right top 1.5rem;}
}

@keyframes nav-slide-left {
  from { margin-left: 50%; filter: grayscale(0); opacity: 1; }
  to { margin-left: 0%; filter: grayscale(1); opacity: 0.66; }
}

@keyframes nav-slide-right {
  from { margin-left: 0%; filter: grayscale(1); opacity: 0.66; }
  to { margin-left: 50%; filter: grayscale(0); opacity: 1; }
}