.circle {
    display: inline-block;
    background: black;
    border-radius: 50%;
    height: 300px;
    width: 300px;
    margin: 0;
    background: radial-gradient(circle at 100px 100px, #5cabff, #000);
  }

.stage {
    width: 300px;
    height: 300px;
    display: inline-block;
    margin: 20px;
    perspective: 1200px;
    perspective-origin: 50% 50%;
  }
.ball .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
    transform: rotateX(90deg) translateZ(-150px);
    z-index: -1;
    
  } 

.ball2 {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
    position: relative;
    animation: bubble-anim 5s ease-out infinite;
    background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
  }
.ball2:before {
    content: "";
    position: absolute;
    top: 1%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
    filter: blur(5px);
    z-index: 2;
  }
  
.ball {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
    position: relative;
    background: radial-gradient(circle at 50% 120%, #323232, #0a0a0a 80%, #000000 100%);
  }
.ball:before {
    content: "";
    position: absolute;
    background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    bottom: 2.5%;
    left: 5%;
    opacity: 0.6;
    height: 100%;
    width: 90%;
    filter: blur(5px);
    z-index: 2;
  }
.ball:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 5%;
    left: 10%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
    transform: translateX(-80px) translateY(-90px) skewX(-20deg);
    filter: blur(10px);
  }

.ball .eight {
    width: 110px;
    height: 110px;
    margin: 30%;
    background: white;
    border-radius: 50%;
    transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
    position: absolute;
  }
.ball .eight:before {
    content: "8";
    display: block;
    position: absolute;
    text-align: center;
    height: 80px;
    width: 100px;
    left: 50px;
    margin-left: -40px;
    top: 44px;
    margin-top: -40px;
    color: black;
    font-family: Arial;
    font-size: 90px;
    line-height: 104px;
  }
  
.iris {
    width: 40%;
    height: 40%;
    margin: 30%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
    transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
    position: absolute;
    animation: move-eye-skew 5s ease-out infinite;
  }
.iris:before {
    content: "";
    display: block;
    position: absolute;
    width: 37.5%;
    height: 37.5%;
    border-radius: 50%;
    top: 31.25%;
    left: 31.25%;
    background: black;
  }
.iris:after {
    content: "";
    display: block;
    position: absolute;
    width: 31.25%;
    height: 31.25%;
    border-radius: 50%;
    top: 18.75%;
    left: 18.75%;
    background: rgba(255, 255, 255, 0.2);
  }  

  @keyframes move-eye-skew {
    0% {
      transform: none;
    }
    20% {
      transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
    }
    25%, 44% {
      transform: none;
    }
    50%, 60% {
      transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
    }
    66%, 100% {
      transform: none;
    }
  } 
  
  @keyframes bubble-anim {
    0% {
      transform: scale(1);
    }
    20% {
      transform: scaleY(0.95) scaleX(1.05);
    }
    48% {
      transform: scaleY(1.1) scaleX(0.9);
    }
    68% {
      transform: scaleY(0.98) scaleX(1.02);
    }
    80% {
      transform: scaleY(1.02) scaleX(0.98);
    }
    97%, 100% {
      transform: scale(1);
    }
  }