@keyframes tracker-pulse {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes tracker-slide-in {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes tracker-mega-slide-in {
  from {
    transform: translateX(-200%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes tracker-ball-rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(1080deg);
  }
}

@keyframes tracker-ball-x {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(20%);
  }
}

@keyframes tracker-ball-y {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-40%);
  }
}

@keyframes tracker-bounce {
  from {
    transform: scale(.8);
  }

  to {
    transform: scale(1.2);
  }
}

.flip {
  transform: scaleX(-1);
}

.flip .goal-label {
  transform-origin: 73.8465px 40.4175px;
  transform: scaleX(-1);
}

.animationBallSafe .anim-ball-safe {
  visibility: visible;
  animation: .8s ease-in-out infinite alternate tracker-pulse;
}

.animationAttack .anim-attack, .animationDangerousAttack .anim-dangerous-attack {
  visibility: visible;
  animation: .8s ease-in-out tracker-slide-in, .8s ease-in-out .8s infinite alternate tracker-pulse;
}

.animationCorner .ball .real-ball {
  transform-origin: 95.392px 157.53px;
  animation: 2s linear infinite tracker-ball-rotate;
}

.animationCorner .ball .y-coordinate {
  transform-origin: 95.392px 157.53px;
  animation: 2s ease-in-out infinite tracker-ball-y;
  transform: translateY(-20%);
}

.animationCorner .ball.x-coordinate {
  transform-origin: 95.392px 157.53px;
  visibility: visible;
  animation: 1s ease-in-out infinite alternate tracker-ball-x;
}

.animationGoal .goal-label-container {
  transform-origin: 73.8465px 40.4175px;
  visibility: visible;
  animation: .8s ease-in-out tracker-mega-slide-in, 1s ease-in-out .8s infinite alternate tracker-bounce;
}

.anim-ball-safe, .anim-attack, .anim-dangerous-attack, .ball, .goal-label-container {
  visibility: hidden;
}

@keyframes react-loading-skeleton {
  100% {
    transform: translateX(100%);
  }
}

.react-loading-skeleton {
  --base-color: #ebebeb;
  --highlight-color: #f5f5f5;
  --animation-duration: 1.5s;
  --animation-direction: normal;
  --pseudo-element-display: block;
  background-color: var(--base-color);
  -webkit-user-select: none;
  user-select: none;
  border-radius: .25rem;
  width: 100%;
  line-height: 1;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.react-loading-skeleton:after {
  content: " ";
  display: var(--pseudo-element-display);
  background-repeat: no-repeat;
  background-image: var(--custom-highlight-background, linear-gradient(90deg,
      var(--base-color) 0%,
      var(--highlight-color) 50%,
      var(--base-color) 100%));
  height: 100%;
  animation-name: react-loading-skeleton;
  animation-direction: var(--animation-direction);
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateX(-100%);
}

@media (prefers-reduced-motion) {
  .react-loading-skeleton {
    --pseudo-element-display: none;
  }
}
/*# sourceMappingURL=gojjobet.b4066ec6.css.map */
