@keyframes paint-white {
  0% {
    color: #338fff;
  }
  100% {
    color: #ffffff;
  }
}

@keyframes bottom-border {
  0% {
    border-width: 0;
  }
  100% {
    border-width: 0 0 2px;
  }
}

@keyframes make-appear {
  0% {
    opacity: 0;
    color: transparent;
  }
  100% {
    opacity: 1;
    color: #338fff;
  }
}

@keyframes make-appear-dark {
  0% {
    opacity: 1;
    color: transparent;
  }
  50% {
    color: transparent;
  }
  51% {
    color: #010912;
  }
  100% {
    opacity: 1;
    color: #010912;
  }
}

@keyframes make-visible {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes make-invisible {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes wall-up {
  0% {
    background-position: center;
  }
  50% {
    background-position: bottom;
  }
  100% {
    background-position: center;
  }
}

@keyframes wall-down {
  0% {
    background-position: center;
  }
  50% {
    background-position: top;
  }
  100% {
    background-position: center;
  }
}

@keyframes wall-left {
  0% {
    background-position: center;
  }
  50% {
    background-position: right;
  }
  100% {
    background-position: center;
  }
}

@keyframes wall-right {
  0% {
    background-position: center;
  }
  50% {
    background-position: left;
  }
  100% {
    background-position: center;
  }
}

@keyframes radiate {
  0% {
    opacity: 0;
    fill: #ffff00;
  }
  50% {
    opacity: 1;
    fill: #e8152a;
  }
  100% {
    opacity: 0;
    fill: #e8152a;
  }
}

@keyframes infinite {
  0% {
    opacity: 0.2;
    fill: #99ff00;
  }
  50% {
    opacity: 0.5;
    fill: #00ccff;
  }
  100% {
    opacity: 0.8;
    fill: #e8152a;
  }
}

@keyframes magnet-entry {
  0% {
    opacity: 0;
    transform: translate(50vw, 10vh) rotateY(0deg) rotateZ(1080deg)
      scale(2.5, 2.5);
  }
  50% {
    opacity: 1;
    transform: translate(15px, -70px) rotateY(0deg) rotateZ(10deg) scale(1);
  }
  60% {
    opacity: 1;
    transform: translate(15px, -70px) rotateY(0deg) rotateZ(200deg) scale(1);
  }
  80% {
    transform: translate(0, -70px) rotateY(0deg) rotateZ(150deg) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotateY(0deg) rotateZ(0deg) scale(1);
  }
}

@keyframes glow {
  0% {
    filter: drop-shadow(0 0 5px rgba(245, 134, 52, 0.4));
  }
  100% {
    filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.8));
  }
}

@keyframes wind-glow {
  0% {
    filter: drop-shadow(0 0 1px rgba(155, 255, 255, 0.3));
  }
  100% {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
  }
}

@keyframes glow-below {
  0% {
    filter: drop-shadow(0 5px 5px rgba(245, 134, 52, 0.4));
  }
  100% {
    filter: drop-shadow(0 15px 15px rgba(255, 0, 0, 0.8));
  }
}

@keyframes glow-dark {
  0% {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(26, 159, 248, 0.8));
  }
  100% {
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.8));
  }
}

@keyframes glow-a-little {
  0% {
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  50% {
    filter: drop-shadow(0 0 var(--feather, 20px) rgba(0, 0, 0, 0.8));
  }
  100% {
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
}

@keyframes text-shadow {
  0% {
    filter: none;
  }
  30% {
    filter: drop-shadow(4px 4px 15px rgba(0, 0, 0, 0.8));
  }
  40% {
    filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.7));
  }
  90% {
    filter: drop-shadow(4px 4px 1px rgba(0, 0, 0, 0.7));
  }
  100% {
    filter: none;
  }
}

