@import "compass/css3"

body
  width: 100vw
  height: 100vh
  font-family: monospace
  background: linear-gradient(135deg, #124bfe, darken(#124bfe, 25%))
.blobs
  filter: url('#goo')
  position: absolute
  top: 0
  left: 0
  bottom: 0
  right: 0
  z-index: 200
  // animation: rotate 4s linear infinite
  
$d: 67px
$color: #fff

@keyframes rotate
  from
    transform: rotate(0deg)
  to
    transform: rotate(360deg)

      
@keyframes wobble
  from
    transform: scale(0.1)
  to
    transform: scale(4)

.blob
  position: absolute
  background: #111
  left: 50%
  top: 50%
  width: 100px
  height: 100px
  line-height: 100px
  text-align: center
  color: black
  font-size: 40px
  border-radius: 100%
  margin-top: -50px
  margin-left: -50px
  transition: all 1s cubic-bezier(0.770, 0.000, 0.175, 1.000)
  transform: translate3d(0, 0, 0)
  background: $color
  // background: linear-gradient(135deg, #124bfe, darken(#124bfe, 20%))
  trasnform-origin: 0 0
  // box-shadow: 0 10px 100px rgba(0,0,0,0.1)
  
  &:nth-child(17)
    transform: scale(1)
    animation: wobble 8s alternate ease-in-out infinite

  @for $i from 1 through 8
    $r: 220px
    $a: (pi() / 4) * ($i)
    $x: $r * cos($a)
    $y: $r * sin($a)
    
    @debug: $x
    @keyframes move-#{$i}
      from
        transform: translate3d(0, 0, 0) scale(1)
      to
        transform: translate3d($x, $y, 0) scale(0.33)
    &:nth-child(#{$i})
      animation: move-#{$i} 2s ease-in-out alternate -#{$i/2}s infinite
  
  @for $i from 9 through 17
    $r: 40px
    $a: (pi() / 4) * ($i - 8)
    $x: $r * cos($a)
    $y: $r * sin($a)
    
    @debug: $x
    @keyframes move2-#{$i}
      from
        transform: translate3d(0, 0, 0) scale(1)
      to
        transform: translate3d($x, $y, 0) scale(1.6)
    &:nth-child(#{$i})
      animation: move2-#{$i} 2s ease-in-out alternate -#{$i/2.1}s infinite






//----and a little bit of math

//function for power
@function pow($number, $exp)
  $value: 1
  @if $exp > 0
    @for $i from 1 through $exp
      $value: $value * $number
  @else if $exp < 0
    @for $i from 1 through -$exp
      $value: $value / $number
  @return $value

// function for factorial
@function fact($number)
  $value: 1
  @if $number > 0
    @for $i from 1 through $number
      $value: $value * $i
  @return $value

// function which returns pi
@function pi()
  @return 3.14159265359

//function for fixing unit
@function rad($angle)
  $unit: unit($angle)
  $unitless: $angle / ($angle * 0 + 1)
  @if $unit == deg
    $unitless: $unitless / 180 * pi()
  @return $unitless

//function which returns cosine of an angle
@function cos($angle)
  $cos: 0
  $angle: rad($angle)
  @for $i from 0 through 10
    $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i)
  @return $cos
//function which returns sine of an angle
@function sin($angle)
  $sin: 0
  $angle: rad($angle)
  @for $i from 0 through 10
    $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1)
  @return $sin

@function tan($angle)
  @return sin($angle) / cos($angle)