.home-page {
  .components-preview {
    cursor: url("/assets/icons/controls/cursors/cursor.svg") 15 10, default;

    & :is(button, a, input, textarea):is(:hover, :active) {
      cursor: url("/assets/icons/controls/cursors/pointer.svg") 15 10, pointer;
    }

    &
      :is(
        input[type="text"],
        input[type="password"],
        input[type="email"],
        textarea
      ):is(:hover, :active) {
      cursor: url("/assets/icons/controls/cursors/text.svg") 15 10, pointer;
    }

    & :is(button, a, input, textarea):disabled,
    & label:has(input:disabled),
    & label,
    & label:has(textarea:disabled) {
      cursor: url("/assets/icons/controls/cursors/cursor.svg") 15 10, default;
    }
  }
}

.rainbow-glow {
  top: 200px;
  left: 50%;
  width: 650px;
  height: 300px;
  transform: translate(-50%, -50%);
  animation: rainbowSlide 70s linear infinite;

  & div {
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    left: 25%;
    top: 25%;
    filter: blur(40px) saturate(100%);
    opacity: 0.4;
    /* animation: rainbowElemChange 17s cubic-bezier(0.4, 0.16, 0.3, 0.77) infinite; */
    transition: scale 5s cubic-bezier(0.12, 1, 0.22, 1),
      filter 5s cubic-bezier(0.12, 1, 0.22, 1);
    transform-origin: center center;
    will-change: scale, filter, width;
    transform: translate(-50%, -50%);

    &[data-hover="true"] {
      scale: 1.2;
      filter: blur(40px) saturate(120%) !important;
    }
  }
  & div:nth-child(2n) {
    /* width: 52%; */
    animation-play-state: paused;
    /* animation: rainbowElemChangeSecond 17s cubic-bezier(0.4, 0.16, 0.3, 0.77)
      infinite; */
  }
  & div:nth-child(1) {
    background-color: #ff0000;
    rotate: calc(calc(360deg / 9) * 1);
  }
  & div:nth-child(2) {
    background-color: #ff7f00;
    rotate: calc(calc(360deg / 9) * 2);
  }
  & div:nth-child(3) {
    background-color: #ffff00;
    rotate: calc(calc(360deg / 9) * 3);
  }
  & div:nth-child(4) {
    background-color: #00ff00;
    rotate: calc(calc(360deg / 9) * 4);
  }
  & div:nth-child(5) {
    background-color: #249cff;
    rotate: calc(calc(360deg / 9) * 5);
  }
  & div:nth-child(6) {
    background-color: #0000ff;
    rotate: calc(calc(360deg / 9) * 6);
  }
  & div:nth-child(7) {
    background-color: #4b0082;
    rotate: calc(calc(360deg / 9) * 7);
  }
  & div:nth-child(8) {
    background-color: #00ff00;
    rotate: calc(calc(360deg / 9) * 8);
  }
  & div:nth-child(9) {
    background-color: #ff9900;
    rotate: calc(calc(360deg / 9) * 9);
  }
}

@keyframes rainbowSlide {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(-180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes rainbowElemChange {
  0%,
  100% {
    width: 50%;
  }
  50% {
    width: 52%;
  }
}

@keyframes rainbowElemChangeSecond {
  0%,
  100% {
    width: 52%;
  }
  50% {
    width: 50%;
  }
}

@media screen and (min-width: 576px) {
  .rainbow-glow {
    top: 250px;
    width: 900px;
    height: 450px;
  }
}

@media screen and (min-width: 992px) {
  .rainbow-glow {
    top: 400px;
    width: 1200px;
    height: 600px;
  }
}

@media screen and (min-width: 1600px) {
  .rainbow-glow {
    top: 550px;
    width: 1500px;
    height: 750px;
  }
}