@import '../node_modules/sass-svg/index';

$husky-colors: (
  'bg': #4F8EDB,
  'primary': #383B44,
  'white': white,
  'light': #A3ADBB,
  'lighter': #B9C4D3,
  'dark': darken(#383B44, 5%),
  'ear': #DE6465,
  'eye': #5D8BC3,
  'tongue': #DE6465,
  'snow': mix(white, #4F8EDB, 80%)
);

@function husky-color($name) {
  @return map-get($husky-colors, $name);
}

$duration: 12s;
$total-kf: 15;

$k-head: (
  0: rotate(0),
  1: rotate(0),
  3: rotate(-14deg),
  6: rotate(-7deg),
  7: rotate(-14deg),
  9: rotate(-7deg),
  11: rotate(0),
  12: rotate(0)
);

$k-mouth: (
  0: translateX(0),
  1: translateX(0),
  2: translateX(35%),
  3: translateX(35%),
  4: translateX(35%),
  5: translateX(0) translateY(-5%)
);

$k-nose: (
  0: translate(0),
  1: translate(0),
  2: translateX(100%),
  4: translateX(100%),
  5: translateX(0) translateY(-15%)
);

$k-body: (
  0: translate(0),
  1: translateY(3%),
  2: translate(0),
  3: translate(0),
  4: translateY(2%),
  5: translateY(0),
);

$k-mane: map-merge($k-body, (
  1: translateY(5%),
  4: translateY(3%)
));

$k-face: (
  0: translate(0),
  1: translate(0),
  2: translateX(15%),
  3: translateX(15%) translateY(0),
  4: translateX(15%) translateY(0),
  5: translateX(0) translateY(-15%),
  6: translateX(0) translateY(-15%),
  7: translateX(0) translateY(0),
);

$k-left-eye: (
  0.4: scaleY(1),
  0.5: scaleY(0.3),
  0.6: scaleY(1),
  1: translateX(0),
  1.4: scaleY(1) translateX(75%),
  1.5: scaleY(0.3) translateX(75%),
  1.6: scaleY(1) translateX(75%),
  2: translateX(150%),
  3.3: scaleY(1) translateX(150%),
  3.4: scaleY(0.3) translateX(150%),
  3.5: scaleY(1) translateX(150%),
  3.8: scaleY(1) translateX(150%),
  3.9: scaleY(0.3) translateX(150%),
  4.0: scaleY(1) translateX(150%),
  5: translateX(0) translateY(-170%),
  5.4: scaleY(1) translateY(-170%),
  5.5: scaleY(0.3) translateY(-170%),
  5.6: scaleY(1) translateY(-170%),
  5.7: scaleY(1) translateY(-170%),
  5.8: scaleY(0.3) translateY(-170%),
  5.9: scaleY(1) translateY(-170%),
  8: translateY(0),
  9.8: scaleY(1) translateY(0),
  9.9: scaleY(0.3) translateY(0),
  10.0: scaleY(1) translateY(0),
  10.5: scaleY(1) translateY(0),
  10.6: scaleY(0.3) translateY(0),
  10.7: scaleY(1) translateY(0),
);

$k-right-eye: $k-left-eye;

$k-tongue: (
  7: translateY(0),
  8: translateY(100%) rotate(10deg),
  11: translateY(100%) rotate(10deg),
  12: translateY(0)
);

$k-mouth-cover-left: (
  6: rotate(0),
  9: rotate(90deg),
  11: rotate(90deg),
  13: rotate(0)
);

$k-mouth-cover-right: (
  6: rotate(0),
  9: rotate(-90deg),
  11: rotate(-90deg),
  13: rotate(0)
);

$k-tail: (
  1: rotate(0),
  1.5: rotate(30deg),
  2: rotate(0),
  3: rotate(0),
  4: rotate(30deg),
  7: rotate(30deg),
  7.25: rotate(0),
);
$tail-wags: 14;
$tail-interval: (11 - 7.5) / $tail-wags;
@for $i from 1 through $tail-wags {
  $k-tail: map-merge($k-tail, (
    (($i - 1) * $tail-interval + 7.5): rotate(28deg),
    (($i - 0.5) * $tail-interval + 7.5): rotate(0)
  )) !global;
}

$k-left-ear: (
  0: rotate(6deg),
  1: rotate(6deg),
  2: rotate(15deg),
  4: rotate(15deg),
  5: rotate(30deg),
  6: rotate(30deg),
  7: rotate(0deg),
  8: rotate(0deg),
  9: rotate(15deg),
  12: rotate(15deg),
  14: rotate(6deg),
  $total-kf: rotateZ(6deg)
);

$k-right-ear: (
  0: rotateZ(-16deg),
  1: rotateZ(-16deg),
  2: rotateZ(-19deg),
  4: rotateZ(-19deg),
  5: rotateZ(-30deg),
  
  5.5: rotateZ(-19deg),
  5.6: rotateZ(-30deg),
  5.7: rotateZ(-19deg),
  6: rotateZ(-19deg),
  6.1: rotateZ(-30deg),
  6.2: rotateZ(-19deg),

  7: rotateZ(-9deg),
  8: rotateZ(-9deg),
  
  9: rotateZ(-19deg),
  9.1: rotateZ(-30deg),
  9.2: rotateZ(-19deg),
  9.4: rotateZ(-19deg),
  9.5: rotateZ(-30deg),
  9.6: rotateZ(-19deg),
  
  12: rotateZ(-19deg),
  14: rotateZ(-16deg),
  $total-kf: rotateZ(-16deg)
);

@each $i, $prop in $k-right-ear {
  $k-right-ear: map-merge($k-right-ear, (
    $i: $prop + ' ' + rotateY(180deg)
  ));
}

@mixin effect($name, $kf) {
  @keyframes #{$name} {
    @each $interval, $transform in $kf {
      #{percentage($interval/$total-kf)} {
        transform: $transform;
      }
    }
  }
}

