*,
html,
body {
  margin: 0;
  padding: 0;
  background-color: rgb(37, 36, 36);
}
main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  position: relative;
  width: 90%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  background: linear-gradient(160deg, #80deea, #01579b);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.shadow {
  z-index: 0;
  display: none;
  width: 350px;
  height: 450px;
  background-color: #002e43;
  border-radius: 100%;
  filter: blur(70px);
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  -webkit-filter: blur(70px);
}
.top-block {
  z-index: 1;
  position: absolute;
  top: 5%;
  width: 80px;
  height: 100px;
  background: radial-gradient(circle at 30% 30%, #a5c79f, #708d57 80%);
  box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.3),
    0 5px 15px rgba(0, 0, 0, 0.3);
  border-top: 1px solid black;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  animation: headMove 6s ease-in-out infinite;
  transform-origin: center bottom; /* biar goyang dari leher */
}

@keyframes headMove {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  25% {
    transform: rotate(-6deg) translateY(3px); /* miring kiri */
  }
  50% {
    transform: rotate(0deg) translateY(0);
  }
  75% {
    transform: rotate(6deg) translateY(3px); /* miring kanan */
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}

/* Mata kiri */
.top-block::before {
  content: "";
  position: absolute;
  top: 15%;
  left: 20%;
  width: 14px;
  height: 14px;
  background: #000;
  border-radius: 70% 70% 100% 100%;
  box-shadow: 0 0 0 3px #fff;
  /*outlineputih*/
  animation: blink 5s infinite;
  transform-origin: center center;
  -webkit-animation: blink 5s infinite;
}

/* Mata kanan */
.top-block::after {
  content: "";
  position: absolute;
  top: 15%;
  right: 20%;
  width: 14px;
  height: 14px;
  background: #000;
  border-radius: 70% 70% 100% 100%;
  box-shadow: 0 0 0 3px #fff;
  animation: blink 5s infinite;
  transform-origin: center center;
  -webkit-border-radius: 70% 70% 100% 100%;
  -moz-border-radius: 70% 70% 100% 100%;
  -ms-border-radius: 70% 70% 100% 100%;
  -o-border-radius: 70% 70% 100% 100%;
}

/* Animasi Kedip */
@keyframes blink {
  0%,
  90%,
  100% {
    transform: scaleY(1); /* mata normal */
  }
  95% {
    transform: scaleY(0.1); /* mata merem */
  }
}
.bottom-block {
  z-index: 1;
  position: absolute;
  bottom: 15%;
  width: 80px;
  height: 90px;
  background-color: #708d57;
  border-radius: 0 100% 0 100%;
  transform: rotate(40deg);
  -webkit-border-radius: 0 100% 0 100%;
  -moz-border-radius: 0 100% 0 100%;
  -ms-border-radius: 0 100% 0 100%;
  -o-border-radius: 0 100% 0 100%;
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
}
.mid-block {
  z-index: 2;
  position: absolute;
  width: 300px;
  height: 370px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;

  /* 🎨 Warna modern futuristic */
  background: conic-gradient(
    from 180deg at 50% 50%,
    #4caf50 0deg,
    #2e7d32 120deg,
    #1b5e20 240deg,
    #43a047 360deg
  );

  /* ✨ Efek depth futuristic */
  box-shadow: inset -12px -12px 24px rgba(0, 0, 0, 0.6),
    inset 12px 12px 24px rgba(255, 255, 255, 0.15),
    0 25px 50px rgba(0, 0, 0, 0.7), 0 0 10px rgba(76, 175, 80, 0.6); /* glow hijau */

  /* ⚡ Efek tilt modern */
  transform: rotate3d(1, 1, 0, 12deg);
  backdrop-filter: blur(4px) brightness(1.2);
}

.mid-block::before {
  content: "";
  position: absolute;
  width: 95%;
  height: 95%;
  border-radius: 100%;

  /* Layer dalam yang lebih glossy */
  background: radial-gradient(
    circle at 30% 30%,
    rgba(102, 187, 106, 0.9),
    rgba(27, 94, 32, 0.95) 80%
  );

  /* Glass shine + emboss */
  box-shadow: inset -10px -10px 25px rgba(0, 0, 0, 0.5),
    inset 10px 10px 25px rgba(255, 255, 255, 0.1),
    0 0 25px rgba(102, 187, 106, 0.4);

  animation: pulseGlow 6s ease-in-out infinite;
}

/* ✨ Animasi glow organik */
@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: inset -10px -10px 25px rgba(0, 0, 0, 0.5),
      inset 10px 10px 25px rgba(255, 255, 255, 0.1),
      0 0 15px rgba(102, 187, 106, 0.3);
  }
  50% {
    box-shadow: inset -10px -10px 25px rgba(0, 0, 0, 0.5),
      inset 10px 10px 25px rgba(255, 255, 255, 0.1),
      0 0 40px rgba(76, 175, 80, 0.7);
  }
}
.left1-block,
.left2-block {
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at 30% 30%, #a5c79f, #708d57 80%);
  box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.3),
    0 5px 15px rgba(0, 0, 0, 0.3);
  border-radius: 100% 0 100% 0;
  -webkit-border-radius: 100% 0 100% 0;
  -moz-border-radius: 100% 0 100% 0;
  -ms-border-radius: 100% 0 100% 0;
  -o-border-radius: 100% 0 100% 0;
  animation: swim1 6s ease-in-out infinite;
  -webkit-animation: swim1 6s ease-in-out infinite;
  transform: rotate3d(1, 0, 0, 15deg);
}

