* {
  font-family: "Lato", sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
}

.main {
  background-color: #fff;
  min-height: 100vh;
}

.animation-wrapper {
  transition: all 0.3s ease;

  animation-iteration-count: once;
  animation-fill-mode: forwards;
  animation-name: main-open;
  animation-duration: 0.2s;
}

.title {
  position: fixed;
  width: 20vw;
  padding: 2vw;
}

svg#main-bg {
  position: fixed;
  width: 60vw;
  left: 20vw;
  top: 5vw;
  z-index: 1;
}

svg#base {
  width: 66vw;
  /* height: 40vw; */
  left: 10vw;
  position: fixed;
  top: 3vw;
}

/*
.svg-wrapper {
  position: fixed;
  top: 3vw;
  width: 80vw;
  left: 10vw;
}
*/

.main-circle {
  width: 47.1vw;
  position: fixed;
  height: 47.1vw;
  border-radius: 100%;
  border: 0.5vw solid red;
  z-index: 2;
  top: 19%;
  left: 27.8vw;
  /* opacity: .5; */
  box-sizing: border-box;
}

.main-circle {
  width: 39.9vw;
  position: fixed;
  height: 39.9vw;
  border-radius: 100%;
  border: 0.5vw solid white;
  z-index: 3;
  top: 8.2vw;
  left: 23.6vw;
  /* opacity: .5; */
  box-sizing: border-box;
}

.gradient-circle {
  width: 29.8vw;
  position: fixed;
  height: 29.8vw;
  border-radius: 100%;
  border: 0.4vw solid white;
  z-index: 2;
  top: 13.2vw;
  left: 11vw;
  box-sizing: border-box;
  background: radial-gradient(
    113.96% 113.96% at 100% 50.12%,
    #f6f6f6 0%,
    #f6f6f6 56.25%,
    rgba(246, 243, 255, 0.455312) 84.71%,
    rgb(246 246 246) 93.08%,
    rgb(246 246 246) 100%
  );
  transition: background-position 0.5s ease;
  background-size: 200% 200%;
  background-position: 0% 50%;
}

.gradient-circle.now {
  background: radial-gradient(
    113.96% 113.96% at 100% 50.12%,
    #7f67f1 0%,
    #f6f6f6 56.25%,
    rgb(246 246 246) 84.71%,
    rgba(255, 255, 255, 0.111228) 93.08%,
    rgb(246 246 246) 100%
  );
  background-size: 200% 200%;
  background-position: 20% 50%;
}

.gradient-circle.future {
  background: radial-gradient(
    113.96% 113.96% at 100% 50.12%,
    #7f67f1 0%,
    #f1eeff 56.25%,
    rgba(246, 243, 255, 0.455312) 84.71%,
    rgba(255, 255, 255, 0.111228) 93.08%,
    rgba(246, 246, 246, 0) 100%
  );
  background-size: 200% 200%;
  background-position: 40% 50%;
}

.circle:hover {
  /* calculate using: (2 * PI * R) */
  stroke-dasharray: 227;
  stroke-dashoffset: 0;
  animation-iteration-count: infinite;
  animation-name: rotate;
  animation-duration: 3s;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes rotate {
  to {
    stroke-dashoffset: 150;
  }
}

.outer-circle {
  position: fixed;
  width: 9vw;
  height: 9vw;
  top: 21vw;
  z-index: 65;
  left: 36vw;
}

.progress-ring {
  stroke-dasharray: 227;
  stroke-dashoffset: 11vw;
  transform: rotate(75deg);
  transition: all 1s ease;
}

.progress-ring:hover {
  stroke-dashoffset: 105;
}

.logohm {
  width: 2vw;
  height: 2vw;
  background: #8b6bff;
  position: absolute;
  border-radius: 100%;
  top: 4vw;
  left: 4vw;
  text-align: center;
  line-height: 2vw;
  transform: rotate(0deg) translateY(4vw) rotate(-0deg);
  transition: all 1s ease;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.logohm img {
  width: 75%;
}

.logohm.visible {
  opacity: 1;
}

.logohm.now {
  transform: rotate(90deg) translateY(4vw) rotate(-90deg);
}

.logohm.future {
  transform: rotate(170deg) translateY(4vw) rotate(-170deg);
}

svg#text {
  position: fixed;
  width: 54.1vw;
  top: 12vw;
  left: 18.1vw;
  z-index: 4;
}

svg#core {
  position: fixed;
  width: 28.5vw;
  z-index: 4;
  left: 11.4vw;
  top: 25.5vw;
}

