:root {
  --animate: 2s linear 0s infinite normal none running;
}

.p-container {
  perspective: 50px;
}

.translation {
  animation: var(--animate) translation;
}
.rotation {
  animation: var(--animate) rotation;
}
.scaling {
  animation: var(--animate) scaling;
}
.skew {
  animation: var(--animate) skew;
}
.morph {
  animation: var(--animate) morph;
}
.fade {
  animation: var(--animate) fade;
}
.blur {
  animation: var(--animate) blur;
}
.glow {
  animation: var(--animate) glow;
}
.ccolor {
  animation: var(--animate) ccolor;
}
.clip {
  animation: var(--animate) cliped;
}
.a3d {
  transform-style: preserve-3d;
  animation: var(--animate) a3d;
}

/* comb */
.t-r {
  animation: var(--animate) t-r;
}
.t-s {
  animation: var(--animate) t-s;
}
.r-s {
  animation: var(--animate) r-s;
}
.t-sk {
  animation: var(--animate) t-sk;
}
.s-op {
  animation: var(--animate) s-op;
}
.b-o {
  animation: var(--animate) b-o;
}
.b-o-c {
  animation: var(--animate) b-o-c;
}
.m-c {
  animation: var(--animate) m-c;
}
.p-s {
  animation: var(--animate) p-s;
}

@keyframes translation {
  0%,
  100% {
    translate: 0px;
  }
  50% {
    translate: 2rem;
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes scaling {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.4;
  }
}
@keyframes skew {
  0%,
  100% {
    transform: skew(0deg);
  }
  50% {
    transform: skew(-45deg);
  }
}
@keyframes morph {
  0%,
  100% {
    width: 2rem;
    height: 1rem;
  }
  50% {
    width: 0.5rem;
    height: 1rem;
    border-radius: 50%;
  }
}
@keyframes fade {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes blur {
  0%,
  100% {
    filter: blur(0px);
  }
  50% {
    filter: blur(10px);
  }
}
@keyframes glow {
  0%,
  100% {
    filter: drop-shadow(0 0 0px var(--primary));
  }
  50% {
    filter: drop-shadow(0 0 10px var(--primary));
  }
}
@keyframes ccolor {
  0%,
  100% {
    background: var(--primary);
  }
  50% {
    background: var(--secondary);
  }
}
@keyframes cliped {
  0%,
  100% {
    clip-path: circle(0% at center);
  }
  50% {
    clip-path: circle(100% at center);
  }
}
@keyframes a3d {
  0% {
    transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg);
  }
  50% {
    transform: rotateZ(180deg) rotateY(20deg) rotateX(-30deg);
  }
  100% {
    transform: rotateZ(360deg) rotateY(0deg) rotateX(0deg);
  }
}

/* comb */
@keyframes t-r {
  0%,
  100% {
    transform: translateX(0px) rotate(0deg);
  }
  50% {
    transform: translateX(2rem) rotate(360deg);
  }
}
@keyframes t-s {
  0%,
  100% {
    transform: translateX(0px) scale(1);
  }
  50% {
    transform: translateX(2rem) scale(1.4);
  }
}
@keyframes r-s {
  0%,
  100% {
    transform: scale(0.8) rotate(0deg);
  }
  50% {
    transform: scale(1.4) rotate(360deg);
  }
}
@keyframes t-sk {
  0%,
  100% {
    transform: translateX(0px) skew(0deg);
  }
  50% {
    transform: translateX(2rem) skew(45deg);
  }
}
@keyframes s-op {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0;
  }
}
@keyframes b-o {
  0%,
  100% {
    filter: blur(0px);
    opacity: 1;
  }
  50% {
    filter: blur(5px);
    opacity: 0;
  }
}
@keyframes b-o-c {
  0%,
  100% {
    filter: blur(0px);
    opacity: 1;
    background: var(--primary);
  }
  50% {
    filter: blur(5px);
    opacity: 0;
    background: var(--secondary);
  }
}
@keyframes m-c {
  0%,
  100% {
    clip-path: circle(0% at center);
    background: var(--primary);
  }
  50% {
    clip-path: circle(100% at center);
    background: var(--secondary);
  }
}
@keyframes p-s {
  0% {
    transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg) scale(0.5);
  }
  50% {
    transform: rotateZ(180deg) rotateY(20deg) rotateX(30deg) scale(0.8);
  }
  100% {
    transform: rotateZ(360deg) rotateY(0deg) rotateX(0deg) scale(0.5);
  }
}

/* Timing functions */
.ease-timing {
  animation-timing-function: ease;
}
.ease-in-timing {
  animation-timing-function: ease-in;
}
.ease-out-timing {
  animation-timing-function: ease-out;
}
.ease-in-out-timing {
  animation-timing-function: ease-in-out;
}
.cubic-timing-2 {
  animation-timing-function: cubic-bezier(0, 0, 0, 1);
}
.cubic-timing-3 {
  animation-timing-function: cubic-bezier(0, 0, 1, 0);
}

