@import './mixins/curved-path';

.animated {
  .bet_on_star_won_40 {
    .use-music-note {
      display: block;
    }

    .note-1 .use-music-note,
    .note-2 .use-music-note,
    .note-3 .use-music-note,
    .note-4 .use-music-note,
    .note-5 .use-music-note,
    .note-6 .use-music-note {
      transform-origin: center center;
      scale: 0.1;
      animation-name: note_scale_animation;
      animation-iteration-count: infinite;
    }

    .note-1,
    .note-1 * {
      animation-duration: 8s;
    }

    .note-2,
    .note-2 * {
      animation-duration: 7s;
    }

    .note-3,
    .note-3 * {
      animation-duration: 6s;
    }

    .note-4,
    .note-4 * {
      animation-duration: 5s;
    }

    .note-5,
    .note-5 * {
      animation-duration: 4s;
    }

    .note-6,
    .note-6 * {
      animation-duration: 3s;
    }

    .note_1_movable_1 {
      animation-name: Note1xAxis;
      animation-iteration-count: infinite;

      .outter_container_1 {
        animation-name: Note1yAxis;
        animation-iteration-count: infinite;
      }
    }
  }
}

@include curvedPath(
  (
    (1200px, -1500px) (400px, -3300px) (-1000px, 2500px) (-1400px, 1000px) (-1800px, 2500px) (-2100px, 2000px)
      (-2400px, 2500px) (-2700px, 2200px) (-3000px, 2500px)
  ),
  9,
  Note1
);

@keyframes note_scale_animation {
  0% {
    scale: 0;
    opacity: 1;
  }
  20% {
    scale: 0.15;
    opacity: 1;
  }
  95% {
    scale: 0.15;
    opacity: 1;
  }
  100% {
    scale: 0.3;
    opacity: 0;
  }
}
