/* Pulsing Outline */
.pulsing-outline {
  box-shadow: 0 0 0 0 rgba(255, 49, 185, 1);
  animation: pulsing-outline 2s infinite;
}
@keyframes pulsing-outline {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 49, 185, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 49, 185, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 49, 185, 0);
  }
}



/* Scroll Indicator */
.scroll-indicator {
	position: relative;
  overflow: hidden;
}
.scroll-indicator::after {
	content: "";
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top, black, transparent);
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: auto;
  transform: translateY(-101%);
  animation: scroll-indicator 1.5s ease infinite;
}
@keyframes scroll-indicator {
  0% {
    transform: translateY(-101%);
  }
  35% {
    transform: translateY(0%);
  }
  75% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(101%);
  }
}



/* Animate Circle */
:root {
  --circle-btn-bg: #915ff2;
  --circle-btn-text: white;
  --circle-btn-speed: 0.4s;
  --circle-btn-half-speed: 0.25s;
  --circle-ease-out: cubic-bezier(0.61, 1, 0.88, 1);
  --circle-ease-in: cubic-bezier(0.12, 0, 0.39, 0);
}
.reveal-circle {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white);
}
.reveal-circle:hover {
	color: var(--circle-btn-text);
  background-color: var(--circle-btn-bg);
  transition: background-color 0.0s linear var(--circle-btn-speed);
}
.reveal-circle::after {
	pointer-events: none;
	background-color: var(--circle-btn-bg);
  transform: translateY(5em);
  content: "";
  z-index: 1;
  position: absolute;
  width: 100%;
  padding-top: 100%;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: auto;
  border-radius: 50%;
  transition: border-radius var(--circle-btn-half-speed) var(--circle-ease-in) 0.0s, 
  transform var(--circle-btn-speed) var(--circle-ease-in);
}
.reveal-circle:hover::after {
  border-radius: 0%;
  transform: translateY(0em);
  transition: border-radius var(--circle-btn-half-speed) var(--circle-ease-out) var(--circle-btn-half-speed), 
  transform var(--circle-btn-speed) var(--circle-ease-out);
}





/* Animate Line */
:root {
  --animate-line-color: currentColor;
  --animate-line-speed: 0.3s;
  --animate-line-ease: cubic-bezier(0.12, 0, 0.39, 0);
}
.animate-line {
	display: inline-block;
  position: relative;
  overflow-x: hidden;
}
.animate-line::after {
	pointer-events: none;
	background-color: var(--animate-line-color);
  content: "";
  height: 1px;
  position: absolute;
  left: auto;
  top: auto;
  right: 0%;
  bottom: 0%;
  width: 0%;
  transition: width var(--animate-line-ease) var(--animate-line-speed);
}
.animate-line:hover::after {
	width: 100%;
  right: auto;
  left: 0%;
}