@import './../../../styles/global';

@keyframes c-star-background--wobble {
  0% {
    opacity: 0.7;
  }

  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 0.7;
  }
}

.c-star-background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: $s-z--background;

  &__inner {
    position: relative;
    height: 100%;
    z-index: $s-z--background;
  }

  &__star {
    position: absolute;

    &-image {
      width: 1.2em;
      height: 1.2em;
      transform: translate(-50%, -50%);
      background: url('./../../../assets/icons/icon-star.svg');
      background-size: contain;
      background-repeat: no-repeat;

      animation: c-star-background--wobble $s-animation--time-very-long $s-animation--ease-in-out infinite;
    }

    //Styles
    &.is-star-1 { left: 5%; top: 10%; transform: scale(0.5); }
    &.is-star-2 { left: 10%; top: 50%; opacity: 0.5; }
    &.is-star-3 { left: 20%; top: 25%; opacity: 0.9; transform: scale(0.75); }
    &.is-star-4 { left: 35%; top: 35%; opacity: 0.7; }
    &.is-star-5 { left: 45%; top: 5%; transform: scale(0.8); }
    &.is-star-6 { left: 65%; top: 15%; transform: scale(0.5); }
    &.is-star-7 { left: 75%; top: 30%; opacity: 0.75; transform: scale(0.75);  }
    &.is-star-8 { left: 85%; top: 10%; }
    &.is-star-9 { left: 85%; top: 45%; opacity: 0.55; transform: scale(0.5); }
    &.is-star-10 { left: 95%; top: 35%; opacity: 0.7; }
    &.is-star-11 { left: 50%; top: 50%; }
    &.is-star-12 { left: 45%; top: 40%; transform: scale(0.7); }
  }
}