%main{:rel => 'main'}
  %section{:role => 'presentation'}
    %header
    %article
    %button
%p.credit 
  Designed by 
  %a{:href => 'https://dribbble.com/bendunn'}Ben Dunn 
  and coded by 
  %a{:href => 'https://codepen.io/Michiel/'}Michiel Bijl

// Some vars
$animation-duration: 4s;

$background-color:  #d55084;
$window-top:        #3c3e99;
$window-bar:        #4c54a4;
$window-content:    #fff;
$window-background: #efeff3;
$button-color:      #e20269;

$window-width:   140px, 400px, 560px;
$window-height:  250px, 300px, 370px;
$content-width:  140px, 270px, 290px;
$content-height: 220px, 220px, 225px;
$header-height:  30px, 90px, 105px;
$header-border:  7px, 12px, 14px;
$button-size:    20px, 26px, 26px;

// Card
section {
  position: relative;
  width: nth($window-width, 1);
  height: nth($window-height, 1);
  background-color: $window-background;
  animation: window forwards $animation-duration infinite;
  overflow: hidden;
  
  > * {
    position: absolute;
  }
}

header {
  top: 0;
  left: 0;
  width: 100%;
  height: nth($header-height, 1);
  border-top: nth($header-border, 1) solid $window-top;
  background-color: $window-bar;
  animation: header forwards $animation-duration infinite;
}

article {
  top: 30px;
  left: 50%;
  width: nth($content-width, 1);
  height: nth($content-height, 1);
  box-shadow: 0 2px 4px rgba(100,100,100,.1);
  background-color: $window-content;
  transform: translateX(-50%);
  animation: article forwards $animation-duration infinite;
  
  // medium
  &::after {
    position: absolute;
    top: 100%;
    margin-top: 15px;
    width: 100%;
    height: 100px; // 30px on small, 95px on large
    background-color: $window-content;
    box-shadow: 0 2px 4px rgba(100,100,100,.1);
    content: '';
  }
}

button {
  position: absolute;
  right: 10px;
  top: (nth($window-height, 1) - 20px * 1.5);
  margin: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 100%;
  box-shadow: inset 0 0 1px rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.2);
  -webkit-appearance: none;
  background-color: $button-color;
  animation: button forwards $animation-duration infinite;
}

// Animations
@keyframes window {
  0%, 15%, 90% {
    width: nth($window-width, 1);
    height: nth($window-height, 1);
  }
  
  30%, 45% {
    width: nth($window-width, 2);
    height: nth($window-height, 2);
  }
  
  60%, 75% {
    width: nth($window-width, 3);
    height: nth($window-height, 3);
  }
}

@keyframes header {
  0%, 15%, 90% {
    width: 100%;
    height: nth($header-height, 1);
    border-top-width: nth($header-border, 1);
  }
  
  30%, 45% {
    height: nth($header-height, 2);
    border-top-width: nth($header-border, 2);
  }
  
  60%, 75% {
    height: nth($header-height, 3);
    border-top-width: nth($header-border, 3);
  }
}

@keyframes article {
  0%, 15%, 90% {
    top: $window-bar;
    width: nth($content-width, 1);
    height: nth($content-height, 1);
  }
  
  30%, 45% {
    top: 35px;
    width: nth($content-width, 2);
    height: nth($content-height, 2);
  }
  
  60%, 75% {
    top: 35px;
    width: nth($content-width, 3);
    height: nth($content-height, 3);
  }
}

@keyframes button {
  0%, 15%, 90% {
    right: 10px;
    top: (nth($window-height, 1) - 20px * 1.5);
    width: nth($button-size, 1);
    height: nth($button-size, 1);
  }
  
  30%, 45% {
    right: 20px;
    top: (nth($header-height, 2) - 26px * .5);
    width: nth($button-size, 2);
    height: nth($button-size, 2);
  }
  
  60%, 75% {
    right: 25px;
    top: (nth($header-height, 3) - 26px * .5);
    width: nth($button-size, 3);
    height: nth($button-size, 3);
  }
}

// Unimportant bits
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $background-color;
}

.credit {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 20px;
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-family: Avenir Next, Helvetica Neue, sans-serif;
  
  // The CodePen preview/thumbnail window is about 300px-500px in height
  @media (min-height: 500px) {
    display: block;
  }
  
  a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px dashed rgba(255,255,255,.3);
    transition: border-color ease-out .15s;
  
    &:focus,
    &:hover {
      border-bottom-color: #fff;
    }
  }
}

// based on this Dribbble: https://dribbble.com/shots/1717947-Keynote-Animation-Material-Design