:root {
  --star-circle-y: -58px;
}

html,
body {
  margin: 0px;
  overflow: hidden;
  background: linear-gradient(#000000, #00081e);
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  perspective: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  opacity: 0;
  animation: scene-reveal 2s forwards;
}

@keyframes scene-reveal {
  to {
    opacity: 1;
  }
}
.container {
  position: relative;
  width: 100vw;
  height: 800px;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  z-index: -1;
}

.ring {
  opacity: 0;
  position: absolute;
  background: conic-gradient(rgba(130, 90, 255, 0), #00f5f5, rgba(130, 90, 255, 0), rgba(130, 90, 255, 0), #00f5f5, rgba(130, 90, 255, 0), rgba(130, 90, 255, 0), #00f5f5, rgba(130, 90, 255, 0), rgba(130, 90, 255, 0), #00f5f5, rgba(130, 90, 255, 0), rgba(130, 90, 255, 0));
  mask: radial-gradient(circle, transparent 0%, transparent 39.8%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 40.2%, transparent 42%);
  height: 400px;
  width: 400px;
}

.ring-1 {
  animation: grow 6s 2s linear infinite;
}

.ring-2 {
  animation: grow 6s 4s linear infinite;
}

.ring-3 {
  animation: grow 6s 6s linear infinite;
}

path {
  filter: drop-shadow(0 0 5px #00f5f5);
}

.ripples {
  position: absolute;
  opacity: 1;
}
.ripples path {
  opacity: 0;
}

.ripples-1 {
  transform: scale3d(1.5, 1, 1.5) rotateX(90deg) translateZ(-260px);
  animation: ripples-rotate 20s linear infinite;
}

.ripples-2 {
  transform: scale3d(1.5, 1, 1.5) rotateX(90deg) rotateZ(45deg) translateZ(-270px);
  animation: last-ripples-rotate 10s linear infinite;
}

@keyframes ripples-rotate {
  0% {
    transform: scale3d(1.5, 1, 1.5) rotateX(90deg) rotateZ(45deg) translateZ(-260px) rotateZ(0);
  }
  100% {
    transform: scale3d(1.5, 1, 1.5) rotateX(90deg) rotateZ(45deg) translateZ(-260px) rotateZ(360deg);
  }
}
@keyframes last-ripples-rotate {
  0% {
    transform: scale3d(1.5, 1, 1.5) rotateX(90deg) translateZ(-270px) rotateZ(0);
  }
  100% {
    transform: scale3d(1.5, 1, 1.5) rotateX(90deg) translateZ(-270px) rotateZ(360deg);
  }
}
.ripples path:nth-of-type(1) {
  animation: ripple-1 4.5s -1s linear infinite;
}

@keyframes ripple-1 {
  0% {
    transform: scale(0.25) rotateZ(0deg) translate3d(0, 0px, 0px);
    opacity: 0;
  }
  50% {
    opacity: 1.2177772266;
  }
  75% {
    opacity: 0.13;
  }
  100% {
    transform: scale(1.55) rotateZ(0deg) translate3d(0, 0px, 0px);
    opacity: 0;
  }
}
.ripples path:nth-of-type(2) {
  animation: ripple-2 4.5s 0s linear infinite;
}

@keyframes ripple-2 {
  0% {
    transform: scale(0.25) rotateZ(90deg) translate3d(0, 5px, 8px);
    opacity: 0;
  }
  50% {
    opacity: 0.7136595381;
  }
  75% {
    opacity: 0.13;
  }
  100% {
    transform: scale(1.55) rotateZ(90deg) translate3d(0, 5px, 8px);
    opacity: 0;
  }
}
.ripples path:nth-of-type(3) {
  animation: ripple-3 4.5s 1s linear infinite;
}

@keyframes ripple-3 {
  0% {
    transform: scale(0.25) rotateZ(180deg) translate3d(0, 8px, 4px);
    opacity: 0;
  }
  50% {
    opacity: 0.6101350021;
  }
  75% {
    opacity: 0.13;
  }
  100% {
    transform: scale(1.55) rotateZ(180deg) translate3d(0, 8px, 4px);
    opacity: 0;
  }
}
.ripples path:nth-of-type(4) {
  animation: ripple-4 4.5s 2s linear infinite;
}

@keyframes ripple-4 {
  0% {
    transform: scale(0.25) rotateZ(270deg) translate3d(0, 15px, 12px);
    opacity: 0;
  }
  50% {
    opacity: 0.5824501149;
  }
  75% {
    opacity: 0.13;
  }
  100% {
    transform: scale(1.55) rotateZ(270deg) translate3d(0, 15px, 12px);
    opacity: 0;
  }
}
.ripples path:nth-of-type(5) {
  animation: ripple-5 4.5s 3s linear infinite;
}

@keyframes ripple-5 {
  0% {
    transform: scale(0.25) rotateZ(360deg) translate3d(0, 16px, 12px);
    opacity: 0;
  }
  50% {
    opacity: 0.9768402271;
  }
  75% {
    opacity: 0.13;
  }
  100% {
    transform: scale(1.55) rotateZ(360deg) translate3d(0, 16px, 12px);
    opacity: 0;
  }
}
.ripples path:nth-of-type(6) {
  animation: ripple-6 4.5s 4s linear infinite;
}

@keyframes ripple-6 {
  0% {
    transform: scale(0.25) rotateZ(450deg) translate3d(0, 5px, 35px);
    opacity: 0;
  }
  50% {
    opacity: 0.9544657404;
  }
  75% {
    opacity: 0.13;
  }
  100% {
    transform: scale(1.55) rotateZ(450deg) translate3d(0, 5px, 35px);
    opacity: 0;
  }
}
.sun-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 70%;
  transform: translateY(40px);
  animation: sun-grow 1s forwards;
}

.sun {
  /* display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 40px;
  height: 40px;
  top: 70%; */
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(225, 250, 255);
  opacity: 1;
  box-shadow: 0px 0px 10px 6px rgb(225, 250, 255);
  filter: blur(1px);
  transform: scale3d(1, 0.75, 1) rotateZ(45deg);
  animation: blink 0.5s linear infinite alternate;
}

@keyframes blink {
  0% {
    transform: scale3d(0.9, 0.75, 1) rotateZ(45deg);
  }
  50% {
    transform: scale3d(1, 0.75, 1) rotateZ(45deg);
  }
  100% {
    transform: scale3d(0.9, 0.75, 1) rotateZ(45deg);
  }
}
@keyframes sun-grow {
  0% {
    transform: translateY(40px) scale(0);
  }
  100% {
    transform: translateY(40px) scale(1);
  }
}
.ray {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: radial-gradient(rgb(225, 250, 255) 10%, rgba(225, 250, 255, 0.1) 40%, rgba(225, 250, 255, 0) 50%);
  position: absolute;
  opacity: 1;
  height: 10px;
  width: 200px;
  transform: rotateZ(-45deg) translateY(-2px);
}
.ray::before {
  content: "";
  position: absolute;
  height: 5px;
  width: 250px;
  transform: translateY(3.5px);
  background-image: radial-gradient(rgb(225, 250, 255) 10%, rgba(225, 250, 255, 0.1) 40%, rgba(225, 250, 255, 0) 70%);
}
.ray::after {
  content: "";
  position: absolute;
  height: 240px;
  width: 5px;
  background-image: radial-gradient(rgb(225, 250, 255) 10%, rgba(225, 250, 255, 0.1) 40%, rgba(225, 250, 255, 0) 70%);
}

@keyframes grow {
  0% {
    transform: scale3d(0.5, 0.5, 0.5) rotateX(90deg) translateZ(-522px) rotateZ(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(1.5, 0.5, 1.5) rotateX(90deg) translateZ(-522px) rotateZ(360deg);
    opacity: 0;
  }
}
.ribbons {
  position: absolute;
  transform: translate3d(-40px, -45px, 0);
  opacity: 1;
}
.ribbons g {
  transform: rotate(180deg) scaleY(0.8) scaleX(-1) translate3d(50px, 5px, 0);
}
.ribbons path {
  transform: rotate(90deg);
}
.ribbons g:nth-of-type(1) {
  transform: rotate(180deg) scaleY(0.8) scaleX(-1) translate3d(600px, 5px, 0);
  animation: move1 5s linear infinite;
}
.ribbons g:nth-of-type(2) {
  transform: rotate(180deg) scaleY(0.8) scaleX(-1) translate3d(600px, 10px, 0);
  animation: move1 5s 1s linear infinite;
}
.ribbons g:nth-of-type(3) {
  transform: rotate(180deg) scaleY(0.8) translate3d(600px, -10px, 0);
  animation: move1 5s 2s linear infinite;
}
.ribbons g:nth-of-type(4) {
  transform: rotate(180deg) scaleY(0.8) translate3d(600px, -5px, 0);
  animation: move1 5s 3s linear infinite;
}
.ribbons g:nth-of-type(5) {
  transform: rotate(180deg) scaleY(0.8) scaleX(-1) translate3d(600px, 7px, 0);
  animation: move1 5s 4s linear infinite;
}
.ribbons g:nth-of-type(6) {
  transform: rotate(180deg) scaleY(0.8) translate3d(600px, 12px, 0);
  animation: move1 5s 2s linear infinite;
}

g,
path {
  transform-origin: center;
  transform-box: fill-box;
}

.ribbon-glow {
  position: absolute;
  transform-origin: bottom center;
  transform: translate3d(5px, 30px, 0);
  width: 30px;
  height: 471px;
  border-radius: 50%;
  background: linear-gradient(90deg, #00f5f5, transparent);
  opacity: 0.33;
  filter: blur(10px);
  /* animation: ribbon-glow-grow 5s linear forwards; */
}

@keyframes ribbon-glow-grow {
  0% {
    transform: translate3d(5px, 30px, 0) scaleY(0);
  }
  100% {
    transform: translate3d(5px, 30px, 0) scaleY(1);
  }
}
.ribbon-end {
  position: absolute;
  width: 100px;
  height: 160px;
  background: linear-gradient(black 40%, transparent);
  z-index: 2;
  top: 146px;
}

.center-glow {
  position: absolute;
  width: 382px;
  height: 382px;
  border-radius: 50%;
  background: radial-gradient(rgba(0, 245, 245, 0.43) 10%, rgba(0, 245, 245, 0.11) 51%, rgba(0, 245, 245, 0) 73%);
  opacity: 1;
  transform: translate3d(0, 266px, 0) rotateX(90deg);
  animation: center-glow-grow 6s linear forwards;
}

@keyframes center-glow-grow {
  0% {
    transform: translate3d(0, 266px, 0) rotateX(90deg) scale(0.3);
  }
  100% {
    transform: translate3d(0, 266px, 0) rotateX(90deg) scale(1);
  }
}
.bubble {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle 6px at 3px 3px, white 20%, transparent 20.02%), radial-gradient(circle 12px at 5px 2px, transparent 20%, #00f5f5 60.2%), radial-gradient(transparent 60%, #00f5f5 60.05%);
  opacity: 0;
}

.bubble-1 {
  animation: bubble-move-1 5s 3.0465202618s linear infinite;
}

@keyframes bubble-move-1 {
  0% {
    transform: scale3d(0.2026880896, 0.2026880896, 1) translate3d(56.25px, 400px, -262.5px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.2026880896, 0.2026880896, 1) translate3d(56.25px, -90px, -262.5px);
    opacity: 0;
  }
}
.bubble-2 {
  animation: bubble-move-2 5s 1.2149214663s linear infinite;
}

@keyframes bubble-move-2 {
  0% {
    transform: scale3d(0.7136980873, 0.7136980873, 1) translate3d(187.5px, 400px, -318.75px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.7136980873, 0.7136980873, 1) translate3d(187.5px, -90px, -318.75px);
    opacity: 0;
  }
}
.bubble-3 {
  animation: bubble-move-3 5s 3.9901712922s linear infinite;
}

@keyframes bubble-move-3 {
  0% {
    transform: scale3d(0.5785277385, 0.5785277385, 1) translate3d(-150px, 400px, -56.25px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.5785277385, 0.5785277385, 1) translate3d(-150px, -90px, -56.25px);
    opacity: 0;
  }
}
.bubble-4 {
  animation: bubble-move-4 5s 4.2176293455s linear infinite;
}

@keyframes bubble-move-4 {
  0% {
    transform: scale3d(0.9004519807, 0.9004519807, 1) translate3d(168.75px, 400px, -150px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.9004519807, 0.9004519807, 1) translate3d(168.75px, -90px, -150px);
    opacity: 0;
  }
}
.bubble-5 {
  animation: bubble-move-5 5s 1.3429894831s linear infinite;
}

@keyframes bubble-move-5 {
  0% {
    transform: scale3d(0.6963815345, 0.6963815345, 1) translate3d(-112.5px, 400px, -356.25px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.6963815345, 0.6963815345, 1) translate3d(-112.5px, -90px, -356.25px);
    opacity: 0;
  }
}
.bubble-6 {
  animation: bubble-move-6 5s 1.800894886s linear infinite;
}

@keyframes bubble-move-6 {
  0% {
    transform: scale3d(0.350365906, 0.350365906, 1) translate3d(112.5px, 400px, -168.75px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.350365906, 0.350365906, 1) translate3d(112.5px, -90px, -168.75px);
    opacity: 0;
  }
}
.bubble-7 {
  animation: bubble-move-7 5s 4.0238204159s linear infinite;
}

@keyframes bubble-move-7 {
  0% {
    transform: scale3d(0.8201463641, 0.8201463641, 1) translate3d(-93.75px, 400px, -75px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.8201463641, 0.8201463641, 1) translate3d(-93.75px, -90px, -75px);
    opacity: 0;
  }
}
.bubble-8 {
  animation: bubble-move-8 5s 0.4087457562s linear infinite;
}

@keyframes bubble-move-8 {
  0% {
    transform: scale3d(0.123448613, 0.123448613, 1) translate3d(150px, 400px, -318.75px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.123448613, 0.123448613, 1) translate3d(150px, -90px, -318.75px);
    opacity: 0;
  }
}
.bubble-9 {
  animation: bubble-move-9 5s 2.6020028088s linear infinite;
}

@keyframes bubble-move-9 {
  0% {
    transform: scale3d(0.9295708659, 0.9295708659, 1) translate3d(-37.5px, 400px, -75px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.9295708659, 0.9295708659, 1) translate3d(-37.5px, -90px, -75px);
    opacity: 0;
  }
}
.bubble-10 {
  animation: bubble-move-10 5s 1.7313562889s linear infinite;
}

@keyframes bubble-move-10 {
  0% {
    transform: scale3d(0.317590194, 0.317590194, 1) translate3d(168.75px, 400px, -75px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.317590194, 0.317590194, 1) translate3d(168.75px, -90px, -75px);
    opacity: 0;
  }
}
.bubble-11 {
  animation: bubble-move-11 5s 2.5415002264s linear infinite;
}

@keyframes bubble-move-11 {
  0% {
    transform: scale3d(0.854870476, 0.854870476, 1) translate3d(0px, 400px, -168.75px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.854870476, 0.854870476, 1) translate3d(0px, -90px, -168.75px);
    opacity: 0;
  }
}
.bubble-12 {
  animation: bubble-move-12 5s 3.594495056s linear infinite;
}

@keyframes bubble-move-12 {
  0% {
    transform: scale3d(0.8946499201, 0.8946499201, 1) translate3d(-75px, 400px, -75px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.8946499201, 0.8946499201, 1) translate3d(-75px, -90px, -75px);
    opacity: 0;
  }
}
.bubble-13 {
  animation: bubble-move-13 5s 0.464310543s linear infinite;
}

@keyframes bubble-move-13 {
  0% {
    transform: scale3d(0.0546097326, 0.0546097326, 1) translate3d(-93.75px, 400px, -262.5px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.0546097326, 0.0546097326, 1) translate3d(-93.75px, -90px, -262.5px);
    opacity: 0;
  }
}
.bubble-14 {
  animation: bubble-move-14 5s 0.377194189s linear infinite;
}

@keyframes bubble-move-14 {
  0% {
    transform: scale3d(0.5757971144, 0.5757971144, 1) translate3d(56.25px, 400px, -356.25px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.5757971144, 0.5757971144, 1) translate3d(56.25px, -90px, -356.25px);
    opacity: 0;
  }
}
.bubble-15 {
  animation: bubble-move-15 5s 3.7908535747s linear infinite;
}

@keyframes bubble-move-15 {
  0% {
    transform: scale3d(0.7746295235, 0.7746295235, 1) translate3d(0px, 400px, 0px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.7746295235, 0.7746295235, 1) translate3d(0px, -90px, 0px);
    opacity: 0;
  }
}
.bubble-16 {
  animation: bubble-move-16 5s 2.8762939746s linear infinite;
}

@keyframes bubble-move-16 {
  0% {
    transform: scale3d(0.8507561216, 0.8507561216, 1) translate3d(93.75px, 400px, -337.5px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.8507561216, 0.8507561216, 1) translate3d(93.75px, -90px, -337.5px);
    opacity: 0;
  }
}
.bubble-17 {
  animation: bubble-move-17 5s 4.7427281609s linear infinite;
}

@keyframes bubble-move-17 {
  0% {
    transform: scale3d(0.6121479018, 0.6121479018, 1) translate3d(75px, 400px, -131.25px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.6121479018, 0.6121479018, 1) translate3d(75px, -90px, -131.25px);
    opacity: 0;
  }
}
.bubble-18 {
  animation: bubble-move-18 5s 1.6429493391s linear infinite;
}

@keyframes bubble-move-18 {
  0% {
    transform: scale3d(0.9963492897, 0.9963492897, 1) translate3d(18.75px, 400px, -356.25px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.9963492897, 0.9963492897, 1) translate3d(18.75px, -90px, -356.25px);
    opacity: 0;
  }
}
.bubble-19 {
  animation: bubble-move-19 5s 3.8320988073s linear infinite;
}

@keyframes bubble-move-19 {
  0% {
    transform: scale3d(0.862804873, 0.862804873, 1) translate3d(131.25px, 400px, -93.75px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.862804873, 0.862804873, 1) translate3d(131.25px, -90px, -93.75px);
    opacity: 0;
  }
}
.bubble-20 {
  animation: bubble-move-20 5s 3.3565896671s linear infinite;
}

@keyframes bubble-move-20 {
  0% {
    transform: scale3d(0.3732174831, 0.3732174831, 1) translate3d(37.5px, 400px, -75px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale3d(0.3732174831, 0.3732174831, 1) translate3d(37.5px, -90px, -75px);
    opacity: 0;
  }
}
.leaf {
  position: absolute;
  width: 40px;
  height: 40px;
  opacity: 0;
  background: rgba(0, 245, 245, 0.55);
  transform: translate3d(0, 250px, 0) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
  clip-path: path("M 10.72 1 C 6.514 9.966 1.147 9.248 3.436 22.183 C 4.151 26.224 8.482 31.996 10.271 33.911 C 12.613 36.417 13.691 35.551 17.507 20.667 C 20.626 8.503 14.523 8.579 10.72 1 Z");
}

.leaf-1 {
  border-radius: 59% 2% 41% 10%;
  transform: translate3d(-128.3333333333px, 250px, -186.6666666667px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
  background-position-y: 0px;
  animation: leaf-flow-1 8s 4.687559625s linear infinite;
}

@keyframes leaf-flow-1 {
  0% {
    transform: translate3d(-128.3333333333px, 250px, -186.6666666667px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
    opacity: 0;
  }
  58% {
    opacity: 0.3833333333;
    background: rgba(0, 245, 245, 0.55);
  }
  60% {
    opacity: 0.3833333333;
    background: rgb(0, 255, 255);
  }
  62% {
    opacity: 0.3833333333;
    background: rgba(0, 245, 245, 0.55);
  }
  100% {
    transform: translate3d(-128.3333333333px, -250px, -186.6666666667px) scale(0.5) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    opacity: 0;
  }
}
.leaf-2 {
  border-radius: 81% 2% 60% 330%;
  transform: translate3d(-110px, 250px, -160px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
  background-position-y: 0px;
  animation: leaf-flow-2 8s 4.9665846454s linear infinite;
}

@keyframes leaf-flow-2 {
  0% {
    transform: translate3d(-110px, 250px, -160px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
    opacity: 0;
  }
  58% {
    opacity: 0.4666666667;
    background: rgba(0, 245, 245, 0.55);
  }
  60% {
    opacity: 0.4666666667;
    background: rgb(0, 255, 255);
  }
  62% {
    opacity: 0.4666666667;
    background: rgba(0, 245, 245, 0.55);
  }
  100% {
    transform: translate3d(-110px, -250px, -160px) scale(0.5) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    opacity: 0;
  }
}
.leaf-3 {
  border-radius: 71% 2% 49% 920%;
  transform: translate3d(-91.6666666667px, 250px, -133.3333333333px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
  background-position-y: 0px;
  animation: leaf-flow-3 8s 0.7206740496s linear infinite;
}

@keyframes leaf-flow-3 {
  0% {
    transform: translate3d(-91.6666666667px, 250px, -133.3333333333px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
    opacity: 0;
  }
  58% {
    opacity: 0.55;
    background: rgba(0, 245, 245, 0.55);
  }
  60% {
    opacity: 0.55;
    background: rgb(0, 255, 255);
  }
  62% {
    opacity: 0.55;
    background: rgba(0, 245, 245, 0.55);
  }
  100% {
    transform: translate3d(-91.6666666667px, -250px, -133.3333333333px) scale(0.5) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    opacity: 0;
  }
}
.leaf-4 {
  border-radius: 87% 2% 93% 440%;
  transform: translate3d(-73.3333333333px, 250px, -106.6666666667px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
  background-position-y: 0px;
  animation: leaf-flow-4 8s 0.6445239083s linear infinite;
}

@keyframes leaf-flow-4 {
  0% {
    transform: translate3d(-73.3333333333px, 250px, -106.6666666667px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
    opacity: 0;
  }
  58% {
    opacity: 0.4666666667;
    background: rgba(0, 245, 245, 0.55);
  }
  60% {
    opacity: 0.4666666667;
    background: rgb(0, 255, 255);
  }
  62% {
    opacity: 0.4666666667;
    background: rgba(0, 245, 245, 0.55);
  }
  100% {
    transform: translate3d(-73.3333333333px, -250px, -106.6666666667px) scale(0.5) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    opacity: 0;
  }
}
.leaf-5 {
  border-radius: 37% 2% 62% 500%;
  transform: translate3d(-55px, 250px, -80px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
  background-position-y: 0px;
  animation: leaf-flow-5 8s 3.3458644731s linear infinite;
}

@keyframes leaf-flow-5 {
  0% {
    transform: translate3d(-55px, 250px, -80px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
    opacity: 0;
  }
  58% {
    opacity: 0.3;
    background: rgba(0, 245, 245, 0.55);
  }
  60% {
    opacity: 0.3;
    background: rgb(0, 255, 255);
  }
  62% {
    opacity: 0.3;
    background: rgba(0, 245, 245, 0.55);
  }
  100% {
    transform: translate3d(-55px, -250px, -80px) scale(0.5) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    opacity: 0;
  }
}
.leaf-6 {
  border-radius: 76% 2% 83% 200%;
  transform: translate3d(-36.6666666667px, 250px, -53.3333333333px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
  background-position-y: 0px;
  animation: leaf-flow-6 8s 0.1791747576s linear infinite;
}

@keyframes leaf-flow-6 {
  0% {
    transform: translate3d(-36.6666666667px, 250px, -53.3333333333px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
    opacity: 0;
  }
  58% {
    opacity: 0.4666666667;
    background: rgba(0, 245, 245, 0.55);
  }
  60% {
    opacity: 0.4666666667;
    background: rgb(0, 255, 255);
  }
  62% {
    opacity: 0.4666666667;
    background: rgba(0, 245, 245, 0.55);
  }
  100% {
    transform: translate3d(-36.6666666667px, -250px, -53.3333333333px) scale(0.5) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    opacity: 0;
  }
}
.leaf-7 {
  border-radius: 42% 2% 83% 420%;
  transform: translate3d(-18.3333333333px, 250px, -26.6666666667px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
  background-position-y: 0px;
  animation: leaf-flow-7 8s 6.0965211287s linear infinite;
}

@keyframes leaf-flow-7 {
  0% {
    transform: translate3d(-18.3333333333px, 250px, -26.6666666667px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
    opacity: 0;
  }
  58% {
    opacity: 0.7166666667;
    background: rgba(0, 245, 245, 0.55);
  }
  60% {
    opacity: 0.7166666667;
    background: rgb(0, 255, 255);
  }
  62% {
    opacity: 0.7166666667;
    background: rgba(0, 245, 245, 0.55);
  }
  100% {
    transform: translate3d(-18.3333333333px, -250px, -26.6666666667px) scale(0.5) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    opacity: 0;
  }
}
.leaf-8 {
  border-radius: 81% 2% 35% 810%;
  transform: translate3d(0px, 250px, 0px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
  background-position-y: 0px;
  animation: leaf-flow-8 8s 4.7527480568s linear infinite;
}

@keyframes leaf-flow-8 {
  0% {
    transform: translate3d(0px, 250px, 0px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
    opacity: 0;
  }
  58% {
    opacity: 0.3833333333;
    background: rgba(0, 245, 245, 0.55);
  }
  60% {
    opacity: 0.3833333333;
    background: rgb(0, 255, 255);
  }
  62% {
    opacity: 0.3833333333;
    background: rgba(0, 245, 245, 0.55);
  }
  100% {
    transform: translate3d(0px, -250px, 0px) scale(0.5) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    opacity: 0;
  }
}
.leaf-9 {
  border-radius: 45% 2% 25% 630%;
  transform: translate3d(18.3333333333px, 250px, 26.6666666667px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
  background-position-y: 0px;
  animation: leaf-flow-9 8s 2.3127877551s linear infinite;
}

@keyframes leaf-flow-9 {
  0% {
    transform: translate3d(18.3333333333px, 250px, 26.6666666667px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
    opacity: 0;
  }
  58% {
    opacity: 0.4666666667;
    background: rgba(0, 245, 245, 0.55);
  }
  60% {
    opacity: 0.4666666667;
    background: rgb(0, 255, 255);
  }
  62% {
    opacity: 0.4666666667;
    background: rgba(0, 245, 245, 0.55);
  }
  100% {
    transform: translate3d(18.3333333333px, -250px, 26.6666666667px) scale(0.5) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    opacity: 0;
  }
}
.leaf-10 {
  border-radius: 89% 2% 51% 480%;
  transform: translate3d(36.6666666667px, 250px, 53.3333333333px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
  background-position-y: 0px;
  animation: leaf-flow-10 8s 4.0117515997s linear infinite;
}

@keyframes leaf-flow-10 {
  0% {
    transform: translate3d(36.6666666667px, 250px, 53.3333333333px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
    opacity: 0;
  }
  58% {
    opacity: 0.6333333333;
    background: rgba(0, 245, 245, 0.55);
  }
  60% {
    opacity: 0.6333333333;
    background: rgb(0, 255, 255);
  }
  62% {
    opacity: 0.6333333333;
    background: rgba(0, 245, 245, 0.55);
  }
  100% {
    transform: translate3d(36.6666666667px, -250px, 53.3333333333px) scale(0.5) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    opacity: 0;
  }
}
.leaf-11 {
  border-radius: 22% 2% 65% 330%;
  transform: translate3d(55px, 250px, 80px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
  background-position-y: 0px;
  animation: leaf-flow-11 8s 6.0632585514s linear infinite;
}

@keyframes leaf-flow-11 {
  0% {
    transform: translate3d(55px, 250px, 80px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
    opacity: 0;
  }
  58% {
    opacity: 0.3833333333;
    background: rgba(0, 245, 245, 0.55);
  }
  60% {
    opacity: 0.3833333333;
    background: rgb(0, 255, 255);
  }
  62% {
    opacity: 0.3833333333;
    background: rgba(0, 245, 245, 0.55);
  }
  100% {
    transform: translate3d(55px, -250px, 80px) scale(0.5) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    opacity: 0;
  }
}
.leaf-12 {
  border-radius: 100% 2% 31% 560%;
  transform: translate3d(73.3333333333px, 250px, 106.6666666667px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
  background-position-y: 0px;
  animation: leaf-flow-12 8s 1.2513878505s linear infinite;
}

@keyframes leaf-flow-12 {
  0% {
    transform: translate3d(73.3333333333px, 250px, 106.6666666667px) scale(0.5) rotateX(0) rotateY(0) rotateZ(0);
    opacity: 0;
  }
  58% {
    opacity: 0.55;
    background: rgba(0, 245, 245, 0.55);
  }
  60% {
    opacity: 0.55;
    background: rgb(0, 255, 255);
  }
  62% {
    opacity: 0.55;
    background: rgba(0, 245, 245, 0.55);
  }
  100% {
    transform: translate3d(73.3333333333px, -250px, 106.6666666667px) scale(0.5) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    opacity: 0;
  }
}
@keyframes move1 {
  0% {
    transform: scaleY(0.8) scaleX(1) translateY(900px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scaleY(0.8) scaleX(0.5) translateY(30px);
    opacity: 0;
  }
}
.oracle {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 2px solid #00f5f5;
  box-shadow: 0 0 25px 3px #00f5f5;
  border-radius: 50%;
  /* top: 130px; */
  transform: translateY(-58px);
  z-index: 3;
}

.oracle-ring {
  position: absolute;
  width: 200px;
  height: 200px;
  transform-origin: center;
  border: 2px solid #00f5f5;
  border-radius: 50%;
  box-shadow: 0 0 10px 5px #00f5f5;
}

.oracle-ring-1 {
  transform: scale3d(1.15, 1.15, 1);
  background: conic-gradient(from 0deg, rgba(0, 245, 245, 0) 30%, rgba(0, 245, 245, 0) 40%, #00f5f5 50%, rgba(0, 245, 245, 0), rgba(0, 245, 245, 0), #00f5f5 75%, rgba(0, 245, 245, 0));
  mask: radial-gradient(circle, transparent 0 49%, #000 49.5% 50%, transparent 50.5%);
  animation: oracle-spin-1 4s linear infinite;
}

@keyframes oracle-spin-1 {
  0% {
    transform: scale3d(1.15, 1.15, 1) rotateZ(60deg);
  }
  100% {
    transform: scale3d(1.15, 1.15, 1) rotateZ(420deg);
  }
}
.oracle-ring-2 {
  transform: scale3d(1.20667, 1.20667, 1);
  background: conic-gradient(from 0deg, rgba(0, 245, 245, 0) 30%, rgba(0, 245, 245, 0) 40%, #00f5f5 50%, rgba(0, 245, 245, 0), rgba(0, 245, 245, 0), #00f5f5 75%, rgba(0, 245, 245, 0));
  mask: radial-gradient(circle, transparent 0 49%, #000 49.5% 50%, transparent 50.5%);
  animation: oracle-spin-2 8s linear infinite;
}

@keyframes oracle-spin-2 {
  0% {
    transform: scale3d(1.20667, 1.20667, 1) rotateZ(120deg);
  }
  100% {
    transform: scale3d(1.20667, 1.20667, 1) rotateZ(480deg);
  }
}
.oracle-ring-3 {
  transform: scale3d(1.26334, 1.26334, 1);
  background: conic-gradient(from 0deg, rgba(0, 245, 245, 0) 30%, rgba(0, 245, 245, 0) 40%, #00f5f5 50%, rgba(0, 245, 245, 0), rgba(0, 245, 245, 0), #00f5f5 75%, rgba(0, 245, 245, 0));
  mask: radial-gradient(circle, transparent 0 49%, #000 49.5% 50%, transparent 50.5%);
  animation: oracle-spin-3 12s linear infinite;
}

@keyframes oracle-spin-3 {
  0% {
    transform: scale3d(1.26334, 1.26334, 1) rotateZ(180deg);
  }
  100% {
    transform: scale3d(1.26334, 1.26334, 1) rotateZ(540deg);
  }
}
.oracle-ring-4 {
  transform: scale3d(1.32001, 1.32001, 1);
  background: conic-gradient(from 0deg, rgba(0, 245, 245, 0) 30%, rgba(0, 245, 245, 0) 40%, #00f5f5 50%, rgba(0, 245, 245, 0), rgba(0, 245, 245, 0), #00f5f5 75%, rgba(0, 245, 245, 0));
  mask: radial-gradient(circle, transparent 0 49%, #000 49.5% 50%, transparent 50.5%);
  animation: oracle-spin-4 16s linear infinite;
}

@keyframes oracle-spin-4 {
  0% {
    transform: scale3d(1.32001, 1.32001, 1) rotateZ(240deg);
  }
  100% {
    transform: scale3d(1.32001, 1.32001, 1) rotateZ(600deg);
  }
}
.eye-wrapper {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(134deg, rgba(255, 255, 255, 0.24) 50%, transparent 55%), radial-gradient(rgb(0, 182, 112) 10%, rgb(91, 238, 182) 50%, rgb(0, 182, 112) 70%);
  border-radius: 100% 1% 90% 1%;
  transform: rotate(45deg);
  overflow: hidden;
  box-shadow: inset 0 0 10px 5px #011503, 0 0 18px 2px black, 0 0 14px 2px green;
  animation: eye-close 10s linear infinite;
}

.eye {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: radial-gradient(transparent 40%, rgb(0, 0, 0) 60%, transparent 74%);
  transform: rotateZ(45deg) translate3d(0px, 0px, 0px);
  border-radius: 50%;
  animation: eye-move 5s infinite;
}

.eye-reflect {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle 27px at 19px 34px, rgba(255, 255, 255, 0.65) 10%, transparent 20%), radial-gradient(circle 16px at 32px 26px, rgba(255, 255, 255, 0.75) 10%, transparent 20%);
}

.iris {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 45%;
  height: 45%;
  border-radius: 50%;
  background-image: conic-gradient(rgb(91, 238, 182) 0%, transparent 1%, rgb(91, 238, 182) 5%, transparent 6%, rgb(91, 238, 182) 10%, transparent 11%, rgb(91, 238, 182) 15%, transparent 16%, rgb(91, 238, 182) 20%, transparent 21%, rgb(91, 238, 182) 25%, transparent 26%, rgb(91, 238, 182) 30%, transparent 31%, rgb(91, 238, 182) 35%, transparent 36%, rgb(91, 238, 182) 40%, transparent 41%, rgb(91, 238, 182) 45%, transparent 46%, rgb(91, 238, 182) 50%, transparent 51%, rgb(91, 238, 182) 55%, transparent 56%, rgb(91, 238, 182) 60%, transparent 61%, rgb(91, 238, 182) 65%, transparent 66%, rgb(91, 238, 182) 70%, transparent 71%, rgb(91, 238, 182) 75%, transparent 76%, rgb(91, 238, 182) 80%, transparent 81%, rgb(91, 238, 182) 85%, transparent 86%, rgb(91, 238, 182) 90%, transparent 91%, rgb(91, 238, 182) 95%, transparent 96%), radial-gradient(circle 21px at 20px 36px, rgba(255, 255, 255, 0.85) 13%, transparent 32%), radial-gradient(rgba(0, 182, 112, 0.8), rgb(0, 182, 112));
  box-shadow: 0 0 6px 1px rgb(91, 238, 182);
  transform: rotateZ(-45deg);
}

.pupil {
  position: absolute;
  width: 23px;
  height: 5px;
  background: black;
  border-radius: 50%;
  transform: rotate(44deg);
}

@keyframes eye-move {
  0% {
    transform: rotateZ(45deg) translate3d(0px, 0px, 0px);
  }
  10% {
    transform: rotateZ(45deg) translate3d(10px, 10px, 0px);
  }
  30% {
    transform: rotateZ(45deg) translate3d(10px, -10px, 0px);
  }
  50% {
    transform: rotateZ(45deg) translate3d(0px, 0px, 0px);
  }
  70% {
    transform: rotateZ(45deg) translate3d(-10px, 10px, 0px);
  }
  90% {
    transform: rotateZ(45deg) translate3d(-10px, -10px, 0);
  }
  100% {
    transform: rotateZ(45deg) translate3d(0px, 0px, 0px);
  }
}
@keyframes eye-close {
  0% {
    height: 60px;
    border-radius: 100% 1% 90% 1%;
    transform: rotate(45deg);
  }
  50% {
    height: 60px;
    border-radius: 100% 1% 90% 1%;
    transform: rotate(45deg);
  }
  50.3% {
    height: 0px;
    border-radius: none;
    transform: rotate(0deg);
  }
  50.6% {
    height: 60px;
    border-radius: 100% 1% 90% 1%;
    transform: rotate(45deg);
  }
  100% {
    height: 60px;
    border-radius: 100% 1% 90% 1%;
    transform: rotate(45deg);
  }
}
.oracle-ray {
  position: absolute;
  width: 43px;
  height: 1px;
  /* top: 232px; */
  background: linear-gradient(90deg, #00f5f5, transparent);
  border-radius: 100%;
  box-shadow: 0 0 6px 3px rgba(0, 245, 245, 0.15);
}

.oracle-ray-1 {
  transform-origin: left center;
  transform: translate3d(70.7106781187px, 70.7106781187px, 0px) rotateZ(45deg) scaleX(1);
  animation: oracle-ray-grow-1 4s 1.5171596045s infinite;
}

@keyframes oracle-ray-grow-1 {
  0% {
    transform: translate3d(70.7106781187px, 70.7106781187px, 0px) rotateZ(45deg) scaleX(1);
  }
  50% {
    transform: translate3d(70.7106781187px, 70.7106781187px, 0px) rotateZ(45deg) scaleX(2);
  }
  100% {
    transform: translate3d(70.7106781187px, 70.7106781187px, 0px) rotateZ(45deg) scaleX(1);
  }
}
.oracle-ray-2 {
  transform-origin: left center;
  transform: translate3d(0px, 100px, 0px) rotateZ(90deg) scaleX(1);
  animation: oracle-ray-grow-2 4s 1.7245262826s infinite;
}

@keyframes oracle-ray-grow-2 {
  0% {
    transform: translate3d(0px, 100px, 0px) rotateZ(90deg) scaleX(1);
  }
  50% {
    transform: translate3d(0px, 100px, 0px) rotateZ(90deg) scaleX(2);
  }
  100% {
    transform: translate3d(0px, 100px, 0px) rotateZ(90deg) scaleX(1);
  }
}
.oracle-ray-3 {
  transform-origin: left center;
  transform: translate3d(-70.7106781187px, 70.7106781187px, 0px) rotateZ(135deg) scaleX(1);
  animation: oracle-ray-grow-3 4s 1.6130103377s infinite;
}

@keyframes oracle-ray-grow-3 {
  0% {
    transform: translate3d(-70.7106781187px, 70.7106781187px, 0px) rotateZ(135deg) scaleX(1);
  }
  50% {
    transform: translate3d(-70.7106781187px, 70.7106781187px, 0px) rotateZ(135deg) scaleX(2);
  }
  100% {
    transform: translate3d(-70.7106781187px, 70.7106781187px, 0px) rotateZ(135deg) scaleX(1);
  }
}
.oracle-ray-4 {
  transform-origin: left center;
  transform: translate3d(-100px, 0px, 0px) rotateZ(180deg) scaleX(1);
  animation: oracle-ray-grow-4 4s 1.5653100317s infinite;
}

@keyframes oracle-ray-grow-4 {
  0% {
    transform: translate3d(-100px, 0px, 0px) rotateZ(180deg) scaleX(1);
  }
  50% {
    transform: translate3d(-100px, 0px, 0px) rotateZ(180deg) scaleX(2);
  }
  100% {
    transform: translate3d(-100px, 0px, 0px) rotateZ(180deg) scaleX(1);
  }
}
.oracle-ray-5 {
  transform-origin: left center;
  transform: translate3d(-70.7106781187px, -70.7106781187px, 0px) rotateZ(225deg) scaleX(1);
  animation: oracle-ray-grow-5 4s 2.583617837s infinite;
}

@keyframes oracle-ray-grow-5 {
  0% {
    transform: translate3d(-70.7106781187px, -70.7106781187px, 0px) rotateZ(225deg) scaleX(1);
  }
  50% {
    transform: translate3d(-70.7106781187px, -70.7106781187px, 0px) rotateZ(225deg) scaleX(2);
  }
  100% {
    transform: translate3d(-70.7106781187px, -70.7106781187px, 0px) rotateZ(225deg) scaleX(1);
  }
}
.oracle-ray-6 {
  transform-origin: left center;
  transform: translate3d(0px, -100px, 0px) rotateZ(270deg) scaleX(1);
  animation: oracle-ray-grow-6 4s 2.9836541866s infinite;
}

@keyframes oracle-ray-grow-6 {
  0% {
    transform: translate3d(0px, -100px, 0px) rotateZ(270deg) scaleX(1);
  }
  50% {
    transform: translate3d(0px, -100px, 0px) rotateZ(270deg) scaleX(2);
  }
  100% {
    transform: translate3d(0px, -100px, 0px) rotateZ(270deg) scaleX(1);
  }
}
.oracle-ray-7 {
  transform-origin: left center;
  transform: translate3d(70.7106781187px, -70.7106781187px, 0px) rotateZ(315deg) scaleX(1);
  animation: oracle-ray-grow-7 4s 1.3473135336s infinite;
}

@keyframes oracle-ray-grow-7 {
  0% {
    transform: translate3d(70.7106781187px, -70.7106781187px, 0px) rotateZ(315deg) scaleX(1);
  }
  50% {
    transform: translate3d(70.7106781187px, -70.7106781187px, 0px) rotateZ(315deg) scaleX(2);
  }
  100% {
    transform: translate3d(70.7106781187px, -70.7106781187px, 0px) rotateZ(315deg) scaleX(1);
  }
}
.oracle-ray-8 {
  transform-origin: left center;
  transform: translate3d(100px, 0px, 0px) rotateZ(360deg) scaleX(1);
  animation: oracle-ray-grow-8 4s 2.9956964862s infinite;
}

@keyframes oracle-ray-grow-8 {
  0% {
    transform: translate3d(100px, 0px, 0px) rotateZ(360deg) scaleX(1);
  }
  50% {
    transform: translate3d(100px, 0px, 0px) rotateZ(360deg) scaleX(2);
  }
  100% {
    transform: translate3d(100px, 0px, 0px) rotateZ(360deg) scaleX(1);
  }
}
.particle {
  position: absolute;
  width: 40px;
  height: 5px;
  /* top: 232px; */
  background: linear-gradient(90deg, #00f5f5, transparent);
  border-radius: 20%;
  box-shadow: 0 0 6px 3px rgba(0, 245, 245, 0.15);
  opacity: 0;
}

.particle-1 {
  transform-origin: left center;
  transform: translate3d(93.2035385969px, 93.2035385969px, 0px) rotateZ(18deg);
  animation: particle-grow-1 4s 1.2059136158s linear infinite;
}

@keyframes particle-grow-1 {
  0% {
    transform: translate3d(93.2035385969px, 27.2836654487px, 0px) rotateZ(18deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(99.860934211px, 29.4467844094px, 0px) rotateZ(18deg);
    opacity: 0;
  }
}
.particle-2 {
  transform-origin: left center;
  transform: translate3d(79.2836654487px, 79.2836654487px, 0px) rotateZ(36deg);
  animation: particle-grow-2 4s 2.7310330014s linear infinite;
}

@keyframes particle-grow-2 {
  0% {
    transform: translate3d(79.2836654487px, 54.6029547247px, 0px) rotateZ(36deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(84.9467844094px, 58.7174514907px, 0px) rotateZ(36deg);
    opacity: 0;
  }
}
.particle-3 {
  transform-origin: left center;
  transform: translate3d(57.6029547247px, 57.6029547247px, 0px) rotateZ(54deg);
  animation: particle-grow-3 4s 1.1267290643s linear infinite;
}

@keyframes particle-grow-3 {
  0% {
    transform: translate3d(57.6029547247px, 76.2836654487px, 0px) rotateZ(54deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(61.7174514907px, 81.9467844094px, 0px) rotateZ(54deg);
    opacity: 0;
  }
}
.particle-4 {
  transform-origin: left center;
  transform: translate3d(30.2836654487px, 30.2836654487px, 0px) rotateZ(72deg);
  animation: particle-grow-4 4s 1.4418891618s linear infinite;
}

@keyframes particle-grow-4 {
  0% {
    transform: translate3d(30.2836654487px, 90.2035385969px, 0px) rotateZ(72deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(32.4467844094px, 96.860934211px, 0px) rotateZ(72deg);
    opacity: 0;
  }
}
.particle-5 {
  transform-origin: left center;
  transform: translate3d(0px, 0px, 0px) rotateZ(90deg);
  animation: particle-grow-5 4s 1.2013404463s linear infinite;
}

@keyframes particle-grow-5 {
  0% {
    transform: translate3d(0px, 95px, 0px) rotateZ(90deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 102px, 0px) rotateZ(90deg);
    opacity: 0;
  }
}
.particle-6 {
  transform-origin: left center;
  transform: translate3d(-30.2836654487px, -30.2836654487px, 0px) rotateZ(108deg);
  animation: particle-grow-6 4s 2.3546489154s linear infinite;
}

@keyframes particle-grow-6 {
  0% {
    transform: translate3d(-30.2836654487px, 90.2035385969px, 0px) rotateZ(108deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(-32.4467844094px, 96.860934211px, 0px) rotateZ(108deg);
    opacity: 0;
  }
}
.particle-7 {
  transform-origin: left center;
  transform: translate3d(-57.6029547247px, -57.6029547247px, 0px) rotateZ(126deg);
  animation: particle-grow-7 4s 1.9928863713s linear infinite;
}

@keyframes particle-grow-7 {
  0% {
    transform: translate3d(-57.6029547247px, 76.2836654487px, 0px) rotateZ(126deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(-61.7174514907px, 81.9467844094px, 0px) rotateZ(126deg);
    opacity: 0;
  }
}
.particle-8 {
  transform-origin: left center;
  transform: translate3d(-79.2836654487px, -79.2836654487px, 0px) rotateZ(144deg);
  animation: particle-grow-8 4s 2.9258236088s linear infinite;
}

@keyframes particle-grow-8 {
  0% {
    transform: translate3d(-79.2836654487px, 54.6029547247px, 0px) rotateZ(144deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(-84.9467844094px, 58.7174514907px, 0px) rotateZ(144deg);
    opacity: 0;
  }
}
.particle-9 {
  transform-origin: left center;
  transform: translate3d(-93.2035385969px, -93.2035385969px, 0px) rotateZ(162deg);
  animation: particle-grow-9 4s 1.9733126064s linear infinite;
}

@keyframes particle-grow-9 {
  0% {
    transform: translate3d(-93.2035385969px, 27.2836654487px, 0px) rotateZ(162deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(-99.860934211px, 29.4467844094px, 0px) rotateZ(162deg);
    opacity: 0;
  }
}
.particle-10 {
  transform-origin: left center;
  transform: translate3d(-98px, -98px, 0px) rotateZ(180deg);
  animation: particle-grow-10 4s 1.0331150143s linear infinite;
}

@keyframes particle-grow-10 {
  0% {
    transform: translate3d(-98px, -3px, 0px) rotateZ(180deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(-105px, -3px, 0px) rotateZ(180deg);
    opacity: 0;
  }
}
.particle-11 {
  transform-origin: left center;
  transform: translate3d(-93.2035385969px, -93.2035385969px, 0px) rotateZ(198deg);
  animation: particle-grow-11 4s 2.1567456544s linear infinite;
}

@keyframes particle-grow-11 {
  0% {
    transform: translate3d(-93.2035385969px, -33.2836654487px, 0px) rotateZ(198deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(-99.860934211px, -35.4467844094px, 0px) rotateZ(198deg);
    opacity: 0;
  }
}
.particle-12 {
  transform-origin: left center;
  transform: translate3d(-79.2836654487px, -79.2836654487px, 0px) rotateZ(216deg);
  animation: particle-grow-12 4s 3.1185922489s linear infinite;
}

@keyframes particle-grow-12 {
  0% {
    transform: translate3d(-79.2836654487px, -60.6029547247px, 0px) rotateZ(216deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(-84.9467844094px, -64.7174514907px, 0px) rotateZ(216deg);
    opacity: 0;
  }
}
.particle-13 {
  transform-origin: left center;
  transform: translate3d(-57.6029547247px, -57.6029547247px, 0px) rotateZ(234deg);
  animation: particle-grow-13 4s 1.1676103723s linear infinite;
}

@keyframes particle-grow-13 {
  0% {
    transform: translate3d(-57.6029547247px, -82.2836654487px, 0px) rotateZ(234deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(-61.7174514907px, -87.9467844094px, 0px) rotateZ(234deg);
    opacity: 0;
  }
}
.particle-14 {
  transform-origin: left center;
  transform: translate3d(-30.2836654487px, -30.2836654487px, 0px) rotateZ(252deg);
  animation: particle-grow-14 4s 2.043375164s linear infinite;
}

@keyframes particle-grow-14 {
  0% {
    transform: translate3d(-30.2836654487px, -96.2035385969px, 0px) rotateZ(252deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(-32.4467844094px, -102.860934211px, 0px) rotateZ(252deg);
    opacity: 0;
  }
}
.particle-15 {
  transform-origin: left center;
  transform: translate3d(0px, 0px, 0px) rotateZ(270deg);
  animation: particle-grow-15 4s 2.7203571488s linear infinite;
}

@keyframes particle-grow-15 {
  0% {
    transform: translate3d(0px, -101px, 0px) rotateZ(270deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, -108px, 0px) rotateZ(270deg);
    opacity: 0;
  }
}
.particle-16 {
  transform-origin: left center;
  transform: translate3d(30.2836654487px, 30.2836654487px, 0px) rotateZ(288deg);
  animation: particle-grow-16 4s 1.0734385189s linear infinite;
}

@keyframes particle-grow-16 {
  0% {
    transform: translate3d(30.2836654487px, -96.2035385969px, 0px) rotateZ(288deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(32.4467844094px, -102.860934211px, 0px) rotateZ(288deg);
    opacity: 0;
  }
}
.particle-17 {
  transform-origin: left center;
  transform: translate3d(57.6029547247px, 57.6029547247px, 0px) rotateZ(306deg);
  animation: particle-grow-17 4s 3.2000950065s linear infinite;
}

@keyframes particle-grow-17 {
  0% {
    transform: translate3d(57.6029547247px, -82.2836654487px, 0px) rotateZ(306deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(61.7174514907px, -87.9467844094px, 0px) rotateZ(306deg);
    opacity: 0;
  }
}
.particle-18 {
  transform-origin: left center;
  transform: translate3d(79.2836654487px, 79.2836654487px, 0px) rotateZ(324deg);
  animation: particle-grow-18 4s 1.259771523s linear infinite;
}

@keyframes particle-grow-18 {
  0% {
    transform: translate3d(79.2836654487px, -60.6029547247px, 0px) rotateZ(324deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(84.9467844094px, -64.7174514907px, 0px) rotateZ(324deg);
    opacity: 0;
  }
}
.particle-19 {
  transform-origin: left center;
  transform: translate3d(93.2035385969px, 93.2035385969px, 0px) rotateZ(342deg);
  animation: particle-grow-19 4s 2.022378581s linear infinite;
}

@keyframes particle-grow-19 {
  0% {
    transform: translate3d(93.2035385969px, -33.2836654487px, 0px) rotateZ(342deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(99.860934211px, -35.4467844094px, 0px) rotateZ(342deg);
    opacity: 0;
  }
}
.particle-20 {
  transform-origin: left center;
  transform: translate3d(98px, 98px, 0px) rotateZ(360deg);
  animation: particle-grow-20 4s 1.7427807612s linear infinite;
}

@keyframes particle-grow-20 {
  0% {
    transform: translate3d(98px, -3px, 0px) rotateZ(360deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate3d(105px, -3px, 0px) rotateZ(360deg);
    opacity: 0;
  }
}
.mystic-star-svg {
  opacity: 0;
  animation: mystic-fade 8s ease-in-out infinite;
  z-index: -1;
  transform: scale3d(0.7, 0.7, 1) translate3d(0, -93px, -100px);
}

@keyframes mystic-fade {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.mystic-star-border-path {
  fill: none;
  stroke-dasharray: 70 1039px;
  animation: mystic-border-travel 1s linear infinite;
}

@keyframes mystic-border-travel {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -1109px;
  }
}
.mystic-star-circle-wrapper {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer-wrapper {
  transform: translateY(var(--star-circle-y)) rotateY(0) rotateX(45deg) rotateZ(0);
  animation: mystic-circle-pulse1 8s linear infinite;
}

.inner-wrapper {
  transform: translateY(var(--star-circle-y)) rotateY(0) rotateX(-45deg) rotateZ(0);
  animation: mystic-circle-pulse2 8s linear infinite;
}

.mystic-star-circle {
  position: absolute;
  fill: none;
  transform-box: fill-box;
  transform-origin: center;
  width: 350px;
  height: 350px;
  opacity: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgb(255, 255, 245), rgba(255, 255, 255, 0.5), rgba(0, 245, 245, 0.25), #00f5f5, rgba(0, 245, 245, 0.25), rgba(255, 255, 255, 0.5), rgb(255, 255, 255));
  mask: radial-gradient(circle, transparent 0 70%, #000 70% 71.5%, transparent 72.5%);
}

.mystic-star-circle--outer {
  animation: circle-highlight 3s linear infinite;
}

.mystic-star-circle--inner {
  animation: circle-highlight 3s 3s linear infinite;
}

@keyframes mystic-circle-pulse1 {
  0% {
    transform: translateY(var(--star-circle-y)) rotateY(0) rotateX(45deg) rotateZ(0);
  }
  20% {
    transform: translateY(var(--star-circle-y)) rotateY(180deg) rotateX(22.5deg) rotateZ(180deg);
  }
  50% {
    transform: translateY(var(--star-circle-y)) rotateY(180deg) rotateX(0) rotateZ(180deg);
  }
  80% {
    transform: translateY(var(--star-circle-y)) rotateY(180deg) rotateX(22.5deg) rotateZ(180deg);
  }
  100% {
    transform: translateY(var(--star-circle-y)) rotateY(360deg) rotateX(45deg) rotateZ(360deg);
  }
}
@keyframes mystic-circle-pulse2 {
  0% {
    transform: translateY(var(--star-circle-y)) rotateY(0) rotateX(-45deg) rotateZ(0);
  }
  20% {
    transform: translateY(var(--star-circle-y)) rotateY(180deg) rotateX(-22.5deg) rotateZ(-180deg);
  }
  50% {
    transform: translateY(var(--star-circle-y)) rotateY(180deg) rotateX(0) rotateZ(-180deg);
  }
  80% {
    transform: translateY(var(--star-circle-y)) rotateY(180deg) rotateX(-22.5deg) rotateZ(-180deg);
  }
  100% {
    transform: translateY(var(--star-circle-y)) rotateY(360deg) rotateX(-45deg) rotateZ(-360deg);
  }
}
@keyframes circle-highlight {
  to {
    transform: rotateZ(360deg);
  }
}
.mystic-symbol {
  filter: drop-shadow(0 0 3px #00f5f5) drop-shadow(0 0 7px #00f5f5);
  opacity: 0.3;
  animation: mystic-symbol-glow 3s ease-in-out infinite;
}

.mystic-symbol:nth-of-type(1) {
  animation-delay: 2s;
}

.mystic-symbol:nth-of-type(2) {
  animation-delay: 3s;
}

.mystic-symbol:nth-of-type(3) {
  animation-delay: 2s;
}

.mystic-symbol:nth-of-type(4) {
  animation-delay: 2s;
}

.mystic-symbol:nth-of-type(5) {
  animation-delay: 2s;
}

.mystic-symbol:nth-of-type(6) {
  animation-delay: 4s;
}

@keyframes mystic-symbol-glow {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}