/* Keyframes */

@keyframes rotateLogo {
  50% {
    transform: rotate(240deg);
  }
  100% {
    transform: rotate(420deg);
  }
}

@keyframes shinyBorder {
  0% {
    box-shadow: -3px 0px 10px 1px rgba(122, 143, 217, 0.5);
  }
  25% {
    box-shadow: 0px -3px 10px 1px rgba(122, 143, 217, 0.25);
  }
  50% {
    box-shadow: 3px 0px 10px 1px rgba(172, 98, 228, 0.5);
  }
  100% {
    box-shadow: 0px 3px 0 10px 1px rgba(172, 98, 228, 0.25);
  }
}

@keyframes blink {
  0% {
    transform: scale(0.75);
    opacity: 1;
  }
  50% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes rotateDeco {
  /* rotate on central axis of the element */
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* @keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} */

@keyframes buttonGrad {
  0% {
    background: linear-gradient(45deg, rgba(122, 143, 217, 1) 0%, rgba(172, 98, 228, 1) 100%);
    box-shadow: 0 0 20px 0 rgba(122, 143, 217, 0.5);
  }
  50% {
    background: (45deg, rgba(122, 143, 217, 1) 50%, rgba(172, 98, 228, 1) 100%);
    box-shadow: 0 0 20px 0 rgba(172, 98, 228, 0.5);
  }
  100% {
    background: linear-gradient(45deg, rgba(122, 143, 217, 1) 20%, rgba(172, 98, 228, 1) 100%);
    box-shadow: 0 0 20px 0 rgba(122, 143, 217, 0.5);
  }
}

/* Cursor */
i {
  position: absolute;
  height: 80px;
  width: 80px;
  border: 10px double #fffcf5;
  top: 0;
  left: 0;
  border-radius: 100%;
  opacity: 0.8;
  transform: scale(0);
  z-index: 100;
}
i.active {
  opacity: 0;
  transform: scale(1);
  transition: transform 400ms ease, opacity 400ms ease;
}
i:before {
    content: '';
    position: absolute;
    top: 15px;
    left: 20px;
    width: 30px;
    height: 30px;
    border: 10px double #fffcf5;
    border-radius: 100%;
    opacity: 0;
}
i:after {
    content: '';
    position: absolute;
    top: 30px;
    left: 35px;
    width: 60px;
    height: 60px;
    margin: -30px;
    border: 10px double #fffcf5;
    border-radius: 100%;
    opacity: 0;
}
i.active:before {
  opacity: 1;
  transform: scale(1);
  transition: transform 400ms 50ms ease, opacity 400ms 50ms ease;
}
i.active:after {
  opacity: 1;
  transform: scale(1);
  transition: transform 400ms 100ms ease, opacity 400ms 100ms ease;
}
.introduction .f-width-logo img:hover {
  animation: rotateLogo 5s 1.5s infinite;
}
.button.secondary:has(a span:hover),
.button.secondary:has(a:hover) {
  animation: shinyBorder 4s infinite ease-in-out;
}
.button.primary:hover {
  animation: buttonGrad 4s infinite ease-in-out;
  background-size: 200% auto;
  font-weight: 600;
  transition: all 0.5s ease-in-out;
}
.arrows .top {
  animation: blink 2.5s infinite;
}
.arrows .mid {
  animation: blink 2.5s 0.25s infinite;
}
.arrows .bot {
  animation: blink 2.5s 0.5s infinite;
}
.token:hover {
  animation: rotateY 1s infinite;
}
.bg-decoration img {
  animation: rotateDeco 120s infinite linear;
}
/* Parallax */
.introduction {
  position: fixed;
  height: 100vh;
  z-index: -1;
}
.page-content {
  background-color: var(--main-bg);
  position: absolute;
  margin-top: 100vh;
  min-height: 100vh;
  transform-style: inherit;
  width: 100%;
  z-index: 10;
}

.footer {
  position: fixed;
  z-index: -1;
}
.page-content {
  box-sizing: border-box;
  min-height: 100vh;
  position: relative;
  box-shadow: 1px 0 15px 0px rgba(0, 0, 0, 0.5);
  z-index: 1;
}