@include effect('husky-head', $k-head);
@include effect('husky-mouth', $k-mouth);
@include effect('husky-nose', $k-nose);
@include effect('husky-body', $k-body);
@include effect('husky-mane', $k-mane);
@include effect('husky-face', $k-face);
@include effect('husky-left-eye', $k-left-eye);
@include effect('husky-right-eye', $k-right-eye);
@include effect('husky-tongue', $k-tongue);
@include effect('husky-mouth-cover-left', $k-mouth-cover-left);
@include effect('husky-mouth-cover-right', $k-mouth-cover-right);
@include effect('husky-tail', $k-tail);
@include effect('husky-left-ear', $k-left-ear);
@include effect('husky-right-ear', $k-right-ear);

body {
  background-color: husky-color('bg');
}

.codrops-header h1 {
	animation: squigglevision 0.3s infinite;
	animation-timing-function: cubic-bezier(0, 0, 0.80, 0.90);
}

.codrops-icon--drop:before {
  color: #3B6BA5;
}

.content--husky {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100vh;
  position: absolute;
  pointer-events: none;
  top: 0;
  width: 100%;
  margin: 0;
  padding: 3rem 0;
  animation: squigglevision 0.3s infinite;
  
  *, *:before, *:after {
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1) !important;
  }

  *:before, *:after {
    content: '';
    display: block;
    position: absolute;
  }

  &, &:before, &:after {
    background-repeat: no-repeat;
    background-size: 395vmin;
    background-position: -150vmin calc(100% + 11vmin);
  }

  &:before, &:after {  
    @include svg((height: 78, width: 500, viewBox: (0 0 500 78))) {
      @include svg('path', (
        fill: husky-color('snow'),
        d: 'M375,27c-37,0-82.5-19-125-19s-88,19-125,19S42.5,8,0,8v70h250h250V8C457.5,8,412,27,375,27z'
      ));
      @include svg('polygon', (
        fill: rgba(black, 0.5),
        points: '256.3,0 254.7,6.5 256.1,6.5 256.1,8.4 256.3,8.4 256.5,8.4 256.5,6.5 258,6.5'
      ));
      @include svg('polygon', (
        fill: rgba(black, 0.5),
        points: '252.8,0 251.2,6.5 252.6,6.5 252.6,8.4 252.8,8.4 253,8.4 253,6.5 254.4,6.5'
      ));
      @include svg('polygon', (
        fill: rgba(black, 0.5),
        points: '21.4,1.3 19.7,7.8 21.2,7.8 21.2,9.7 21.4,9.7 21.6,9.7 21.6,7.8 23,7.8'
      ));
    }
  }

  @include svg((height: 78, width: 500, viewBox: (0 0 500 78))) {
    @include svg('path', (
      fill: husky-color('snow'),
      d: 'M375,27c-37,0-82.5-19-125-19s-88,19-125,19S42.5,8,0,8v70h250h250V8C457.5,8,412,27,375,27z'
    ));
  }

  &:before {
    background-position: left bottom;
  }

  &:after {
    background-position: -100vmin bottom;

    @media (max-width: 700px) {
      background-position: -115vmin bottom;
    }
  }

  &:before, &:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    z-index: -1;
  }
}

