//// PATHS ////

-Vb = "0 0 450 600"

-Udder = "M411,233.5c-5.1-3-40.6-26-53.3-37c-6.3-28.5-16.9-50-16.9-50h-220c0,0-10.6,21.7-16.6,50.4 c-12.3,10.6-46.8,42.7-51.6,45.5c-9.4,5.5-14.7,16.3-12.6,26.9c0.9,4.6,3.1,9.4,7.6,13.9c4.5,4.5,9.4,6.7,14,7.6 c8,1.5,36.1-21,42.1-26.1c1.4,5.1,3.2,10.2,5.4,15.1c-4.7,8.7-28.9,36.1-31,38.9c-6.6,8.6-7.5,20.6-1.6,29.7 c2.5,3.9,6.4,7.6,12.3,10c5.8,2.5,11.2,2.7,15.9,1.8c10.9-2.2,29.8-33.8,41-42.3c6.7,3.7,14.3,6.9,22.9,9.5 c-0.8,8.8-1.7,46.2-2.5,49.3c-2.7,10.5,1.1,21.9,10.1,28c3.9,2.6,8.9,4.5,15.2,4.5c6.4,0,11.4-1.9,15.3-4.5 c9.2-6.3,13.2-17.9,10.7-28.7c-0.5-2.1-1-36-1.6-40.8c5,0.3,10.2,0.4,15.7,0.4c5.7,0,11.1-0.2,16.3-0.4c-0.5,4.8-1.1,38.7-1.6,40.8 c-2.6,10.9,1.4,22.4,10.7,28.7c3.9,2.7,9,4.5,15.3,4.5c6.4,0,11.3-1.8,15.2-4.5c9-6.1,12.8-17.4,10.1-28c-0.8-3.1-1.7-40.6-2.6-49.5 c8.6-2.7,22.9-9.7,22.9-9.7c0,0.1,0,0.3,0.1,0.4c8.6,6.5,30.1,40.1,41,42.3c4.7,0.9,10,0.7,15.9-1.8c5.8-2.5,9.7-6.1,12.3-10 c5.9-9.1,5-21.1-1.6-29.7c-2.2-2.9-26.7-30.8-31.6-39.9c2-4.6,3.6-9.3,4.9-14c6.1,5.8,34.7,18.7,43.3,17.1c4.7-0.9,9.5-3.1,14-7.6 c4.5-4.5,6.7-9.3,7.6-13.9C425.7,249.7,420.4,239,411,233.5z"

-Ufo1 = "M380.4,102.3c0,28.6-65.3,51.8-145.9,51.8S88.6,130.9,88.6,102.3c0-13.8,65.3-51.8,145.9-51.8 S380.4,87,380.4,102.3z"

-Ufo2 = "M307.8,60.2c0-32.5-29.6-55.4-73.3-55.4s-73.3,22.9-73.3,55.4c0,0,9.2,17.9,73.3,17.9 S307.8,60.2,307.8,60.2z"

-Ufo3 = "M380.4,102.6c0,0.1,0,0.3,0,0.4c0,17.4-65.3,31.6-145.9,31.6S88.6,120.5,88.6,103.1 c0-0.1,0-0.3,0-0.4c-30.6,7.4-49.1,17.3-49.1,28c0,23.3,87.3,49.9,195,49.9s195-26.5,195-49.9C429.5,119.9,410.9,110.1,380.4,102.6z"

-Ufo4 = "M234.5,180.5c-46.3,0-88.8-4.9-122.3-12.4c-2.1,6-4.2,12.9-6.1,20.6 c34.3,8.2,79.2,18.8,128.4,18.8c46.1,0,88.4-9.9,121.8-17.2c-1.9-7.6-4.1-14.6-6.2-20.7C317.8,176.2,277.8,180.5,234.5,180.5z"

-Light1 = "M138.9,68.2c-2.7-2.5-6.3-4-10.3-4c-8.5,0-15.4,6.9-15.4,15.4c0,0.2,0,0.3,0,0.5 C120.4,76,129.1,72,138.9,68.2z"

