// ==============================
// Variables
// ==============================

$blueby: #0b84d0;
$gramy: #eee;
$greeny: #a4d00b;


// ==============================
// Utilities
// ==============================

@mixin button-reset {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

//css-tricks.com/places-its-tempting-to-use-display-none-but-dont/

@mixin visually-hidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; 
  width: 1px; 
  margin: -1px; 
  padding: 0; 
  border: 0; 
}


// ==============================
// Modernizr
// ==============================

// Modernizr mixin to create .modernizr selector
// http://codepen.io/sturobson/pen/xcdha

@mixin modernizr($property, $support: true) {
  
    @if $support == true {
      
        .#{$property} & {
            @content;
        }
      
    }
  
    @else {
      
        .no-#{$property} & {
            @content;
        }
      
    }
  
}


// ==============================
// Bubbbles
// ==============================

.bubbles {
  margin-top: -4em;
  margin-bottom: -1em;
  
  circle {
    opacity: 0;
    transform: scale(0);
    
    @for $i from 1 through 16 {
      
      &:nth-of-type(#{$i}) {
        animation: 
          inflate .2s ($i * .05s) forwards,
          undulate 2s (random(100) * .05s) alternate infinite;
      }
      
    }
    
  }
  
}

@keyframes inflate {
  
  100% {
    opacity: 1;
    transform: scale(1);
  }
  
}

@keyframes undulate {
  
  0% {
    transform: scale(1);
  }
  
  100% {
    transform: scale(.985);
  }
  
}


// ==============================
// Juju
// ==============================

.assistant {
  margin: 0 auto;
  white-space: nowrap;
  border-radius: .25em;
  
  @include modernizr(cssanimations) {
    width: 45vmin;
    animation: expand 1s 2s forwards;
  }
  
}

@keyframes expand {

  100% {
    padding: 0 0 0 2%;
    width: 100%;
  }
  
}

  .juju {
    display: inline-block;
    vertical-align: middle;
    width: 20%;
    
    @include modernizr(cssanimations) {
      width: 100%;
      animation: 
        wiggle-reveal 1s 1s forwards,
        slide-left 1s 2s forwards;
      opacity: 0;
      transform: scale(.5);
    }
    
  }

  @keyframes wiggle-reveal {
    
    30% {
      transform: scale(1);
    }
    
    60%,
    80% {
      opacity: 1;
      transform: rotate(5deg);
    }
    
    70%,
    90% {
      transform: rotate(-5deg);
    }
    
    100% {
      opacity: 1;
      transform: rotate(0);
    }
    
  }

  @keyframes slide-left {

    40%,
    100% {
      width: 20%;
    }

  }


  .label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
    letter-spacing: .025em;
    
    @include modernizr(cssanimations) {
      overflow: hidden;
      width: 0;
      animation: dictate 2s 3s forwards;
    }
    
  }

  @keyframes dictate {
    
    100% {
      width: 68%;  
    }
    
  }


// ==============================
// You
// ==============================

.you {
  text-align: center;
}


// ==============================
// Speech Trigger
// ==============================

.speech-trigger {
  @include button-reset;
  display: inline-block;
  height: 2.25em;
  width: 2.25em;
  animation: wiggle-reveal 1s 4s forwards;
  background: $greeny;
  border-radius: 100%;
  color: transparent;
  opacity: 0;
  transform-origin: left center;
  transform: scale(0);
  transition: box-shadow .2s;
  
  &:before {
    position: absolute;
    top: 15%;
    right: 15%;
    display: block;
    height: 100%;
    width: 100%;
    content: '';
    animation: pulsate 3s 6s infinite;
    background: $blueby;
    background: rgba($blueby, .5);
    border-radius: 100%;
    transform: scale(0);
  }
  
  &:after {
    display: block;
    content: '\f130';
    font-family: 'FontAwesome';
    font-size: 1.25em;
    color: $gramy;
  }
  
  &:hover {
    box-shadow: 0 0 0 .25em lighten($greeny, 5%);
    
    &:before {
      animation: none;  
    }
    
  }
  
  em {
    @include visually-hidden;
  }
  
}


@keyframes fluctuate {
  
  25%,
  85% {
    box-shadow: 0 0 0 .25em lighten($gramy, 10%);
  }
  
  50%,
  100% {
    box-shadow: 0 0 0 .5em darken($gramy, 10%);
  }
  
}

@keyframes pulsate {
  
  30%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
  
}









// ==============================
// Resets
// ==============================

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

*:before,
*:after { 
  pointer-events: none; 
}


// ==============================
// Structure
// ==============================

html { 
  height: 100%;
  font-family: 'Comfortaa';
  font-size: 3.75vmin;
  background: $gramy;
  color: $greeny;
}


// ==============================
// Headings
// ==============================

h1, h2, h3, h4 {
  margin-top: 0;
}