.husky {
  animation: husky-squiggly-anim 0.3s infinite;
  height: 48vmin;
  width: 67.2vmin;
  
  @media screen and (max-width: 400px) {
    // Chrome for Android chokes
    animation: husky-none;
  }
  
  &:before {
    width: 70%;
    height: 0.4vmin;
    background: husky-color('lighter');
    border-radius: 0.4vmin;
    top: 100%;
    left: 5%;
    z-index: 2;
  }
  
  &:after {
    width: 100vw;
    left: 50%;
    height: 3rem;
    top: calc(100% + 0.4vmin);
    z-index: 3;
    background: husky-color('snow');
    transform: translateX(-50%);
  }
}

.husky-head {
  animation: husky-head $duration none infinite;
  position: absolute;
  height: 45%;
  width: 58%;
  left: 34%;
  top: 5%;
  transform-origin: bottom center;
  
  &:before {
    background: husky-color('primary');
    border-top-left-radius: 50% 40%;
    border-top-right-radius: 50% 40%;
    border-bottom-right-radius: 10% 60%;
    height: 100%;
    width: 100%;
  }
}

.husky-face {
  animation: husky-face $duration none infinite;
  position: absolute;
  width: 98%;
  height: 62%;
  top: 15%;
  left: 2%;
  
  &:before {
    z-index: 1;
    width: 94%;
    height: 70%;
    left: 3%;
    background-color: husky-color('white');
    bottom: 5%;
    border-top-left-radius: 40% 50%;
    border-top-right-radius: 40% 50%;
    border-bottom-left-radius: 30% 50%;
    border-bottom-right-radius: 30% 40%;
  }
}

.husky-eye {
  animation: husky-eyes $duration none infinite;
  position: absolute;
  width: 30%;
  height: 40%;
  background-color: husky-color('white');
  right: 45%;
  border-top-left-radius: 55% 50%;
  border-top-right-radius: 45% 50%;
  z-index: 2;
  
  &:before {
    animation: husky-left-eye $duration none infinite;
    height: 15%;
    width: 15%;
    border-radius: 100%;
    background: husky-color('eye');
    top: 45%;
    left: 45%;
    transform-origin: center center;
  }
  
  + .husky-eye {
    z-index: 1;
    right: initial;
    left: 48%;
    border-top-right-radius: 55% 50%;
    border-top-left-radius: 45% 50%;
  }
}

.husky-nose {
  animation: husky-nose $duration none infinite;
  z-index: 2;
  position: absolute;
  width: 20%;
  height: 20%;
  top: 29%;
  left: 42%;
  
  &:after {
    background: husky-color('primary');
    height: 100%;
    width: 100%;
    border-top-left-radius: 20% 20%;
    border-top-right-radius: 30% 20%;
    border-bottom-right-radius: 55% 80%;
    border-bottom-left-radius: 50% 80%;
  }
  
  &:before {
    height: 100%;
    width: 200%;
    background: husky-color('white');
    top: 50%;
    left: -50%;
    z-index: -1;
    border-radius: 50%;
  }
}