-Light2 = "M140.1,106.5c-8.5,0-15.4-6.9-15.4-15.4s6.9-15.4,15.4-15.4s15.4,6.9,15.4,15.4 S148.6,106.5,140.1,106.5z"

-Light3 = "M185.7,118.3c-8.5,0-15.4-6.9-15.4-15.4s6.9-15.4,15.4-15.4s15.4,6.9,15.4,15.4 S194.2,118.3,185.7,118.3z"

-Light4 = "M239.5,122c-8.5,0-15.4-6.9-15.4-15.4s6.9-15.4,15.4-15.4c8.5,0,15.4,6.9,15.4,15.4 S248,122,239.5,122z"

-Light5 = "M277.9,102.9c0-8.5,6.9-15.4,15.4-15.4s15.4,6.9,15.4,15.4s-6.9,15.4-15.4,15.4 S277.9,111.4,277.9,102.9z"

-Light6 = "M323.5,91.1c0-8.5,6.9-15.4,15.4-15.4c8.5,0,15.4,6.9,15.4,15.4s-6.9,15.4-15.4,15.4 C330.4,106.5,323.5,99.6,323.5,91.1z"

-Light7 = "M364.9,84.9c0.6-1.6,0.9-3.4,0.9-5.3c0-8.5-6.9-15.4-15.4-15.4c-5.2,0-9.8,2.6-12.6,6.5 C348.7,75.3,357.9,80.2,364.9,84.9z"

-Shadow = "M356.3,545.5c0,6.6-56,12-125.1,12s-125.1-5.4-125.1-12s56-12,125.1-12S356.3,538.9,356.3,545.5z"

-Halo = "M273.6,5.5c0,2.8-20.6,5-46.1,5s-46.1-2.2-46.1-5s20.6-5,46.1-5S273.6,2.7,273.6,5.5z"

-Cow = "M3.3,2.8c2.6,0.4,2,1.4,4.5,0c0.6-0.3,2.2-2.8,3-2.9c4.1-0.5,3.1,5.1,7.3,3.9c2.3-0.6,3-2.3,4.7-0.2 C23,4,22.3,5.6,22.6,6c0.4,0.5,2.3,0.4,2.9,0.4c6,0.7,12.3,0.8,18.4,0.9c6.8,0.1,26.7-5.7,28.2,4.2c0.8,4.9-1.3,10.8-1.5,15.8 c-0.1,2.6,0.5,5,0.6,7.6c0.1,2.9-1.4,4.9-1.6,7.6c-0.1,1.5,0.9,3.5,0.6,4.8c-0.1,0.4-1.2,4-1.4,4.2c-0.6,0.8-1.8,2.4-3.3,1.2 c-1.3-1,1.1-4.2,1.3-5.9c0.6-4.4-1.7-8.8-3.1-12.8c-0.3-1-1.4-5.1-3.3-4.2c-1.1,0.5,0.3,6.2,0,7.4c-0.9,3.5-3.3,7.2-4.6,10.7 c-0.7,2.1-0.9,4.2-3.6,4.3c-2.9,0.2-1.7-0.8-0.8-2.8c2.2-4.7,4.2-9.6,3.4-15c-0.8-5.7-3.1-1.6-6.9-0.6c-2.5,0.7-5.5,0.2-8-0.2 c-1.4-0.2-5.1-1.9-6.4-1c-1.3,0.9-0.7,6.7-0.9,8.2c-0.4,2.9-0.1,5.7-0.3,8.6c0,0.7-0.4,3.5-1.1,4c-3,1.8-2.9-0.7-2.8-2.3 c0.1-3.4,0.5-6.1-0.1-9.5c-0.3-1.8,0-6.6-1.4-8c-1.4,0.8-1.8,10.9-1.7,12.3c0,2,0.3,6.7-1.7,7.6c-0.6,0.3-2.4,0.1-2.8-0.4 c-0.7-1,0.4-1.4,0.6-2.4c0.5-2.6,1-5.4,1-8.1c0-1.4,0.1-6-0.6-7.1c-0.9-1.3-2.8-1.3-4.2-2.5C13.9,30,14.1,25,12.7,21 c-1.1-3.1-1.3-1.3-4.2-1.8c-0.9-0.2-5.5-1.6-6.3-2.3c-4-3.7,3.6-5,2.5-8C4.3,8,1.1,7.4,0.3,5.7C-0.7,3.5,0.7,2.4,3.3,2.8z"

