:root {
  --padding: 0rem;
  --border: 0.2rem;
  --radius: 20rem;
  --mainColor: hsl(197, 100%, 50%);
  --highlightColor: rgba(198, 247, 255, 0.6);

  /* Uncomment the below for a bit more gold/red vibe: */
  /* --mainColor: hsl(0, 100%, 38%); */
  /* --highlightColor: rgba(255, 232, 22, 0.644); */
}

.glowing-circle {
  /* background: black; */
  /* position: relative; */
  z-index: 1;
  filter: contrast(1.3) brightness(2);
  animation: 20s bgPos ease-in-out infinite alternate;
}

.glowing-circle::before {
  content: "";
  top: var(--padding);
  left: var(--padding);
  right: var(--padding);
  bottom: var(--padding);
  position: absolute;
  border-radius: 50%;
  border: var(--border) solid var(--mainColor);
  box-sizing: border-box;
  z-index: 0;
  transition: border-color 500ms;
}

.glowing-circle::after {
  content: "";
  top: calc(var(--padding) - var(--border) - 3px);
  left: calc(var(--padding) - var(--border) - 3px);
  right: calc(var(--padding) - var(--border) - 3px);
  bottom: calc(var(--padding) - var(--border) - 3px);
  position: absolute;
  border-radius: 50%;
  border: calc(var(--border) * 2 + 3px * 2) solid var(--highlightColor);
  box-sizing: border-box;
  z-index: 0;
  filter: blur(calc(var(--border) * 2.5));
}

.glowing-circle::before {
  animation: main-color 5s ease-in-out alternate infinite;
  /* border-color: hsl(0, 100%, 38%); */
}

.glowing-circle:after {
  animation: highlight-color 5s ease-in-out alternate infinite;
}

.glowing-circle_noise {
  mix-blend-mode: multiply;
  z-index: 1;
  position: relative;
}

.animated {
  animation: 20s bgPos ease-in-out infinite alternate;
}

@keyframes bgPos {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: var(--radius) var(--radius);
  }
}

@keyframes main-color {
  from {
    border-color: hsl(197, 100%, 50%);
  }
  40% {
    border-color: var(--base-color-brand--flamingo);
  }
  to {
    border-color: hsl(0, 100%, 38%);
  }
}

@keyframes highlight-color {
  from {
    border-color: hsla(188, 100%, 89%, 0.6);
  }
  60% {
    border-color: hsla(270, 100%, 89%, 0.6);
  }
  to {
    border-color: hsla(54, 100%, 54%, 0.644);
  }
}

.slider-control__prev:hover ~ .custom-cursor-prev,
.slider-control__next:hover ~ .custom-cursor-next {
  display: flex;
}