@layer base, components, pages;
:root {
  --rubber: fizzy 2s ease-in-out infinite;
  --tracking: tracking .4s .6s var(--springSmooth) both;
  --slideInLeft: slideInLeft .6s .2s var(--springSmooth) forwards;
  --slideInRight: slideInRight .6s .2s var(--springSmooth) forwards;
  --pop: pop .8s var(--springSmooth) forwards;
  --cutin: cutin .6s var(--easing) forwards;
  --slideUp: slideUp .3s ease-in-out forwards;
  --springSmooth: linear(0, 0.03 1.5%, 0.13 3.3%, 0.691 9.9%, 0.906 13%, 1.048 16.2%, 1.092 17.9%, 1.117 19.6%, 1.127 21.5%, 1.12 23.7%, 1.016 34.2%, 0.996 37.5%, 0.986 41%, 1.002 62.1%, 1);
  --springLazy: linear(0, 0.008 1.1%, 0.034 2.3%, 0.134 4.9%, 0.264 7.3%, 0.683 14.3%, 0.797 16.5%, 0.89 18.6%, 0.967 20.7%, 1.027 22.8%, 1.073 25%, 1.104 27.3%, 1.123 30.6%, 1.119 34.3%, 1.018 49.5%, 0.988 58.6%, 0.985 65.2%, 1 84.5%, 1);
  --springSnap: linear(0, 0.03 1.1%, 0.125 2.4%, 0.906 9.8%, 1.046 12.3%, 1.11 15%, 1.116 16.3%, 1.11 17.8%, 1.014 25.8%, 0.987 31.2%, 1.001 47.2%, 1);
  --springGlide: linear(0, 0.004 0.8%, 0.016 1.7%, 0.038 2.7%, 0.068 3.8%, 0.097 4.7%, 0.135 5.8%, 0.329 11%, 0.427 13.8%, 0.479 15.4%, 0.524 16.9%, 0.568 18.5%, 0.609 20.1%, 0.646 21.7%, 0.682 23.4%, 0.714 25.1%, 0.745 26.9%, 0.775 28.8%, 0.801 30.7%, 0.825 32.7%, 0.846 34.7%, 0.867 37%, 0.887 39.4%, 0.904 41.9%, 0.919 44.6%, 0.933 47.5%, 0.945 50.5%, 0.955 53.7%, 0.964 57.2%, 0.978 64.8%, 0.988 73.9%, 0.994 85.1%, 1);
  --overshootSoft: linear(0, -0.004 4.9%, -0.02 9.4%, -0.124 26.4%, -0.126 30.5%, -0.104 34.1%, -0.027 38.8%, 0.108 43.1%, 0.299 47%, 0.817 55.2%, 0.97 59.1%, 1.071 63.4%, 1.118 67.7%, 1.127 72.6%, 1.108 77.2%, 1.019 90.7%, 1.004 95.2%, 1);
  --easing: cubic-bezier(1, 0.17, 0, 0.97);
  --expo: cubic-bezier(0.9, 0, 0.1, 1);
  --smash: cubic-bezier(0.83, 0.36, 0, 0.92);
}
@media (max-width: 1100px) {
  :root {
    --springSmooth: var(--smash);
    --springLazy: var(--smash);
    --springSnap: var(--expo);
    --springGlide: var(--expo);
  }
}

@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2em);
  }
}
@keyframes yurufuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.5em);
  }
}
@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }
  50% {
    transform: rotate(180deg) translate(5vw, -5vw);
  }
  100% {
    transform: rotate(360deg) translate(0, 0);
  }
}
@keyframes float {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  40% {
    transform: translate(0, 0);
  }
  86% {
    transform: translate(-100%, 0);
  }
  90% {
    transform: translate(-100%, calc(100% + 1em));
    opacity: 1;
  }
  95% {
    transform: translate(100%, calc(100% + 1em));
    opacity: 0;
  }
  98% {
    transform: translate(0, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes hueRotate {
  0%, 100% {
    filter: hue-rotate(0deg);
  }
  33% {
    filter: hue-rotate(-180deg);
  }
  66% {
    filter: hue-rotate(180deg);
  }
}
@keyframes blinking {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes onVisible {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotateBack {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes fuwafuwaBlob {
  0%, 100% {
    transform: translate(0, 0) rotate(-2deg);
  }
  25% {
    transform: translate(0, 0.25vw) rotate(-1deg);
  }
  50% {
    transform: translate(-0.25vw, -0.25vw) rotate(0deg);
  }
  75% {
    transform: translate(0, -0.5vw) rotate(-1deg);
  }
}
@keyframes flash {
  0%, 100% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  6% {
    opacity: 0;
  }
  9% {
    opacity: 1;
  }
  12% {
    opacity: 0;
  }
}
@keyframes fizzy {
  0% {
    transform: scaleX(1);
  }
  15% {
    transform: scaleX(1.03);
  }
  20% {
    transform: scaleX(0.97);
  }
  25% {
    transform: scaleX(1.02);
  }
  32.5% {
    transform: scaleX(0.99);
  }
  37.5% {
    transform: scaleX(1.01);
  }
  50%, 100% {
    transform: scaleX(1);
  }
}
@keyframes slideInLeft {
  0% {
    transform: translate(-100vh, -20vh);
    filter: blur(5em);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes slideInRight {
  0% {
    transform: translate(100vh, 20vh);
    filter: blur(5em);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes tracking {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  25% {
    opacity: 0.6;
  }
  33% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes rollin {
  0% {
    transform: translateX(-200vw) rotate(-720deg);
    filter: blur(3em);
    opacity: 0;
  }
  100% {
    transform: translateX(0) rotate(0deg);
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes pop {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes cutin {
  0% {
    transform: translate(-50%, 50%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes slideUp {
  0% {
    transform: translate(0, 1rem);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes loading {
  0%, 25% {
    background-size: 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
    background-position: 0 50%, 0 calc(50% - 2px), 0 calc(50% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
  }
  50% {
    background-size: 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
    background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
  }
  75% {
    background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
    background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
  }
  95%, 100% {
    background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px;
    background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(0% - 2px), 100% calc(100% + 2px);
  }
}
.loader {
  width: 40px;
  aspect-ratio: 1;
  --c: linear-gradient(var(--typo) 0 0);
  --r1: radial-gradient(farthest-side at bottom,var(--typo) 93%,#0000);
  --r2: radial-gradient(farthest-side at top ,var(--typo) 93%,#0000);
  background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2);
  background-repeat: no-repeat;
  animation: loading 1s infinite alternate;
  position: fixed;
  inset: 0;
  margin: auto;
  opacity: 0;
  z-index: 0;
  visibility: hidden;
  transition: opacity 0.2s linear, visibility 0s 0.2s;
}

body:not(.loaded) .loader {
  opacity: 1;
  visibility: visible;
}

/*# sourceMappingURL=animation.css.map */