-Cow2 = "M72,5.7c-0.8,1.7-3.9,2.3-4.3,3.2c-1.1,3,6.5,4.3,2.5,8c-0.8,0.7-5.4,2.2-6.3,2.3c-2.9,0.5-3.1-1.4-4.2,1.8 c-1.4,4-1.3,9-4.7,12.1c-1.4,1.2-3.3,1.2-4.2,2.5c-0.7,1.1-0.6,5.7-0.6,7.1c0,2.7,0.5,5.4,1,8.1c0.2,1,1.3,1.4,0.6,2.4 c-0.4,0.5-2.3,0.7-2.8,0.4c-1.9-1-1.7-5.6-1.7-7.6c0-1.4-0.3-11.4-1.7-12.3c-1.5,1.4-1.1,6.1-1.4,8c-0.6,3.4-0.3,6.1-0.1,9.5 c0.1,1.6,0.2,4.1-2.8,2.3c-0.7-0.4-1.1-3.3-1.1-4c-0.2-2.9,0.1-5.7-0.3-8.6c-0.2-1.5,0.4-7.2-0.9-8.2c-1.2-0.9-4.9,0.8-6.4,1 c-2.5,0.4-5.5,0.8-8,0.2c-3.9-1-6.1-5.2-6.9,0.6c-0.7,5.4,1.2,10.2,3.4,15c0.9,1.9,2.1,2.9-0.8,2.8c-2.7-0.2-2.9-2.3-3.6-4.3 c-1.2-3.5-3.7-7.2-4.6-10.7c-0.3-1.2,1-6.9,0-7.4C9.9,28.9,8.9,33,8.5,34c-1.4,4-3.8,8.4-3.1,12.8c0.2,1.7,2.7,4.9,1.3,5.9 c-1.5,1.2-2.7-0.4-3.3-1.2c-0.2-0.2-1.3-3.8-1.4-4.2c-0.2-1.4,0.7-3.4,0.6-4.8c-0.2-2.7-1.7-4.7-1.6-7.6c0.1-2.6,0.7-4.9,0.6-7.6 c-0.2-5-2.3-10.9-1.5-15.8c1.5-9.9,21.4-4.1,28.2-4.2c6.1-0.1,12.4-0.2,18.4-0.9c0.6-0.1,2.5,0.1,2.9-0.4C50,5.6,49.3,4,49.5,3.7 c1.7-2,2.4-0.4,4.7,0.2c4.2,1.2,3.1-4.4,7.3-3.9c0.8,0.1,2.4,2.5,3,2.9c2.5,1.3,1.8,0.4,4.5,0C71.7,2.4,73,3.5,72,5.7z"

//// HTML ////

#stage
  //M00THERSHIP
  svg#ship(viewBox=Vb)
    //UDDER
    path.udder(d=Udder)
    //UFO
    path.ufo.one(d=Ufo1)
    path.ufo.two(d=Ufo2)
    path.ufo.thr(d=Ufo3)
    path.ufo.fou(d=Ufo4)
    //LIGHTS
    path.light(d=Light1)
    path.light(d=Light2)
    path.light(d=Light3)
    path.light(d=Light4)
    path.light(d=Light5)
    path.light(d=Light6)
    path.light(d=Light7)
  //COWS
  svg#cow
    path.cow.one(d=Cow)
    path.cow.two(d=Cow2)
    path.cow.thr(d=Cow)
    path.cow.fou(d=Cow2)
    path.cow.fiv(d=Cow)
    path.cow.six(d=Cow2)
  //SHADOW HALO
  svg#under(viewBox=Vb)
    path.shdw(d=Shadow)
    path.halo(d=Halo)

//// VARIABLES ////

clr1 = #ECE157
clr2 = #E56070
clr3 = #00A676
clr4 = #26A9BD

