@import 'includes/mixins';

/* 404 - Animate the tumbeast's eyes. Original animation by J Zeller. */
@keyframes crazylefteye {
    0%     { left: 125px; top: 65px; }
    10%    { left: 118px; top: 56px; }
    20%    { left: 118px; top: 56px; }
    40%    { left: 148px; top: 62px; }
    50%    { left: 145px; top: 72px; }
    60%    { left: 121px; top: 70px; }
    70%    { left: 125px; top: 65px; }
    100% { left: 125px; top: 65px; }
}

@keyframes crazyrighteye {
    0%     { left: 231px; top: 68px; }
    10%    { left: 212px; top: 62px; }
    20%    { left: 212px; top: 62px; }
    40%    { left: 239px; top: 64px; }
    50%    { left: 240px; top: 80px; }
    60%    { left: 215px; top: 73px; }
    70%    { left: 231px; top: 68px; }
    100% { left: 231px; top: 68px; }
}

/* Take $grid-spacing away from the margin of .beast and (later) give it to the
   padding #beastainer instead so that the eye positions can be relative to
   .beast without accounting for the margin. */
.beast {
    margin: 0;
}

#beastainer {
    float: right;
    padding: $grid-spacing 0 $grid-spacing $grid-spacing;
    position: relative;
}

#beast404re, #beast404le {
    position: absolute;
    vendorize(animation-delay, 6s);
    vendorize(animation-duration, 7s);
    vendorize(animation-iteration-count, infinite);
    vendorize(animation-play-state, running);
}

#beast404re {
    left: 231px;
    top: 68px;
    vendorize(animation-name, crazyrighteye);
}

#beast404le {
    left: 125px;
    top: 65px;
    vendorize(animation-name, crazylefteye);
}
