exadel-inc/esl

@import (reference) '../../common/variables.less';
 
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
 
@keyframes blinking {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.5;
  }
}
 
@keyframes star {
  0% {
    transform: translate3d(-20%, -20%, 0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translate3d(150%, 150%, 0);
    opacity: 0.75;
  }
}
 
.newsline-stars {
  position: absolute;
  // visible area
  left: calc(50% - 50vw);
  width: 100vw;
  top: -50vh;
  height: calc(100% + 100vh);
 
  overflow: hidden;
  pointer-events: none;
 
  &__scene {
    position: relative;
    width: 100%;
    top: 25%;
    height: 50%;
    opacity: 0.5;
    animation: blinking 1s linear infinite;
  }
 
  &__star {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 
    color: @primary-yellow;
    font-size: 8px;
 
    animation: rotate 180s linear infinite;
    transform-origin: center;
 
    &::before {
      display: block;
      width: 100%;
      height: 100%;
      content: '\2022'; // '•'
      animation: star 20s linear infinite;
    }
 
    &:nth-child(1) {
      animation-duration: 200s;
      &::before {
        animation-duration: 25s;
      }
    }
 
    &:nth-child(2) {
      font-size: 12px;
      animation-delay: 10s;
      animation-duration: 120s;
      &::before {
        animation-delay: 20s;
        animation-duration: 15s;
      }
    }
 
    &:nth-child(3) {
      font-size: 10px;
      animation-delay: 10s;
      animation-duration: 180s;
      &::before {
        animation-delay: 7s;
        animation-duration: 15s;
      }
    }
  }
}