center(w, h)
  width w px
  height h px
  top 50%
  left 50%
  margin-top (- h / 1.75 px)
  margin-left (- w / 2 px)
  position absolute

//// STYLES ////

/*! CONTAINER */

#stage
  center(500, 600)
  overflow visible

/*! SHAPES */

//M00THERSHIP
#ship
  position absolute
  overflow visible
  width 450px
  left 20px
  top 20px
  z-index 2

//UDDER
.udder
  fill desaturate(lighten(clr2,20%),10%)

//UFO
.ufo
  fill clr4
  &.one
    fill desaturate(lighten(clr4,20%),60%)
  &.two
    fill desaturate(lighten(clr4,40%),60%)
  &.thr
    fill desaturate(lighten(clr4,5%),65%)  
  &.fou
    fill desaturate(lighten(clr2,14%),10%)
    
.light
  fill lighten(clr1, 50%)

//COWS
#cow
  position absolute
  overflow visible
  width 75px
  height 55px
  
.cow
  visibility hidden
  fill #AAA
  &:nth-child(even)
    fill #CCC
    

//SHADOW HALO
#under
  overflow visible

.halo
  stroke lighten(clr1, 50%)
  stroke-width 6px
  fill none
  opacity 0.8

.shdw
  fill darken(lighten(desaturate(navy,90%),10%),24%)

/*! //// */

body
  padding 0
  margin 0
  overflow hidden
  background darken(lighten(desaturate(navy,90%),10%),20%)

//// GSAP VARIABLES ////

var Stage = $('#stage');
var Lights = $('.light');
var Halo = $('.halo');

var C1 = $('.cow.one');
var C2 = $('.cow.two');
var C3 = $('.cow.thr');
var C4 = $('.cow.fou');
var C5 = $('.cow.fiv');
var C6 = $('.cow.six');

//// SNAP VARIABLES ////

var s = Snap('#ship');
var path = s.select('.udder');

  /////////////
 /// GSAP ////
/////////////

//// FLOAT TIMELINE ////

tlf = new TimelineMax({repeat:-1});
tlf.to(Stage, 5, {bezier:[{x:14, y:15}, {x:0, y:30}, {x:-15, y:15}, {x:0, y:0}], ease:Linear.easeNone});

//// BLINK TIMELINE ////

tlb = new TimelineMax({repeat:-1,yoyo:true});
tlb.staggerFrom(Halo, 0.2, {opacity: 0.4,ease: Power1.ease},0.2);
tlb.staggerTo(Lights, 0.2, {fill: "#9BC294",ease: Power1.ease},0.2);


//// MAIN TIMELINE ////

var tl = new TimelineMax();

// SET COWS IN PLACE
tl.set(C1, {x:120, y:260, rotation:140, scale: 0.15, visibility: "visible"});
tl.set(C2, {x:140, y:340, rotation:150, scale: 0.15, visibility: "visible"});
tl.set(C3, {x:220, y:380, rotation:160, scale: 0.15, visibility: "visible"});
tl.set(C4, {x:300, y:380, rotation:180, scale: 0.15, visibility: "visible"});
tl.set(C5, {x:380, y:340, rotation:190, scale: 0.15, visibility: "visible"});
tl.set(C6, {x:420, y:280, rotation:200, scale: 0.15, visibility: "visible"});

// MORPH STEP1
tl.to(Stage, 0.35, {onStart: function() {frame1();}});

// MORPH STEP2
tl.to(Stage, 0.65, {onStart: function() {frame2();}});
  
// SHOOT THE COWS !!!
tl.to(C1, 3, {scale: 6, x:-1080, y:900, rotation:-320, ease: SlowMo.ease.config(0.7, 0.3, false)}, "-=0.95");
tl.to(C2, 3, {scale: 5, x:-580, y:900, rotation:-220, ease: SlowMo.ease.config(0.7, 0.3, false)}, "-=3");
tl.to(C3, 3, {scale: 4, x:100, y:900, rotation:-120, ease: SlowMo.ease.config(0.7, 0.3, false)}, "-=3");     
tl.to(C4, 3, {scale: 4, x:480, y:900, rotation:-180, ease: SlowMo.ease.config(0.7, 0.3, false)}, "-=3");
tl.to(C5, 3, {scale: 5, x:980, y:900, rotation:-220, ease: SlowMo.ease.config(0.7, 0.3, false)}, "-=3");
tl.to(C6, 3, {scale: 6, x:1480, y:900, rotation:-320, ease: SlowMo.ease.config(0.7, 0.3, false)}, "-=3");
  
