.zeus-reflective-glass {
  width: 106px;
  height: 96px;
  top: 122px;
  left: 230px;
  transform: rotate(31deg) skew(-29deg);
  overflow: hidden;
}

.zeus-reflective-line {
  width: 6px;
  height: 200px;
  top: 0;
  left: -4px;
  background: rgba(86, 219, 142, .1);
  transform: rotate(-48deg) translateX(150px);
  animation: key-ref-line 5s infinite forwards;
}

.zeus-small-light-ani1 {
  width: 30px;
  height: 0;
  background: #00FF00;
  box-shadow: 0 0 60px 22px #00FF00;
  opacity: 0;
  animation: zeus-small-light-key1 5s infinite forwards;

}

.zeus-small-light-ani1 {
  left: 218px;
  top: 299px;
  transform-origin: 0 0 0;
  transform: skew(30deg) rotate(40deg);
  border: 1px dotted var(--light);
}


.zeus-desktop {
  background: url(./assets.png) -1316px -711px;
  width: 275px;
  height: 320px;
  transform: translate(-669px, -401px);
  left: 815px;
  top: 514px;
}

.zeus-desktop-ani {
  width: 203px;
  height: 308px;
  right: 174px;
  bottom: 50px;
  animation: key-desktop-ani 5s infinite forwards;
}

.zeus-phone2 {
  background: url(./assets.png) -1326px -1171px;
  width: 237px;
  height: 230px;
  transform: translate(-669px, -401px);
  left: 340px;
  top: 249px;
}

.zeus-phone1 {
  background: url(./assets.png) -1316px -1441px;
  width: 305px;
  height: 360px;
  transform: translate(-669px, -401px);
  left: 799px;
  top: 208px;
}



.main-page-animation-wrapper div {
  position: absolute;
}

.logo-ani-move {
  animation: key-ani-move 5s infinite forwards;
  transform: translateY(-4px);
  top: -34px;
  left: 55px;
  border: 1px solid;

}

.logo0 {
  background: url(./assets.png) -746px -623px;
  width: 410px;
  height: 340px;
  transform: translate(-669px, -401px);
  left: 763px;
  top: 848px;
}


.logo1 {
  background: url(./assets.png) -746px -302px;
  width: 410px;
  height: 260px;
  transform: translate(-669px, -401px);
  left: 763px;
  top: 798px;
}

.zeus-light {
  width: 150px;
  height: 150px;
  left: 216px;
  top: 482px;
  background: #00FF00;
  transform: rotate(30deg) skew(-30deg);
  box-shadow: 0 0 50px 30px #00FF00;
  opacity: .3;
  animation: zeus-ani-light 5s infinite forwards;
}

.zeus-anishining {
  width: 335px;
  height: 320px;
  top: 225px;
  left: 147px;
  overflow: hidden;
  opacity: 0;
  animation: zeus-ani-shining 5s infinite forwards;
  background: linear-gradient(transparent, hsla(0, 0%, 100%, .15));
}

.zeus-cloud {
  background: url(./assets.png) -916px -119px;
  width: 120px;
  height: 110px;
  transform: translate(-669px, -401px);
  left: 301px;
  top: 237px;
  animation: cloud-ani-floating 5s ease-in-out infinite forwards;
}

.zeus-object1 {
  background: url(./assets.png) -392px -1389px;
  width: 180px;
  height: 227px;
  transform: translate(-669px, -401px);
  left: 62px;
  top: 502px;
  animation: key-zeus-board 5s ease-in-out infinite forwards;
}

.zeus-object2 {
  background: url(./assets.png) -380px -1729px;
  width: 180px;
  height: 137px;
  transform: translate(-669px, -401px);
  left: 695px;
  top: 1039px;
}




/* FLOWLINE */

.zeus-flowline div {
  width: 6px;
  border-radius: 5px;
  animation: key-zeus-lines 5s ease-in-out infinite forwards;
  background-image: url(./assets.png);
}



.zeus-line1 {
  height: 350px;
  transform-origin: 0 0 0;
  transform: rotate(-60deg);
  left: 354px;
  bottom: -927px;
  background-position: -160px 0;
}

.zeus-line2 {
  height: 350px;
  transform-origin: 0 0 0;
  transform: rotate(-124deg);
  left: 414px;
  bottom: -865px;
  background-position: -160px 0;
}

.zeus-line3 {
  height: 350px;
  transform-origin: 0 0 0;
  transform: rotate(-240deg);
  left: 292px;
  bottom: -821px;
  background-position: -160px 0;
}

