$sazerac: #FFF3E3
$java: #1FCFCB
$sandy-brown: #F5A278

html,
body
  position: relative
  width: 100%
  height: 100%
  font-family: 'Inconsolata', monospace
  font-size: 16px
  color: $java
  background: $sazerac
  
.container
  position: relative
  top: 5%
  left: 5%
  width: 90%
  height: 90%
  .row
    width: 100%
    &:nth-child(1)
      height: 10%
      text-align: center
    &:nth-child(2)
      display: flex
      height: 30%
      flex-wrap: wrap
      align-items: center
      justify-content: center
  .col
    position: relative
    margin-bottom: 2rem
    flex: 1
    height: 100%
    min-width: 180px
    max-width: 30%
    color: rgba($java, .6)
    box-shadow: 0px 4px 8px 1px rgba(#257F8A, .15)
    &:nth-child(1)
      margin-right: 5%
    &:nth-child(2)
      margin-right: 5%

.col
  >*
    position: relative
    width: 100%
  .content
    height: 85%
  .title
    text-align: center
  
.content
  filter: url("#gooey")
  >*
    position: absolute
    border-radius: 50%
    &:nth-child(1)
      width: 2rem
      padding-top: 2rem
    &:nth-child(2)
      width: 3rem
      padding-top: 3rem 
  &.anim-1
    .circle
      will-change: transform
      background: $sandy-brown
      &:nth-child(1)
        top: 37%
        left: 37%
      &:nth-child(2)
        top: 40%
        left: 40%
  &.anim-2
    .circle
      will-change: top, left
      background: $java
      &:nth-child(1)
        width: 1.9rem
        padding-top: 1.9rem
        top: 23%
        left: 20%
      &:nth-child(2)
        top: 50%
        left: 50%
        transform: translate(-50%, -50%)
  &.anim-3
    .circle
      will-change: left
      background: $sandy-brown
      &:nth-child(1)
        top: calc(50% - 1rem)
        left: 10%
      &:nth-child(2)
        top: 50%
        left: 50%
        transform: translate(-50%, -50%)

const $firstAnimation = {
        fCircle: $('.anim-1 .circle:nth-child(1)'),
        sCircle: $('.anim-1 .circle:nth-child(2)')
      }, 
      $secondAnimation = {
        fCircle: $('.anim-2 .circle:nth-child(1)')
      }, 
      $thirdAnimation = {
        fCircle: $('.anim-3 .circle:nth-child(1)')
      };

const triggerAnimation = () => {
        triggerFirst();
        triggerSecond();
        triggerThird();
      },
      triggerFirst = () => {
        $firstAnimation.fCircle.velocity({
          'scale': '1.3'
        },{
          duration: 1200,
          delay: 500,
          easing: [0.345, 0.285, 0.095, 0.870],
          loop: true 
        }).velocity({
          'scale': '.9'
        },{
          duration: 800,
          delay: 1200,
          easing: [0.345, 0.285, 0.095, 0.870]
        });
        $firstAnimation.sCircle.velocity({
          'scale': '1.2'
        },{
          duration: 1800,
          delay: 800,
          easing: [0.345, 0.285, 0.095, 0.870],
          loop: true 
        }).velocity({
          'scale': '.7'
        },{
          duration: 2000,
          delay: 1200,
          easing: [0.345, 0.285, 0.095, 0.870]
        });
      },
      triggerSecond = () => {
        $secondAnimation.fCircle.velocity({
          'top': '60%',
          'left': '64%'
        },{
          duration: 4000,
          easing: 'easeInOutCubic',
          loop: true 
        });
      },
      triggerThird = () => {
        $thirdAnimation.fCircle.velocity({
          'left': '73%'
        },{
          duration: 400,
          delay: 800,
          easing: [0.345, 0.285, 0.095, 0.870],
          loop: true 
        }).velocity({
          'left': '10%'
        },{
          duration: 400,
          delay: 1200,
          easing: [0.345, 0.285, 0.095, 0.870]
        });
      };

document.on('ready', triggerAnimation());