// MORPH STEP3
tl.to(Stage, 0.15, {onStart: function() {frame3();},onComplete: function() {tl.restart();}});

  /////////////
 /// SNAP ////
/////////////

// MORPH STEP1
function frame1() {
path.animate({'path': 'M411,233.5c-5.1-3-40.6-26-53.3-37c-6.3-28.5-16.9-50-16.9-50h-220c0,0-10.6,21.7-16.6,50.4 c-12.3,10.6-46.8,42.7-51.6,45.5c-9.4,5.5-14.7,16.3-12.6,26.9c0.9,4.6,3.1,9.4,7.6,13.9c4.5,4.5,9.4,6.7,14,7.6 c8,1.5,36.1-21,42.1-26.1c1.4,5.1,3.2,10.2,5.4,15.1c-4.7,8.7-28.9,36.1-31,38.9c-6.6,8.6-7.5,20.6-1.6,29.7 c2.5,3.9,6.4,7.6,12.3,10c5.8,2.5,11.2,2.7,15.9,1.8c10.9-2.2,29.8-33.8,41-42.3c6.7,3.7,14.3,6.9,22.9,9.5 c-0.8,8.8-1.7,46.2-2.5,49.3c-2.7,10.5,1.1,21.9,10.1,28c3.9,2.6,8.9,4.5,15.2,4.5c6.4,0,11.4-1.9,15.3-4.5 c9.2-6.3,13.2-17.9,10.7-28.7c-0.5-2.1-1-36-1.6-40.8c5,0.3,10.2,0.4,15.7,0.4c5.7,0,11.1-0.2,16.3-0.4c-0.5,4.8-1.1,38.7-1.6,40.8 c-2.6,10.9,1.4,22.4,10.7,28.7c3.9,2.7,9,4.5,15.3,4.5c6.4,0,11.3-1.8,15.2-4.5c9-6.1,12.8-17.4,10.1-28c-0.8-3.1-1.7-40.6-2.6-49.5 c8.6-2.7,22.9-9.7,22.9-9.7c0,0.1,0,0.3,0.1,0.4c8.6,6.5,30.1,40.1,41,42.3c4.7,0.9,10,0.7,15.9-1.8c5.8-2.5,9.7-6.1,12.3-10 c5.9-9.1,5-21.1-1.6-29.7c-2.2-2.9-26.7-30.8-31.6-39.9c2-4.6,3.6-9.3,4.9-14c6.1,5.8,34.7,18.7,43.3,17.1c4.7-0.9,9.5-3.1,14-7.6 c4.5-4.5,6.7-9.3,7.6-13.9C425.7,249.7,420.4,239,411,233.5z'}, 1200, mina.elastic);
};