@-webkit-keyframes myOrbit {
  from {
    -webkit-transform: rotate(0deg) translateX(43px) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translateX(43px) rotate(-360deg);
  }
}

#demo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  height: 80%;
  max-height: 80%;
  max-width: 80%;
}

#action {
  padding: 10px;
  font-size: 0.875em;
  margin: 10px;
  cursor: pointer;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
}

.bg-circle {
  width: 10vw;
  height: 10vw;
  border-radius: 12vw;
  background: #a6a8ab;
  position: fixed;
  top: 21.1vw;
  left: 36.2vw;
  z-index: 12;
  overflow: hidden;
  transform: scale(0.88);
}

.top-circle {
  position: absolute;
  width: 6vw;
  height: 6vw;
  top: 2vw;
  left: 2vw;
  background: whitesmoke;
  border-radius: 8vw;
  z-index: 99;
  display: flex;
  padding: 1vw;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
}

.top-circle img {
  width: 80%;
}

.purple-reveal {
  position: absolute;
  width: 10vw;
  left: 0;
  bottom: 0;
  height: 10vw;
  background: #8b6bff;
  transition: all 1s ease;
  background: linear-gradient(90deg, #8b6bff 49.47%, #a6a8ab 49.48%);
  transform: rotate(180deg);
}

.purple-mask {
  background: #a5a8aa;
  width: 10vw;
  height: 10vw;
  position: absolute;
  top: 0;
  left: 4.9vw;
}

.bg-circle:hover .logohm {
  transform: rotate(90deg) translateY(4vw) rotate(-90deg);
}

.bg-circle:hover .purple-reveal {
  transform: rotate(270deg);
}

.purple-reveal.now {
  transform: rotate(270deg);
}

.purple-reveal.future {
  transform: rotate(350deg);
}

.wider-rect {
  opacity: 0.7;
  width: 63vw;
  height: 0.3vw;
  background: #e6e7e8;
  position: fixed;
  z-index: 4;
  left: 9vw;
  top: 29.6vw;
  border-radius: 3vw;
  background: linear-gradient(90deg, #e6e7e8 0%, #9d9e9f 48.96%, #dedfe0 100%);

  animation-iteration-count: once;
  animation-name: grow-wide;
  animation-duration: 2s;
  animation-delay: 0s;
}

.major-circle-wrapper {
  width: 36vw;
  display: flex;
  position: fixed;
  top: 27.1vw;
  left: 12.6vw;
  z-index: 7;
  transform: scale(0.95);
  transform-origin: left;
}

.circle-main {
  width: 4.3vw;
  height: 4.3vw;
  background: #ffffff;
  border-radius: 10vw;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.7vw;
  letter-spacing: -0.01em;
  box-shadow: 0px 0px 5px #00000052;
  color: #767779;
  margin: 0.2vw;
  margin-right: 0.6vw;
  opacity: 0;
  line-height: 1;
  padding: 3px;
  box-sizing: border-box;

  animation-name: fade-in-up;
  animation-duration: 0.5s;
  animation-delay: 0.15s;
  animation-fill-mode: forwards;
}

.circle-2 {
  animation-delay: 0.25s;
}

.circle-3 {
  animation-delay: 0.35s;
}

.circle-main.circle-4 {
  margin-left: 5.5vw;
  animation-delay: 0.5s;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(4vw);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes grow-wide {
  from {
    width: 0;
    opacity: 1;
  }
  to {
    opacity: 1;
    width: 63vw;
  }
}

@keyframes main-open {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(-0px) scale(1);
  }
}