@keyframes rotate360 {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes pulse {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.2;
  }
}
@keyframes pulse {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.2;
  }
}

@keyframes blue-circle-anim-x {
  50% {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(44px);
  }
}

@keyframes blue-circle-anim-y {
  50% {
    animation-timing-function: cubic-bezier(0.55, 0, 0.2, 1);
    transform: translateY(17px);
  }
}

@keyframes green-rectangle-anim {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes red-triangle-anim {
  50% {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(25px) rotate(-53deg);
  }
}

@keyframes yellow-semicircle-anim {
  40% {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(40px) rotate(-1deg);
  }
}

@keyframes grey-rounded-rectangle-anim {
  65% {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(-48px) rotate(-75deg);
  }
}

:host {
  bottom: 0;
  left: 0;
  margin: auto;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

#container {
  height: 100%;
  left: 50%;
  min-height: 700px;
  min-width: 1024px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

img,
span {
  position: absolute;
}

#blue-circle-container {
  animation: blue-circle-anim-x 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  left: calc(13% - 50px);
  top: calc(18% - 26px);
}

#blue-circle-container::after {
  -webkit-mask: url("/src/shapes/blue_circle.svg") no-repeat top left;
  animation: blue-circle-anim-y 9s cubic-bezier(0.25, 0, 0.2, 1) infinite;
  background-color: var(--navi-shape-blue-color);
  content: " ";
  height: 43px;
  position: absolute;
  width: 43px;
}

#yellow-dots {
  -webkit-mask: url("/src/shapes/yellow_dots.svg") no-repeat top left;
  background-color: var(--navi-shape-yellow-dots-color);
  content: " ";
  height: 57px;
  left: 13%;
  top: 18%;
  width: 76px;
}

#grey-rounded-rectangle {
  -webkit-mask: url("/src/shapes/grey_rounded_rectangle.svg") no-repeat top left;
  animation: grey-rounded-rectangle-anim 10s cubic-bezier(0.4, 0, 0.2, 1)
    infinite;
  background-color: var(--navi-shape-grey-color);
  content: " ";
  height: 132px;
  left: -42px;
  top: 45%;
  width: 132px;
}

#red-triangle {
  -webkit-mask: url("/src/shapes/red_triangle.svg") no-repeat bottom left;
  animation: red-triangle-anim 9.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  background-color: var(--navi-shape-red-color);
  bottom: 15%;
  content: " ";
  height: 74px;
  left: 12%;
  width: 65px;
}

#yellow-semicircle {
  -webkit-mask: url("/src/shapes/yellow_semicircle.svg") no-repeat top right;
  animation: yellow-semicircle-anim 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  background-color: var(--navi-shape-yellow-semicircle-color);
  content: " ";
  height: 171px;
  right: 28.5%;
  top: -50px;
  transform: rotate(-7deg);
  width: 211px;
}

#green-rectangle {
  -webkit-mask: url("/src/shapes/green_rectangle.svg") no-repeat bottom right;
  animation: green-rectangle-anim 40s infinite linear;
  background-color: var(--navi-shape-green-color);
  bottom: 8%;
  content: " ";
  height: 371px;
  right: -255px;
  width: 371px;
}

#grey-oval {
  -webkit-mask: url("/src/shapes/face.svg") no-repeat bottom right;
  background-color: var(--navi-shape-grey-color);
  bottom: calc(8% + 24px);
  content: " ";
  height: 150px;
  mix-blend-mode: multiply;
  right: 48px;
  width: 150px;
}

@media (prefers-color-scheme: dark) {
  #grey-oval {
    mix-blend-mode: screen;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes slide-in {
  0% {
    transform: translateX(var(--slide-in-length, 40px));
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slide-up {
  0% {
    transform: translateY(var(--slide-up-length, 60px));
  }

  100% {
    transform: translateY(0);
  }
}

.fade-in {
  animation-delay: var(--animation-delay, 0);
  animation-duration: 200ms;
  animation-fill-mode: forwards;
  animation-name: fade-in;
  animation-timing-function: ease-in;
  opacity: 0;
}

.slide-in {
  animation-delay: var(--animation-delay, 0);
  animation-duration: 200ms;
  animation-fill-mode: forwards;
  animation-name: slide-in;
  animation-timing-function: ease;
  transform: translateX(30px);
}
.slide-up {
  animation-delay: var(--animation-delay, 0.6s);
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-name: slide-up;
  animation-timing-function: ease;
  transform: translateY(60px);
}

@-webkit-keyframes build-in {
  from {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes build-in {
  from {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
  }
}

.build-in {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: build-in;
  animation-name: build-in;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  pointer-events: none;
  opacity: 0;
}

.will-change-opacity-transform {
  transform: matrix(1, 0, 0, 1, 0, 0);
  opacity: 1;
  will-change: transform, opacity;
}

@-webkit-keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(46px);
    transform: translateY(46px);
  }
}
@keyframes scroll {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(46px);
    transform: translateY(46px);
  }
}

/* Animate neon flicker */
@keyframes flicker {
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    text-shadow: -0.2rem -0.2rem 1rem #fff, 0.2rem 0.2rem 1rem #fff,
      0 0 2rem var(--neon-text-color), 0 0 4rem var(--neon-text-color),
      0 0 6rem var(--neon-text-color), 0 0 8rem var(--neon-text-color),
      0 0 10rem var(--neon-text-color);

    /* box-shadow:
          0 0 .5rem #fff,
          inset 0 0 .5rem #fff,
          0 0 2rem var(--neon-border-color),
          inset 0 0 2rem var(--neon-border-color),
          0 0 4rem var(--neon-border-color),
          inset 0 0 4rem var(--neon-border-color);         */
  }

  20%,
  24%,
  55% {
    text-shadow: none;
    box-shadow: none;
  }
}