.husky-ear {
  animation: husky-left-ear $duration both infinite;
  position: absolute;
  top: 3%;
  left: -10%;
  width: 48%;
  height: 30%;
  border-bottom-left-radius: 100% 90%;
  border-top-left-radius: 10%;
  transform-origin: 80% center;
  overflow: hidden;
  background: husky-color('primary');
  
  &:before {
    width: 70%;
    height: 55%;
    border: 2px solid husky-color('primary');
    background: husky-color('ear');
    top: 20%;
    left: 15%;
    transform-origin: top left;
    transform:
      skewX(30deg)
      rotate(-5deg);
  }
  
  &:after {
    width: 70%;
    height: 100%;
    border-top-left-radius: 100%;
    background: husky-color('primary');
    left: 32%;
    transform-origin: top left;
    transform: rotate(-5deg);
  }
  
  + .husky-ear {
    animation: husky-right-ear $duration both infinite;
    background-color: husky-color('dark');
    left: 15%;
    top: 5%;
    z-index: -1;
    transform-origin: right center;
    
    &:before {
      border-color: husky-color('dark');
    }
    
    &:after {
      background: husky-color('dark');
    }
  }
}

.husky-mouth {
  z-index: 1;
  animation: husky-mouth $duration none infinite;
  position: absolute;
  width: 48%;
  height: 55%;
  bottom: -5%;
  left: 28%;
  overflow: hidden;
  
  &:before, &:after {
    animation: husky-mouth-cover-left $duration none infinite;
    width: 28%;
    height: 100%;
    background: husky-color('white');
    top: -50%;
    left: 0;
    z-index: 3;
    transform-origin: right top;
  }
  
  &:after {
    animation: husky-mouth-cover-right $duration none infinite;
    left: initial;
    right: 0;
    transform-origin: left top;
  }
}

.husky-lips {
  z-index: 2;
  height: 35%;
  width: 100%;
  
  &:before, &:after {
    background: husky-color('white');
    width: calc(50% + 1.5px);
    border-color: husky-color('light');
    border-width: 0.3vmin;
    border-style: solid;
    height: 100%;
    border-bottom-left-radius: 65% 100%;
    border-bottom-right-radius: 35% 50%;
    border-top-right-radius: 50%;
    border-right-color: transparent;
    border-top-color: transparent;
  }

  
  &:after {
    transform: rotateY(180deg);
    left: initial;    
    right: 0;
  }
}

// Firefox hack
@supports (-moz-appearance:none) and (display:contents) {
  .husky-lips {  
    &:before, &:after {
      width: calc(50% + 4px);
    }
  }
}

.husky-tongue {
  animation: husky-tongue $duration none infinite;
  position: absolute;
  height: 100%;
  width: 44%;
  background: husky-color('tongue');
  left: 25%;
  bottom: 100%;
  z-index: 1;
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 20%;
}

.husky-body {
  animation: husky-body $duration none infinite;
  width: 45%;
  height: 100%;
  position: absolute;
  left: 25%;
}

.husky-torso {
  position: absolute;
  height: 55%;
  width: 100%;
  bottom: 0;
  
  &:before {
    background: husky-color('primary');
    height: 100%;
    width: 50%;
    transform:
      translateX(-20%)
      skewX(-30deg);
    transform-origin: left bottom;
    border-radius: 0 30% 0 60%;
  }
  
  &:after {
    background: husky-color('primary');
    height: 100%;
    width: 60%;
    top: 0;
    right: 0;
    border-radius: 10% 40% 60% 0;
  }
}

.husky-mane {
  animation: husky-mane $duration none infinite;
  z-index: 2;
  position: absolute;
  width: 31.5%;
  height: 30%;
  top: 44%;
  left: 37%;
  
  &:before {    
    background: husky-color('white');
    height: 40%;
    width: 100%;
    border-top-left-radius: 10% 50%;
    border-top-right-radius: 20% 100%;
    border-bottom-left-radius: 10% 50%;
  }
  
  &:after {
    background: husky-color('white');
    top: 25%;
    height: 76%;
    width: 30%;
    right: 23%;
    border-top-right-radius: 100% 80%;
    transform: rotate(47deg);
    transform-origin: bottom right;
  }
}

.husky-coat {
  position: absolute;
  width: 50%;
  height: 50%;
  background: husky-color('white');
  transform-origin: bottom right;
  left: 10%;
  top: 21%;
  transform: rotate(25deg) skewX(-30deg) ;
}