@keyframes violations-entry {
  0% {
    opacity: 0;
    transform: translate(50vw, 30vh) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: translate(-5vw, 30vh) rotate(210deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes overcharges-entry {
  0% {
    opacity: 0;
    transform: translate(-40vw, -50vh) scale(10) rotate(2800deg);
  }
  50% {
    opacity: 1;
    transform: translate(10vw, 20vh) scale(0.2) rotate(720deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

@keyframes delays-entry {
  0% {
    opacity: 0;
    transform: translate(50vw, -20vh) scale(0.5) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: translate(-20vw, 15vh) scale(3) rotate(7200deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

@keyframes injury-entry {
  0% {
    opacity: 1;
    transform: translate(-50vw, 15vh) scale(0) rotateX(90deg) rotateY(360deg);
  }
  70% {
    transform: translate(0, 18vh) scale(2) rotateX(70deg) rotateY(0deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotateX(0deg) rotateY(0deg);
  }
}

@keyframes hassle-entry {
  0% {
    opacity: 1;
    /* transform: translate(-50vw, 15vh) scale(0) rotateX(90deg) rotateY(360deg); */
    transform: translate(
        var(--trasnlateStartX, -100vw),
        var(--trasnlateStartY, 0)
      )
      scale(var(--scaleStart, 0));
  }
  /* 70% {
    transform: translate(0, 18vh) scale(2) rotateX(70deg) rotateY(0deg);
  } */
  100% {
    opacity: 1;
    /* transform: translate(0, 0) scale(1) rotateX(0deg) rotateY(0deg); */
    transform: translate(var(--trasnlateEndX, 0), var(--trasnlateEndY, 0))
      scale(var(--scaleEnd, 1));
  }
}

@keyframes controller-entry {
  0% {
    opacity: 1;
    transform: translate(400px, 0);
  }
  30% {
    transform: translate(0);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

/* @keyframes bottom-headers-up {
  0% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(-30vw, 0);
  }
  70% {
    transform: translate(-30vw, -10vh);
  }
  100% {
    transform: translate(0, -10vh);
  }
} */

/* @keyframes bottom-headers-left {
  0% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(-30vw, 0);
  }
  70% {
    transform: translate(-30vw, 0);
  }
  100% {
    transform: translate(0, 0);
  }
} */

/* @keyframes controller-right {
  0% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(130px, 0);
  }
  70% {
    transform: translate(130px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
} */

@keyframes drop-250vh-entry {
  0% {
    opacity: 0;
    transform: translate(0, -250vh);
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes top-to-85vh {
  0% {
    transform: scale(1);
  }
  10% {
    /* top: 25vh; */
    transform: scale(0.6);
  }
  90% {
    top: 85vh;
    transform: scale(0.6);
  }
  100% {
    top: 85vh;
    transform: scale(1);
  }
}

@keyframes left-to-3vw {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.6);
  }
  90% {
    left: 3vw;
    transform: scale(0.6);
  }
  100% {
    left: 3vw;
    transform: scale(1);
  }
}

@keyframes rock-a-little {
  0% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

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

@keyframes crushed-exit {
  0% {
    transform: translate(0, 220px) scale(1) rotate(0deg);
  }
  20% {
    transform: translate(20px, 30px) scale(1) rotate(-80deg);
  }
  80% {
    transform: translate(31vw, 50vh) scale(1.3) rotate(-610deg);
  }
  100% {
    transform: translate(25vw, 65vh) scale(1) rotate(0deg);
  }
}

@keyframes chain-exit {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  20% {
    transform: translate(0, -500vh) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(0, -500vh) scale(0);
  }
}

@keyframes exit-left {
  0% {
    transform: translate(0, 0) scale(1);
  }
  20% {
    transform: translate(0, 0) scale(1.5);
  }
  100% {
    transform: translate(-600px, 0) scale(1.5);
  }
}

@keyframes reduce-to-nothing {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(0, 10px) scale(0);
  }
}

@keyframes cyclon-1 {
  0% {
    transform: translate(0, 0) scale(1) rotateZ(0deg);
  }
  100% {
    transform: translate(12px, 0) scale(1.3, 1) rotateZ(-1deg);
  }
}

@keyframes cyclon-2 {
  0% {
    transform: translate(0, 0) rotateZ(0deg);
  }
  100% {
    transform: translate(-10px, 0) rotateZ(-1deg);
  }
}

@keyframes cyclon-3 {
  0% {
    transform: translate(0, 0) scale(1) rotateZ(0deg);
  }
  100% {
    transform: translate(-20px, 0) scale(1.3, 1) rotateZ(-1deg);
  }
}

@keyframes cyclon-4 {
  0% {
    transform: translate(0, 0) rotateZ(0deg);
  }
  100% {
    transform: translate(8px, 0) rotateZ(-1deg);
  }
}

@keyframes wind-move-1 {
  0% {
    transform: translate(0, 0) rotateZ(0deg);
  }
  100% {
    transform: translate(0, 10px) rotateZ(-1deg);
  }
}

@keyframes wind-move-2 {
  0% {
    transform: translate(0, 0) rotateZ(0deg);
  }
  100% {
    transform: translate(0, 5px) rotateZ(1deg);
  }
}

@keyframes wind-power {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(0, -20px);
  }
  30% {
    transform: translate(0, 10px);
  }
  50% {
    transform: translate(0, 5px);
  }
  75% {
    transform: translate(0, 5px);
  }
  100% {
    transform: translate(0, 10px);
  }
}

@keyframes splash-1 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(20px, -110px) rotate(180deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

@keyframes splash-2 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-23px, -130px) rotate(-180deg);
  }
  100% {
    transform: translate(0, 0) rotate(-360deg);
  }
}

@keyframes splash-3 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-3px, -150px) rotate(180deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

@keyframes splash-4 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(10px, -120px) rotate(180deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

@keyframes splash-5 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-10px, -100px) rotate(-180deg);
  }
  100% {
    transform: translate(0, 0) rotate(-360deg);
  }
}

@keyframes scale-from-top-center {
  0% {
    transform: scale(1);
    transform-origin: 50% 0;
  }
  100% {
    transform: scale(var(--scale));
    transform-origin: 50% 0;
  }
}

@keyframes scale-services {
  0% {
    opacity: 0;
    height: 0;
    width: 0;
    transform: scale(0);
  }
  99% {
    opacity: 0;
    height: var(--height);
    width: var(--width);
    transform: scale(0);
  }
  100% {
    opacity: 1;
    height: var(--height);
    width: var(--width);
    transform: scale(1);
  }
}

@keyframes elbow-dot {
  0% {
    opacity: 1;
    transform: translate(0, var(--trasnlateY1)) scale(1);
  }
  25% {
    opacity: 1;
    transform: translate(var(--trasnlateX), var(--trasnlateY2)) scale(1);
  }
  26% {
    opacity: 0.2;
    transform: translate(var(--trasnlateX), var(--trasnlateY2)) scale(1);
  }
  70% {
    opacity: 0.3;
    transform: translate(var(--trasnlateX), var(--trasnlateY3))
      scale(var(--scale));
  }
  75% {
    opacity: 0.2;
    transform: translate(var(--trasnlateX), var(--trasnlateY3))
      scale(var(--scale));
  }
  100% {
    opacity: 0;
    transform: translate(var(--trasnlateX), var(--trasnlateY3)) scale(0);
  }
}

@keyframes make-appear-services {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  75% {
    opacity: 0.2;
    transform: scale(0);
  }
  85% {
    opacity: 0.5;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes boomerang-down-5 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 5px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes boomerang-down-25 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 25px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes show-move {
  0% {
    opacity: var(--startOpacity, 0);
    transform: translate(var(--trasnlateX, 0), var(--trasnlateY, 0));
  }
  1% {
    opacity: var(--midOpacity, 1);
  }
  100% {
    opacity: var(--endOpacity, 1);
    transform: translate(0, 0);
  }
}

@keyframes move {
  0% {
    transform: translate(var(--trasnlateX, 0), var(--trasnlateY, 0));
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes blink {
  0% {
    transform: translate(0) scale(1) rotateZ(0deg);
  }
  25% {
    transform: translate(-28px, 35px) scale(1.4, 0.2) rotateZ(-13deg);
  }
  75% {
    transform: translate(-28px, 34px) scale(1.4, 0.2) rotateZ(-13deg);
  }
  100% {
    transform: translate(0) scale(1) rotateZ(0deg);
  }
}

@keyframes speak {
  0% {
    opacity: 0;
    transform: translate(var(--trasnlateX, 0), var(--trasnlateY, 0)) scale(0);
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(var(--trasnlateX2, 0), var(--trasnlateY2, 0)) scale(1);
  }
}

@keyframes change-fill-color {
  0% {
    fill: var(--start-color);
  }
  100% {
    fill: var(--end-color);
  }
}