/* Copyright (c) 2015, the Dart project authors.  Please see the AUTHORS file
 * for details. All rights reserved. Use of this source code is governed by a
 * BSD-style license that can be found in the LICENSE file. */

iframe {
  /* We would use display: none here, but then Firefox fails to properly compute
   * styles. See #274 */
  visibility: hidden;
  width: 1024px;
  height: 768px;
}

#play {
  display: none;
  cursor: pointer;
}

#dark {
  display: none;
}

.paused #play {
  display: block;
  z-index: 1;
}

.paused #dark {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.paused #right-flank, .paused #right-ear, .paused #right-paw,
.paused #left-flank,  .paused #left-ear,  .paused #left-paw {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.debug body {
  margin: 0;
  padding: 0;
}

.debug iframe {
  visibility: visible;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Compiled output from
 * http://codepen.io/mknadler/pen/11b75cb014a3c382f54abf527655af21. */

svg {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

#right-flank {
  fill: #0074C1;
  stroke-color: #0074C1;
  -webkit-animation: right-flank 8s ease infinite alternate;
          animation: right-flank 8s ease infinite alternate;
}

#right-ear {
  fill: #00B5AB;
  stroke-color: #00B5AB;
  -webkit-animation: right-ear 8s ease-in infinite alternate;
          animation: right-ear 8s ease-in infinite alternate;
}

#right-paw {
  fill: #00A6E4;
  stroke-color: #00A6E4;
  -webkit-animation: right-paw 8s ease-out infinite alternate;
          animation: right-paw 8s ease-out infinite alternate;
}

#left-flank {
  fill: #00B5AB;
  stroke-color: #00B5AB;
  -webkit-animation: left-flank 8s ease-in-out infinite alternate;
          animation: left-flank 8s ease-in-out infinite alternate;
}

#left-ear {
  fill: #0074C1;
  stroke-color: #0074C1;
  -webkit-animation: left-ear 8s linear infinite alternate;
          animation: left-ear 8s linear infinite alternate;
}

#left-paw {
  fill: #41C1BC;
  stroke-color: #41C1BC;
  -webkit-animation: left-paw 8s ease infinite alternate;
          animation: left-paw 8s ease infinite alternate;
}

@-webkit-keyframes left-ear {
  20% {
    -webkit-transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
            transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
    fill: #00A6E4;
  }
  50% {
    -webkit-transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
            transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
    fill: #41C1BC;
  }
  80% {
    -webkit-transform: translate(0px, 0px) scale(1);
            transform: translate(0px, 0px) scale(1);
    fill: #0074C1;
  }
}