.zeus-flowpoint div {
  width: 10px;
  height: 35px;
  background: url(./assets.png) -35px -180px;
  opacity: 1;
}

.zeus-linep1 {
  left: 302px;
  top: 528px;
  transform: rotate(120deg);
  animation: ani-linep1 5s infinite forwards;
}


.zeus-linep2 {
  left: 451px;
  top: 468px;
  transform: rotate(60deg);
  animation: ani-linep2 5s infinite forwards;
}


.zeus-linep3 {
  left: 258px;
  top: 440px;
  transform: rotate(-60deg);
  animation: ani-linep3 5s infinite forwards;
}


@keyframes key-zeus-board {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-11px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes ani-linep3 {
  0% {
    opacity: 1;
  }

  6% {
    transform: rotate(-60deg) translate(0);
    opacity: 1;
  }

  16% {
    opacity: 1;
  }

  38% {
    transform: rotate(-60deg) translateY(-300px);
    opacity: 0;
  }

  45% {
    transform: rotate(-60deg) translate(0);
    opacity: 0;
  }

  46% {
    transform: rotate(-60deg) translate(0);
    opacity: 1;
  }

  56% {
    opacity: 1;
  }

  78% {
    transform: rotate(-60deg) translateY(-300px);
    opacity: 0;
  }

  100% {
    transform: rotate(-60deg) translate(0);
    opacity: 0;
  }
}

@keyframes ani-linep2 {
  0% {
    opacity: 1;
  }

  6% {
    transform: rotate(55deg) translate(0);
    opacity: 1;
  }

  26% {
    transform: rotate(55deg) translateY(-195px);
    opacity: 1;
  }

  35% {
    transform: rotate(55deg) translateY(-195px);
    opacity: 0;
  }

  45% {
    transform: rotate(55deg) translate(0);
    opacity: 0;
  }

  46% {
    transform: rotate(55deg) translate(0);
    opacity: 1;
  }

  66% {
    transform: rotate(55deg) translateY(-195px);
    opacity: 1;
  }

  80% {
    transform: rotate(55deg) translateY(-195px);
    opacity: 0;
  }

  100% {
    transform: rotate(55deg) translate(0);
    opacity: 0;
  }
}

@keyframes ani-linep1 {
  0% {
    opacity: 1;
  }

  6% {
    transform: rotate(120deg) translate(0);
    opacity: 1;
  }

  18% {
    opacity: 1;
  }

  40% {
    transform: rotate(120deg) translateY(-474px);
    opacity: 0;
  }

  45% {
    transform: rotate(120deg) translate(0);
    opacity: 0;
  }

  46% {
    transform: rotate(120deg) translate(0);
    opacity: 1;
  }

  58% {
    opacity: 1;
  }

  80% {
    transform: rotate(120deg) translateY(-474px);
    opacity: 0;
  }

  100% {
    transform: rotate(120deg) translate(0);
    opacity: 0;
  }
}

@keyframes cloud-ani-floating {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-20px);
  }

  50% {
    transform: translateY(-5px);
  }

  75% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes zeus-ani-light {
  0% {
    opacity: .3;
  }

  15% {
    opacity: .8;
  }

  30% {
    opacity: .3;
  }

  40% {
    opacity: .3;
  }

  55% {
    opacity: .8;
  }

  70% {
    opacity: .2;
  }

  100% {
    opacity: .3;
  }
}

@keyframes zeus-ani-shining {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  30% {
    opacity: .2;
  }

  40% {
    opacity: .1;
  }

  60% {
    opacity: 1;
  }

  80% {
    opacity: .2;
  }

  100% {
    opacity: 0;
  }
}

@keyframes key-ani-move {
  10% {
    transform: translateY(-4px);
  }

  50% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-4px);
  }
}

@keyframes key-zeus-lines {
  0% {
    opacity: .3;
  }

  15% {
    opacity: 1;
  }

  30% {
    opacity: .3;
  }

  40% {
    opacity: .3;
  }

  55% {
    opacity: 1;
  }

  70% {
    opacity: .3;
  }

  100% {
    opacity: .3;
  }
}

@keyframes key-desktop-ani {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes zeus-small-light-key1 {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 0;
  }

  18% {
    opacity: .35;
  }

  26% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  57% {
    opacity: .35;
  }

  64% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes key-ref-line {
  0% {
    transform: rotate(-48deg) translateX(0);
  }

  55% {
    transform: rotate(-48deg) translateX(0);
  }

  85% {
    transform: rotate(-48deg) translateX(150px);
  }

  100% {
    transform: rotate(-48deg) translateX(150px);
  }
}