.cubic-timing-4 {
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.cubic-timing-5 {
  animation-timing-function: cubic-bezier(1, 0, 0, 1);
}
.cubic-timing-smooth-1 {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.cubic-timing-smooth-2 {
  animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1);
}
.ease-linear-timing {
  animation-timing-function: linear(
    0,
    0.1,
    0.25,
    0.5,
    0.68,
    0.8,
    0.88,
    0.94,
    0.98,
    0.995,
    1
  );
}
.spring-linear-timing {
  animation-timing-function: linear(
    0,
    0.053 0.5%,
    0.238 1.1%,
    1.46 3.6%,
    1.62 4.2%,
    1.673 4.8%,
    1.637 5.3%,
    1.512 5.9%,
    0.689 8.4%,
    0.582 9%,
    0.547 9.6%,
    0.571 10.1%,
    0.656 10.7%,
    1.21 13.2%,
    1.282 13.8%,
    1.305 14.4%,
    1.288 14.9%,
    1.231 15.5%,
    0.858 18%,
    0.81 18.6%,
    0.795 19.1%,
    0.802 19.6%,
    0.829 20.1%,
    1.08 22.6%,
    1.124 23.3%,
    1.138 23.9%,
    1.133 24.4%,
    1.115 24.9%,
    0.946 27.4%,
    0.916 28.1%,
    0.907 28.7%,
    0.923 29.7%,
    1.037 32.2%,
    1.063 33.5%,
    1.047 34.7%,
    0.971 37.2%,
    0.958 38.3%,
    0.968 39.5%,
    1.02 42%,
    1.028 43.1%,
    0.981 47.9%,
    1.013 52.7%,
    0.991 57.5%,
    1.006 62.3%,
    0.996 67.1%,
    1.003 71.8%,
    1
  );
}
.bounce-linear-timing {
  animation-timing-function: linear(
    0,
    0.223 11.7%,
    0.392 18.4%,
    0.619 24.8%,
    0.999 33.3%,
    0.748 40%,
    0.691 42.7%,
    0.672 45.3%,
    0.69 47.8%,
    0.743 50.4%,
    0.999 57.7%,
    0.883 61.8%,
    0.856 63.6%,
    0.848 65.3%,
    0.855 67%,
    0.879 68.8%,
    0.999 74.5%,
    0.953 77.5%,
    0.94 80.2%,
    0.95 82.7%,
    1 88.2%,
    0.987 91.9%,
    1
  );
}
.wiggle-linear-timing {
  animation-timing-function: linear(
    0,
    0.409 5.7%,
    0.68 10.7%,
    0.838 15.5%,
    0.877 17.9%,
    0.89 20.3%,
    0.883 22.1%,
    0.862 24%,
    0.775 28.1%,
    0.103 46.8%,
    -0.03 51.9%,
    -0.11 56.9%,
    -0.142 61.2%,
    -0.143 65.9%,
    -0.124 70.2%,
    -0.021 86%,
    -0.004 92.1%,
    0
  );
}
.overshoot-linear-timing {
  animation-timing-function: linear(
    0,
    0.528 7%,
    0.921 14.4%,
    1.07 18.3%,
    1.19 22.4%,
    1.28 26.7%,
    1.34 31.2%,
    1.366 34.5%,
    1.378 38%,
    1.377 41.7%,
    1.363 45.6%,
    1.308 53.3%,
    1.13 71.3%,
    1.059 80.1%,
    1.013 89.7%,
    1
  );
}
@keyframes timing-animation {
  0%,
  100% {
    transform: translateX(0rem);
  }
  50% {
    transform: translateX(17rem);
  }
}

/* hear animation in buttons sections */
@keyframes heart-filled {
  0% {
    transform: scale(1) translateY(0px) rotate(0deg);
    filter: drop-shadow(0 0 0px var(--primary));
  }
  25% {
    transform: scale(0.9) translateY(2px) rotate(5deg);
    filter: drop-shadow(0 0 5px var(--primary));
  }
  50% {
    transform: scale(1.2) translateY(-4px) rotate(-5deg);
    filter: drop-shadow(0 0 10px var(--primary));
  }
  100% {
    transform: scale(1) translateY(0px) rotate(0deg);
    filter: drop-shadow(0 0 20px transparent);
  }
}

@keyframes circuitous-offset {
  to {
    offset-distance: 100%;
  }
}

/* auth animation */
@keyframes auth-failure {
  0%,
  100% {
    translate: 0;
  }
  25%,
  75% {
    translate: -4px;
  }
  50% {
    translate: 4px;
  }
}
@keyframes border-glow {
  0%,
  100% {
    box-shadow: 0 0 4px 2px var(--primary);
  }
  50% {
    box-shadow: 0 0 8px 4px var(--primary);
  }
}