@keyframes left-ear {
  20% {
    -webkit-transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
            transform: translate(250px, 150px) rotateY(180deg) scale(0.6);
    fill: #00A6E4;
  }
  50% {
    -webkit-transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
            transform: translate(100px, 75px) rotateY(80deg) scale(1.1);
    fill: #41C1BC;
  }
  80% {
    -webkit-transform: translate(0px, 0px) scale(1);
            transform: translate(0px, 0px) scale(1);
    fill: #0074C1;
  }
}
@-webkit-keyframes right-ear {
  20% {
    -webkit-transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
            transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
    fill: #41C1BC;
  }
  50% {
    -webkit-transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
            transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
    fill: #00A6E4;
  }
  80% {
    -webkit-transform: translate(0px, 0px) scale(1);
            transform: translate(0px, 0px) scale(1);
    fill: #00B5AB;
  }
}
@keyframes right-ear {
  20% {
    -webkit-transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
            transform: translate(200px, 250px) rotateX(180deg) scale(0.6);
    fill: #41C1BC;
  }
  50% {
    -webkit-transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
            transform: translate(75px, 100px) rotateX(80deg) scale(1.1);
    fill: #00A6E4;
  }
  80% {
    -webkit-transform: translate(0px, 0px) scale(1);
            transform: translate(0px, 0px) scale(1);
    fill: #00B5AB;
  }
}
@-webkit-keyframes left-paw {
  20% {
    -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6);
            transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6);
    fill: #00B5AB;
  }
  50% {
    -webkit-transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6);
            transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6);
    fill: #00B5AB;
  }
  80% {
    -webkit-transform: translate(0px, 0px) scale(1);
            transform: translate(0px, 0px) scale(1);
    fill: #41C1BC;
  }
}
@keyframes left-paw {
  20% {
    -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6);
            transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, 60deg) scale(0.6);
    fill: #00B5AB;
  }
  50% {
    -webkit-transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6);
            transform: translate(150px, 250px) rotate3d(-1, 0, 0.5, 90deg) scale(0.6);
    fill: #00B5AB;
  }
  80% {
    -webkit-transform: translate(0px, 0px) scale(1);
            transform: translate(0px, 0px) scale(1);
    fill: #41C1BC;
  }
}
@-webkit-keyframes right-paw {
  20% {
    -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6);
            transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6);
    fill: #41C1BC;
  }
  50% {
    -webkit-transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6);
            transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6);
    fill: #41C1BC;
  }
  80% {
    -webkit-transform: translate(0px, 0px) scale(1);
            transform: translate(0px, 0px) scale(1);
    fill: #00A6E4;
  }
}
@keyframes right-paw {
  20% {
    -webkit-transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6);
            transform: translate(200px, 200px) rotate3d(-1, 0, 0.5, -60deg) scale(0.6);
    fill: #41C1BC;
  }
  50% {
    -webkit-transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6);
            transform: translate(100px, 250px) rotate3d(-1, 0, 0.5, -90deg) scale(0.6);
    fill: #41C1BC;
  }
  80% {
    -webkit-transform: translate(0px, 0px) scale(1);
            transform: translate(0px, 0px) scale(1);
    fill: #00A6E4;
  }
}
@-webkit-keyframes left-flank {
  20% {
    -webkit-transform: translate(0px, 100px) scale(0.6);
            transform: translate(0px, 100px) scale(0.6);
    fill: #00A6E4;
  }
  50% {
    -webkit-transform: translate(0px, 100px) scale(0.4);
            transform: translate(0px, 100px) scale(0.4);
    fill: #00A6E4;
  }
  80% {
    -webkit-transform: translate(0px, 0px) scale(1);
            transform: translate(0px, 0px) scale(1);
    fill: #00B5AB;
  }
}
@keyframes left-flank {
  20% {
    -webkit-transform: translate(0px, 100px) scale(0.6);
            transform: translate(0px, 100px) scale(0.6);
    fill: #00A6E4;
  }
  50% {
    -webkit-transform: translate(0px, 100px) scale(0.4);
            transform: translate(0px, 100px) scale(0.4);
    fill: #00A6E4;
  }
  80% {
    -webkit-transform: translate(0px, 0px) scale(1);
            transform: translate(0px, 0px) scale(1);
    fill: #00B5AB;
  }
}
@-webkit-keyframes right-flank {
  20% {
    -webkit-transform: translate(100px, -25px) scale(0.6);
            transform: translate(100px, -25px) scale(0.6);
    fill: #41C1BC;
  }
  50% {
    -webkit-transform: translate(110px, 0px) scale(0.4);
            transform: translate(110px, 0px) scale(0.4);
    fill: #00A6E4;
  }
  80% {
    -webkit-transform: translate(0px, 0px) scale(1);
            transform: translate(0px, 0px) scale(1);
    fill: #0074C1;
  }
}
@keyframes right-flank {
  20% {
    -webkit-transform: translate(100px, -25px) scale(0.6);
            transform: translate(100px, -25px) scale(0.6);
    fill: #41C1BC;
  }
  50% {
    -webkit-transform: translate(110px, 0px) scale(0.4);
            transform: translate(110px, 0px) scale(0.4);
    fill: #00A6E4;
  }
  80% {
    -webkit-transform: translate(0px, 0px) scale(1);
            transform: translate(0px, 0px) scale(1);
    fill: #0074C1;
  }
}