.husky-legs {
  background-color: husky-color('primary');
  position: absolute;
  height: 30%;
  width: 42%;
  left: 23%;
  bottom: 0;
  border-top-left-radius: 20% 37%;
  border-bottom-left-radius: 10% 37%;
  border-top-right-radius: 50%;
  z-index: 1;
}

.husky-front-legs {
  position: absolute;
  width: 55%;
  height: 120%;
  bottom: 0;
  right: -12%;
  
  &:before {
    width: 4%;
    height: 6%;
    background: transparent;
    bottom: 0;
    left: 47%;
    box-shadow:
      -1.3vmin 0 0 husky-color('light'),
      -2.8vmin 0 0 husky-color('light'),
      1.3vmin 0 0 husky-color('primary'),
      2.8vmin 0 0 husky-color('primary')
      ;
    z-index: 2;
  }
  
  > .husky-leg {
    width: 51%;
    height: 100%;
    position: absolute;
    bottom: -1px;
    right: 50%;
    overflow: hidden;
    
    &:before {
      background: husky-color('lighter');
      height: 100%;
      width: 100%;
      transform: skewY(-30deg) skewX(10deg);
      transform-origin: top right;
    }
    
    + .husky-leg {
      right: 0;
      transform: rotateY(180deg);
      
      &:before {
        background: husky-color('light');
      }
    }
  }
}

.husky-hind-leg {
  position: absolute;
  background: husky-color('light');
  width: 35%;
  height: 25%;
  border-top-left-radius: 35% 100%;
  border-top-right-radius: 40% 100%;
  bottom: 0%;
  right: 45%;
  
  &:before {
    width: 6%;
    height: 20%;
    background: transparent;
    bottom: 0;
    left: 70%;
    box-shadow:
      -0.8vmin 0 0 husky-color('primary'),
      0.8vmin 0 0 husky-color('primary');
  }
}

.husky-tail {
  position: absolute;
  width: 15%;
  height: 6%;
  bottom: 0;
  right: 72%;
  background: husky-color('dark');
  z-index: 0;
  
  > .husky-tail {
    animation: husky-tail $duration none infinite;
    height: 100%;
    width: 3.2vmin;
    right: 26%;
    transform-origin: center right;
    border-top-left-radius: 50% 50%;
    border-bottom-left-radius: 50% 50%;
    transform: rotate(26deg);
    transform: rotate(0deg);
  }
  
  .husky > & {
    border-top-left-radius: 10% 50%;
    border-bottom-left-radius: 10% 50%;
  }
  
  .husky > & > & {
    right: 88%;
  }
}

.snow {
  $snow-color: rgba(white, 0.8);
  $num-snowflakes: 40;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;

  &:before, &:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;  
    z-index: 10;
    width: 1vmin;
    height: 1vmin;
    background-color: $snow-color;
    border-radius: 50%;
    animation: snow 5s linear infinite;

    $snowflakes: ();

    @for $i from 1 through $num-snowflakes {
      $top: random() * 100vh * 3;
      $left: random() * 100vw;

      $snowflakes: append($snowflakes,
        #{$left $top $snow-color},
        comma
      );

      $snowflakes: append($snowflakes,
        #{$left $top + 100vh * 3 $snow-color},
        comma
      );
    }

    box-shadow: $snowflakes;
  }

  &:after {
    width: 1.1vmin;
    height: 8px;
    animation-duration: 6s;
  }
}

@keyframes snow {
  from {
    transform: rotate(10deg)
      translateY(-300vh);
  }
  to {
    transform: rotate(10deg)
      translateY(0);
  }
}

@keyframes squigglevision {
  0% {
    -webkit-filter: url('#squiggly-0');
    filter: url('#squiggly-0');
  }
  25% {
    -webkit-filter: url('#squiggly-1');
    filter: url('#squiggly-1');
  }
  50% {
    -webkit-filter: url('#squiggly-2');
    filter: url('#squiggly-2');
  }
  75% {
    -webkit-filter: url('#squiggly-3');
    filter: url('#squiggly-3');
  }
  100% {
    -webkit-filter: url('#squiggly-4');
    filter: url('#squiggly-4');
  }
}

*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
}
