html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

img {
  display: block;
  position: absolute;
  max-width: none;
  max-height: none;
  pointer-events: none;
}

.bg {
  left: 0; top: 0; width: 100vw; height: 100vh; z-index: 1; object-fit: cover;
}
.gradient-top {
  left: 0; top: 0; width: 100vw; z-index: 2; object-fit: cover;
}
.gradient-bottom {
  left: 0; bottom: 0; width: 100vw; z-index: 2; object-fit: cover;
}

.man-back-left {
  left: 0vw; bottom: 0vw; width: 18vw; z-index: 3;
}
.girls-back-right {
  right: 0vw; bottom: 0vw; width: 16vw; z-index: 3;
}

.neon-kiri {
  left: -3vw; top: -40vh; width: 45vw; z-index: 4;
}
.neon-kanan {
  right: -3vw; top: -40vh; width: 45vw; z-index: 4;
}
.neon-tengah {
  left: 10vw; top: 25vh; width: 83vw; transform: translateX(-50%); z-index: 5;
}
.star {
  left: 15vw; top: 34vh; width: 12vw; z-index: 6;
}

.asap {
  left: 20vw; top: 0; width: 59vw; height: 66vh; z-index: 6; object-fit: cover;
}

.girls-mid-left {
  left: 31vw; top: 17vh; width: 16vw; z-index: 8;
}
.girls-mid-right {
  right: 31vw; top: 17vh; width: 16vw; z-index: 8;
}
.girls-lower-mid {
  left: 35vw; bottom: -11vh; width: 26vw; transform: translateX(-50%); z-index: 9;
}
.man-above {
  left: 41vw; top: 2vh; width: 18vw; transform: translateX(-50%); z-index: 7;
}

.man-lower-left {
  left: 11vw; bottom: -24vh; width: 36vw; z-index: 11;
}
.man-lower-right {
  right: 14vw; bottom: -21vh; width: 33vw; z-index: 11;
}

.wave-music-left {
  left: -3vw; bottom: -17vh; width: 36vw; z-index: 12;
}
.wave-music-right {
  right: -6vw; bottom: -17vh; width: 36vw; z-index: 12;
}

.logo-fanverse {
  left: 0vw; top: 0vw; width: 27vw; height: auto; z-index: 20;
}
.fanverse-id-tag {
  right: 2vw; top: 1vw; height: auto; width: 24vw; z-index: 21;
}
.teks-you-are-star-now {
  right: 3vw; top: 15vw; width: 16vw; z-index: 22;
}

.teks-coming-soon {
  left: 12vw; top: 60vh; width: 70vw; transform: translate(-50%, 0); z-index: 30;
}
.teks-email {
  left: 3vw; bottom: 6vh; width: 17vw; z-index: 30;
}

.custom-animate {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.7s cubic-bezier(.4,2,.3,1), transform 0.7s cubic-bezier(.4,2,.3,1);
}
.custom-animate.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 900px) {
  .logo-fanverse { width: 38vw; height: auto; }
  .fanverse-id-tag { width: 32vw; height: auto; }
  .teks-you-are-star-now { width: 22vw; top: 22vw; }
  .teks-coming-soon { width: 90vw; left: 50vw; top: 65vh; }
  .teks-email { width: 32vw; left: 4vw; bottom: 4vh; }
  .wave-music-left, .wave-music-right { width: 48vw; left: unset; right: unset; bottom: -10vh; }
  .wave-music-left { left: -10vw; }
  .wave-music-right { right: -10vw; }
  .asap { width: 80vw; left: 10vw; height: 50vh; top: 10vh; }
  .neon-kiri, .neon-kanan { width: 60vw; top: -30vh; }
  .neon-kiri { left: -10vw; }
  .neon-kanan { right: -10vw; }
  .neon-tengah { width: 95vw; left: 50vw; top: 30vh; }
  .star { width: 18vw; left: 10vw; top: 40vh; }
  .gradient-top, .gradient-bottom { height: 12vh; }
  .man-back-left { width: 28vw; }
  .girls-back-right { width: 26vw; }
  .girls-mid-left, .girls-mid-right { width: 22vw; top: 22vh; }
  .girls-mid-left { left: 10vw; }
  .girls-mid-right { right: 10vw; }
  .girls-lower-mid { width: 38vw; left: 50vw; bottom: -8vh; }
  .man-above { width: 28vw; left: 50vw; top: 6vh; }
  .man-lower-left { width: 48vw; left: 0vw; bottom: -18vh; }
  .man-lower-right { width: 44vw; right: 0vw; bottom: -18vh; }
}
@media (max-width: 600px) {
  .logo-fanverse { width: 60vw; height: auto; left: 2vw; top: 2vw; }
  .fanverse-id-tag { width: 50vw; height: auto; right: 2vw; top: 2vw; }
  .teks-you-are-star-now { width: 36vw; top: 32vw; right: 4vw; }
  .teks-coming-soon { width: 98vw; left: 50vw; top: 72vh; }
  .teks-email { width: 50vw; left: 6vw; bottom: 2vh; }
  .wave-music-left, .wave-music-right { width: 70vw; bottom: -8vh; }
  .wave-music-left { left: -18vw; }
  .wave-music-right { right: -18vw; }
  .asap { width: 98vw; left: 1vw; height: 30vh; top: 18vh; }
  .neon-kiri, .neon-kanan { width: 90vw; top: -18vh; }
  .neon-kiri { left: -18vw; }
  .neon-kanan { right: -18vw; }
  .neon-tengah { width: 120vw; left: 50vw; top: 38vh; }
  .star { width: 28vw; left: 2vw; top: 48vh; }
  .gradient-top, .gradient-bottom { height: 8vh; }
  .man-back-left { width: 40vw; }
  .girls-back-right { width: 38vw; }
  .girls-mid-left, .girls-mid-right { width: 32vw; top: 30vh; }
  .girls-mid-left { left: 2vw; }
  .girls-mid-right { right: 2vw; }
  .girls-lower-mid { width: 60vw; left: 50vw; bottom: -4vh; }
  .man-above { width: 38vw; left: 50vw; top: 10vh; }
  .man-lower-left { width: 70vw; left: -10vw; bottom: -10vh; }
  .man-lower-right { width: 66vw; right: -10vw; bottom: -10vh; }
}