:root {
  --pack-height: 65vh;
  --pack-width: calc(var(--pack-height) / 1.5);
}

.pack-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.pack {
  position: relative;
  top: 50%;
  left: 50%;
  width: var(--pack-width);
  height: var(--pack-height);
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

.pack img {
  width: 100%;
}

a {
  position: absolute;
  width: 48px;
  color: #3985B8;
  text-align: center;
  opacity: 0;
}

.go-to-previous {
  top: 50%;
  left: calc(48% - var(--pack-width) / 2);
}

.go-to-next {
  top: 50%;
  right: calc(48% - var(--pack-width) / 2);
}

a:hover {
  color: white;
  transform: scale(1.2);
  transition: 0.25s ease-in-out;
}

.pulse {
  animation: pulse 2s ease-out 0.5s infinite alternate;
}
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.pack-arrival {
  animation: pack-arrival 2s ease-in forwards;
}
@keyframes pack-arrival {
  0% {
    opacity: 0;
    transform: translate(-50%, -250%);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -40%);
  }
  86% {
    opacity: 1;
    transform: translate(-50%, -55%);
  }
  92% {
    opacity: 1;
    transform: translate(-50%, -45%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.spin-on-axis {
  animation: spin-on-axis ease-in-out infinite;
  animation-duration: 1000ms;
}
@keyframes spin-on-axis {
  0% {
    transform: translate(-50%, -50%) rotateY(0);
  }
  50% {
    transform: translate(-50%, -50%) rotateY(180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateY(360deg);
  }
}

/* vibrate on hover */
.vibration {
  animation: vibration 0.3s linear infinite;
}
@keyframes vibration {
  0% {
    transform: rotate(0deg) translate(-50%, -50%);
    transform-origin: center;
  }
  20% {
    transform: rotate(-0.1deg) translate(-50%, -50%);
  }
  40% {
    transform: rotate(0.1deg) translate(-50%, -50%);
  }
  60% {
    transform: rotate(-0.1deg) translate(-50%, -50%);
  }
  80% {
    transform: rotate(0.1deg) translate(-50%, -50%);
  }
  100% {
    transform: rotate(0deg) translate(-50%, -50%);
  }
}

.shrink-to-circle {
  animation: shrink-to-circle 1s linear 0.5s forwards;
}
@keyframes shrink-to-circle {
  0% {
    transform: scale(1);
  }
  99% {
    opacity: 1;
  }
  100% {
    transform: scale(0.01);
    border-radius: 50%;
    opacity: 0;
  }
}

/* shock-wave & line */
.line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 0.01vh;
  background: rgba(216, 222, 236, 0.5);
  opacity: 0;
  box-shadow: 0 0 2px 3px rgba(216, 222, 236, 0.7);
}

.line-shrink {
  animation: line-shrink 1s ease-in;
}
@keyframes line-shrink {
  0% {
    opacity: 0.5;
    width: 100%;
  }
  80% {
    opacity: 1;
  }
  95% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    width: 0;
  }
}

.shock-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(216, 222, 236, 0.699);
  border-radius: 50%;
  box-shadow: 0 0 20px rgb(216, 222, 236), 0 0 40px rgb(216, 222, 236),
      0 0 60px rgb(216, 222, 236), 0 0 80px rgb(216, 222, 236),
      0 0 120px rgb(216, 222, 236), 0 0 220px rgb(216, 222, 236),
      0 0 320px rgb(216, 222, 236);
  transition: 2s;
}

.shock-wave-explosion {
  animation: shock-wave-explosion 2s ease-out 0.9s;
}
@keyframes shock-wave-explosion {
  0% {
    width: 0.01vh;
    height: 0.01vh;
    box-shadow: 0 0 20px rgb(216, 222, 236), 0 0 40px rgb(216, 222, 236), 0 0 60px rgb(216, 222, 236), 0 0 80px rgb(216, 222, 236), 0 0 120px rgb(216, 222, 236), 0 0 220px rgb(216, 222, 236), 0 0 320px rgb(216, 222, 236);
    transform: scale(0.1);
  }
  40% {
    opacity: 1;
    width: 2vh;
    height: 2vh;
  }
  100% {
    box-shadow: 0 0 20px rgb(216, 222, 236), 0 0 40px rgb(216, 222, 236), 0 0 60px rgb(216, 222, 236), 0 0 80px rgb(216, 222, 236), 0 0 120px rgb(216, 222, 236), 0 0 220px rgb(216, 222, 236), 0 0 320px rgb(216, 222, 236);
    transform: scale(14);
    opacity: 0;
  }
}