.evi-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;

  .evi-popup {
    pointer-events: none;
    position: relative;
    background-color: #ffbc11;
    border-radius: 16px;
    padding: 12px 28px;
    font-size: 16px;
    color: #250443;
    cursor: default;
    text-align: center;

    transform: scale(0);

    &.active {
      animation: float 4s ease-in-out infinite;
      transform: scale(1);

      &.popup-animate {
        animation:
          bubbleUp 0.6s linear,
          float 4s ease-in-out 0.8s infinite;
      }

      &:hover {
        animation: horizontalShaking 0.6s ease;
      }
    }

    &::after {
      content: '';
      position: absolute;
      top: 95%;
      left: 50%;
      margin-left: -10px;
      border-width: 10px;
      border-style: solid;
      border-color: #ffbc11 transparent transparent transparent;
    }
  }

  video,
  lottie-player {
    /*EVI animation fills only 1/4 of the canvas it's rendered on*/
    width: 512px;
    height: 512px;
    margin: -128px;
    pointer-events: none;
  }
}

video[src='/videos/blueberry.mp4'],
video[src='/videos/blueberry.webm'] {
  clip-path: circle(
    19%
  ); /* only chrome can handle inbuilt clip parameters (???) */
}

@keyframes float {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: translate(0, 0);
  }
  50% {
    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
    transform: translate(0px, -20px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: translate(0, 0);
  }
}

@keyframes horizontalShaking {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(5px, 0);
  }
  50% {
    transform: translate(-5px, 0);
  }
  75% {
    transform: translate(5px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes bubbleUp {
  0% {
    transform: translate(-20px, 100px) scale(0);
  }
  75% {
    transform: translate(0, -25px);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}