// MORPH STEP2
function frame2() {
path.animate({'path': 'M391,223.5c-5.1-3-20.6-16-33.3-27c-6.3-28.5-16.9-50-16.9-50h-220c0,0-10.6,21.7-16.6,50.4 c-12.3,10.6-26.8,22.7-31.6,25.5c-9.4,5.5-14.7,16.3-12.6,26.9c0.9,4.6,3.1,9.4,7.6,13.9c4.5,4.5,9.4,6.7,14,7.6 c8,1.5,16.1-1,22.1-6.1c1.4,5.1,3.2,10.2,5.4,15.1c-4.7,8.7-8.9,16.1-11,18.9c-6.6,8.6-7.5,20.6-1.6,29.7c2.5,3.9,6.4,7.6,12.3,10 c5.8,2.5,11.2,2.7,15.9,1.8c10.9-2.2,19.2-11.3,21-22.3c6.7,3.7,14.3,6.9,22.9,9.5c-0.8,8.8-1.7,16.2-2.5,19.3 c-2.7,10.5,1.1,21.9,10.1,28c3.9,2.6,8.9,4.5,15.2,4.5c6.4,0,11.4-1.9,15.3-4.5c9.2-6.3,13.2-17.9,10.7-28.7c-0.5-2.1-1-6-1.6-10.8 c5,0.3,10.2,0.4,15.7,0.4c5.7,0,11.1-0.2,16.3-0.4c-0.5,4.8-1.1,8.7-1.6,10.8c-2.6,10.9,1.4,22.4,10.7,28.7c3.9,2.7,9,4.5,15.3,4.5 c6.4,0,11.3-1.8,15.2-4.5c9-6.1,12.8-17.4,10.1-28c-0.8-3.1-1.7-10.6-2.6-19.5c8.6-2.7,16.2-5.9,22.9-9.7c0,0.1,0,0.3,0.1,0.4 c1.9,11,10.1,20.1,21,22.3c4.7,0.9,10,0.7,15.9-1.8c5.8-2.5,9.7-6.1,12.3-10c5.9-9.1,5-21.1-1.6-29.7c-2.2-2.9-6.7-10.8-11.6-19.9 c2-4.6,3.6-9.3,4.9-14c6.1,5.8,14.7,8.7,23.3,7.1c4.7-0.9,9.5-3.1,14-7.6c4.5-4.5,6.7-9.3,7.6-13.9C405.7,239.7,400.4,229,391,223.5z'}, 1800, mina.elastic);
};

// MORPH STEP3
function frame3() {
path.animate({'path': 'M431,253.5c-5.1-3-60.6-46-73.3-57c-6.3-28.5-16.9-50-16.9-50h-220c0,0-10.6,21.7-16.6,50.4 c-12.3,10.6-66.8,62.7-71.6,65.5c-9.4,5.5-14.7,16.3-12.6,26.9c0.9,4.6,3.1,9.4,7.6,13.9c4.5,4.5,9.4,6.7,14,7.6 c8,1.5,56.1-41,62.1-46.1c1.4,5.1,3.2,10.2,5.4,15.1c-4.7,8.7-38.9,66.1-41,68.9c-6.6,8.6-7.5,20.6-1.6,29.7 c2.5,3.9,6.4,7.6,12.3,10c5.8,2.5,11.2,2.7,15.9,1.8c10.9-2.2,39.8-63.8,51-72.3c6.7,3.7,14.3,6.9,22.9,9.5 c-0.8,8.8-1.7,76.2-2.5,79.3c-2.7,10.5,1.1,21.9,10.1,28c3.9,2.6,8.9,4.5,15.2,4.5c6.4,0,11.4-1.9,15.3-4.5 c9.2-6.3,13.2-17.9,10.7-28.7c-0.5-2.1-1-66-1.6-70.8c5,0.3,10.2,0.4,15.7,0.4c5.7,0,11.1-0.2,16.3-0.4c-0.5,4.8-1.1,68.7-1.6,70.8 c-2.6,10.9,1.4,22.4,10.7,28.7c3.9,2.7,9,4.5,15.3,4.5c6.4,0,11.3-1.8,15.2-4.5c9-6.1,12.8-17.4,10.1-28c-0.8-3.1-1.7-70.6-2.6-79.5 c8.6-2.7,22.9-9.7,22.9-9.7c0,0.1,0,0.3,0.1,0.4c8.6,6.5,50.1,70.1,61,72.3c4.7,0.9,10,0.7,15.9-1.8c5.8-2.5,9.7-6.1,12.3-10 c5.9-9.1,5-21.1-1.6-29.7c-2.2-2.9-46.7-60.8-51.6-69.9c2-4.6,3.6-9.3,4.9-14c6.1,5.8,54.7,38.7,63.3,37.1c4.7-0.9,9.5-3.1,14-7.6 c4.5-4.5,6.7-9.3,7.6-13.9C445.7,269.7,440.4,259,431,253.5z'}, 1000, mina.elastic);
};