* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #000;
}

body {
  display: flex;
  justify-content: center;
}

.stage {
  position: relative;
  width: min(100vw, 1080px);
  aspect-ratio: 1080 / 2000;
  min-height: 2000px;
  overflow: hidden;
  background: #000;
}

.shimmer-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
  pointer-events: none;
}

.wave {
  position: absolute;
  left: -22%;
  width: 144%;
  height: 9%;
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0.25;
  animation: shimmerWave 11s ease-in-out infinite;
}

.wave::before {
  content: "";
  position: absolute;
  inset: 42% 0 auto;
  height: 18%;
  border-radius: 999px;
  background: currentColor;
  box-shadow:
    0 0 18px currentColor,
    0 0 44px currentColor,
    0 0 86px currentColor;
}

.wave-red {
  top: 26%;
  color: #d71920;
}

.wave-green {
  top: 39%;
  color: #0d8b40;
  animation-delay: -3.2s;
  animation-duration: 12.5s;
}

.wave-late {
  top: 60%;
  animation-delay: -6s;
  animation-duration: 14s;
  opacity: 0.18;
}

.wave-low {
  top: 76%;
  color: #0d8b40;
  animation-delay: -8s;
  animation-duration: 15s;
  opacity: 0.2;
}

.hero-video {
  position: absolute;
  left: 9.2%;
  top: 0.3%;
  z-index: 3;
  width: 80.1%;
  height: 24.2%;
  object-fit: cover;
  background: #000;
}

.layout {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hotspot {
  position: absolute;
  z-index: 4;
  display: block;
  text-decoration: none;
  outline-offset: 4px;
}

.paypal {
  left: 35.7%;
  top: 40.8%;
  width: 27.4%;
  height: 4.8%;
}

.tiktok {
  left: 10.6%;
  top: 54.05%;
  width: 24.5%;
  height: 4.55%;
}

.linktree {
  left: 37.7%;
  top: 54.05%;
  width: 24.5%;
  height: 4.55%;
}

.instagram {
  left: 64.7%;
  top: 54.05%;
  width: 24.6%;
  height: 4.55%;
}

.libr8news {
  left: 18.1%;
  top: 79.2%;
  width: 65.2%;
  height: 5.1%;
}

.home {
  left: 34.4%;
  top: 84.9%;
  width: 30.4%;
  height: 3.95%;
}

@keyframes shimmerWave {
  0% {
    transform: translateX(-8%) translateY(0) rotate(-8deg) scaleX(1);
    opacity: 0.1;
  }

  35% {
    opacity: 0.28;
  }

  50% {
    transform: translateX(5%) translateY(-18px) rotate(5deg) scaleX(1.06);
  }

  100% {
    transform: translateX(12%) translateY(0) rotate(-8deg) scaleX(1);
    opacity: 0.1;
  }
}

@media (max-width: 1080px) {
  .stage {
    min-height: 0;
  }
}