@keyframes swim1 {
  0% {
    transform: translateY(0) rotate(0deg);
    -webkit-transform: translateY(0) rotate(0deg);
    -moz-transform: translateY(0) rotate(0deg);
    -ms-transform: translateY(0) rotate(0deg);
    -o-transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(20px) rotate(-8deg);
    -webkit-transform: translateY(20px) rotate(-8deg);
    -moz-transform: translateY(20px) rotate(-8deg);
    -ms-transform: translateY(20px) rotate(-8deg);
    -o-transform: translateY(20px) rotate(-8deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-20px) rotate(-8deg);
    -webkit-transform: translateY(-20px) rotate(-8deg);
    -moz-transform: translateY(-20px) rotate(-8deg);
    -ms-transform: translateY(-20px) rotate(-8deg);
    -o-transform: translateY(-20px) rotate(-8deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
    -webkit-transform: translateY(0) rotate(0deg);
    -moz-transform: translateY(0) rotate(0deg);
    -ms-transform: translateY(0) rotate(0deg);
    -o-transform: translateY(0) rotate(0deg);
  }
}

.left1-block {
  top: 30%;
  left: 31%;
}
.left2-block {
  top: 63%;
  left: 37%;
}
.right1-block,
.right2-block {
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at 30% 30%, #a5c79f, #708d57 80%);
  border-radius: 50%;
  box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.3),
    0 5px 15px rgba(0, 0, 0, 0.3);
  border-radius: 0 100% 0 100%;
  -webkit-border-radius: 0 100% 0 100%;
  -moz-border-radius: 0 100% 0 100%;
  -ms-border-radius: 0 100% 0 100%;
  -o-border-radius: 0 100% 0 100%;
  animation: swim 6s ease-in-out infinite;
  transform: rotate3d(0, 1, 0, -15deg);
  -webkit-transform: rotate3d(0, 1, 0, -15deg);
  -moz-transform: rotate3d(0, 1, 0, -15deg);
  -ms-transform: rotate3d(0, 1, 0, -15deg);
  -o-transform: rotate3d(0, 1, 0, -15deg);
}
.right1-block {
  top: 30%;
  right: 31%;
}
.right2-block {
  top: 63%;
  right: 37%;
}

@keyframes swim {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-20px) rotate(-8deg); /* naik + miring kiri */
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-20px) rotate(8deg); /* naik + miring kanan */
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}