@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --glowColor {
  syntax: "<color>";
  initial-value: var(--color-main);
}

@keyframes rotate {
  0% {
    --angle: 0deg;
    --glowColor: var(--color-main);
  }
  100% {
    --angle: 360deg;
    --glowColor: var(--color-main);
  }
}

* {
  box-sizing: border-box;
}



.glow-btn-container {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  
}

.glow-button {
  display: flex;
	width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  border: none;
  background: none;
  position: relative;
  padding: 1px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  transform: translate3d(0, 0, 0);
}

.glow-button::after, .glow-button::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
/*  border-radius: calc(100px + 1.5px);*/
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: conic-gradient(
    from var(--angle) at 50% 50%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 33%,
    var(--color-main) 50%,
    rgba(0, 0, 0, 0) 66%,
    rgba(0, 0, 0, 0) 100%
  );
opacity: 0;
	transition: all 1s ease; 
	 
}




.glow-button:hover::after,
.glow-button:hover::before {
	opacity: 1;
	animation: rotate 2s infinite linear;
}



.glow-button-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #191919;
  border: 1px solid #3D3D3D;
  color: #FF5F27;
  z-index: 1;
  transition: all 1s ease; 
  text-align:center;
}

.glow-button-inner:hover {
  animation: rotateShadow 2s infinite linear;
}


@keyframes rotateShadow {
  0% {
    box-shadow:
      0px calc(var(--spread-size) * -2 * 1px) calc(var(--spread-size) * 1px) 0px var(--inner-shadow) inset,
      0px calc(var(--spread-size) * 1px) calc(var(--spread-size) * 2 * 1px) 0px var(--outer-shadow);
  }

  25% {
    box-shadow:
      calc(var(--spread-size) * 2 * 1px) 0px calc(var(--spread-size) * 1px) 0px var(--inner-shadow) inset,
      calc(var(--spread-size) * -1 * 1px) 0px calc(var(--spread-size) * 2 * 1px) 0px var(--outer-shadow);
  }

  50% {
    box-shadow:
      0px calc(var(--spread-size) * 2 * 1px) calc(var(--spread-size) * 1px) 0px var(--inner-shadow) inset,
      0px calc(var(--spread-size) * -1 * 1px) calc(var(--spread-size) * 2 * 1px) 0px var(--outer-shadow);
  }

  75% {
    box-shadow:
      calc(var(--spread-size) * -2 * 1px) 0px calc(var(--spread-size) * 1px) 0px var(--inner-shadow) inset,
      calc(var(--spread-size) * 1 * 1px) 0px calc(var(--spread-size) * 2 * 1px) 0px var(--outer-shadow);
  }

  100% {
    box-shadow:
      0px calc(var(--spread-size) * -2 * 1px) calc(var(--spread-size) * 1px) 0px var(--inner-shadow) inset,
      0px calc(var(--spread-size) * 1 * 1px) calc(var(--spread-size) * 2 * 1px) 0px var(--outer-shadow);
  }
}