deepdev/css/bloop.css

/* Animations */
/* Props */
.bloop2x-sprite {
  background-image: url('../img/bloop2x-s3e56bf6dfc.png');
  background-repeat: no-repeat;
}

.bloop-sprite, .bloop_body, .bloop_siphon, .bloop_eye, .bloop_tentacle1, .bloop_arm5, .bloop_arm7, .bloop_arm6, .bloop_arm8, .bloop_tentacle2, .bloop_arm3 {
  background-image: url('../img/bloop-s3db17e661f.png');
  background-repeat: no-repeat;
}

.bloop {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 120%;
  padding-top: 59.53799%;
  height: 0;
}
.in-view .bloop {
  opacity: 1;
  -webkit-animation: swimIn cubic-bezier(0.215, 0.61, 0.355, 1) 8.9s both, swimOut cubic-bezier(0.215, 0.61, 0.355, 1) 8.9s 17.8s forwards;
          animation: swimIn cubic-bezier(0.215, 0.61, 0.355, 1) 8.9s both, swimOut cubic-bezier(0.215, 0.61, 0.355, 1) 8.9s 17.8s forwards;
}

@-webkit-keyframes swimIn {
  0% {
    -webkit-transform: translate(-100%, -50%);
            transform: translate(-100%, -50%);
  }
  100% {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

@keyframes swimIn {
  0% {
    -webkit-transform: translate(-100%, -50%);
            transform: translate(-100%, -50%);
  }
  100% {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}
@-webkit-keyframes swimOut {
  0% {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(100%, -50%);
            transform: translate(100%, -50%);
  }
}
@keyframes swimOut {
  0% {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(100%, -50%);
            transform: translate(100%, -50%);
  }
}
#bonus-challenge-tab, #bonus-challenge, #the-bloop {
  -webkit-transition: opacity 300ms easing(Out);
          transition: opacity 300ms easing(Out);
}

.bloop_bits {
  position: absolute;
}

.bloop_body {
  width: 86.35214%;
  height: 92.71698%;
  background-position: 0 100%;
  background-size: 100% auto;
  top: 0;
  right: 0;
}

.bloop_siphon {
  width: 4.0396%;
  height: 10.9321%;
  background-position: 1.98456% 20.36082%;
  background-size: 2138.20225% auto;
  top: 71.46922%;
  left: 42.44097%;
}
.one-off .bloop_siphon {
  will-change: transform;
}
.in-view .one-off .bloop_siphon {
  -webkit-animation: pumpSiphon infinite steps(1) 2.1s;
          animation: pumpSiphon infinite steps(1) 2.1s;
}

@-webkit-keyframes pumpSiphon {
  50% {
    opacity: 0;
  }
}

@keyframes pumpSiphon {
  50% {
    opacity: 0;
  }
}
.bloop_eye {
  width: 1.634%;
  height: 3.24761%;
  background-position: 0 19.65174%;
  background-size: 5286.11111% auto;
  top: 66.76151%;
  left: 37.16632%;
}
.one-off .bloop_eye {
  will-change: transform;
}
.in-view .one-off .bloop_eye {
  -webkit-animation: swivelEye cubic-bezier(0.215, 0.61, 0.355, 1) 2 2.1s 8.9s alternate;
          animation: swivelEye cubic-bezier(0.215, 0.61, 0.355, 1) 2 2.1s 8.9s alternate;
}

@-webkit-keyframes swivelEye {
  0% {
    -webkit-transform: translate(10%, 20%);
            transform: translate(10%, 20%);
  }
  30% {
    -webkit-transform: translate(15%, 10%);
            transform: translate(15%, 10%);
  }
  85% {
    -webkit-transform: translate(-12%, -14%);
            transform: translate(-12%, -14%);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@keyframes swivelEye {
  0% {
    -webkit-transform: translate(10%, 20%);
            transform: translate(10%, 20%);
  }
  30% {
    -webkit-transform: translate(15%, 10%);
            transform: translate(15%, 10%);
  }
  85% {
    -webkit-transform: translate(-12%, -14%);
            transform: translate(-12%, -14%);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
.bloop_tentacle1 {
  width: 23.87449%;
  height: 49.03434%;
  background-position: 52.14234% 24.79079%;
  background-size: 361.78707% auto;
  top: 18.88257%;
  left: 21.70175%;
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.one-off .bloop_tentacle1 {
  will-change: transform;
}
.in-view .one-off .bloop_tentacle1 {
  -webkit-animation: tentacleFlail1 infinite cubic-bezier(0.645, 0.045, 0.355, 1) 8.9s 800ms alternate both;
          animation: tentacleFlail1 infinite cubic-bezier(0.645, 0.045, 0.355, 1) 8.9s 800ms alternate both;
}

@-webkit-keyframes tentacleFlail1 {
  0% {
    -webkit-transform: rotate(rotate(18deg));
            transform: rotate(rotate(18deg));
  }
  100% {
    -webkit-transform: rotate(-28deg);
            transform: rotate(-28deg);
  }
}

@keyframes tentacleFlail1 {
  0% {
    -webkit-transform: rotate(rotate(18deg));
            transform: rotate(rotate(18deg));
  }
  100% {
    -webkit-transform: rotate(-28deg);
            transform: rotate(-28deg);
  }
}
.bloop_arm5 {
  width: 20.31148%;
  height: 43.36246%;
  background-position: 0 0;
  background-size: 424.77679% auto;
  top: 28.06518%;
  left: 8.94507%;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.one-off .bloop_arm5 {
  will-change: transform;
}
.in-view .one-off .bloop_arm5 {
  -webkit-animation: armFlail5 infinite cubic-bezier(0.645, 0.045, 0.355, 1) 8.9s alternate both;
          animation: armFlail5 infinite cubic-bezier(0.645, 0.045, 0.355, 1) 8.9s alternate both;
}

@-webkit-keyframes armFlail5 {
  0% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
  100% {
    -webkit-transform: rotate(-70deg);
            transform: rotate(-70deg);
  }
}

@keyframes armFlail5 {
  0% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
  100% {
    -webkit-transform: rotate(-70deg);
            transform: rotate(-70deg);
  }
}
.bloop_arm7 {
  width: 28.54954%;
  height: 21.49826%;
  background-position: 35.16484% 0;
  background-size: 302.54372% auto;
  top: 55.04397%;
  left: 0%;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.one-off .bloop_arm7 {
  will-change: transform;
}
.in-view .one-off .bloop_arm7 {
  -webkit-animation: armFlail7 infinite cubic-bezier(0.645, 0.045, 0.355, 1) 3.4s 500ms alternate both;
          animation: armFlail7 infinite cubic-bezier(0.645, 0.045, 0.355, 1) 3.4s 500ms alternate both;
}

@-webkit-keyframes armFlail7 {
  0% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}

@keyframes armFlail7 {
  0% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}
.bloop_arm6 {
  width: 24.16952%;
  height: 26.48403%;
  background-position: 78.61314% 0;
  background-size: 357.03565% auto;
  top: 49.224%;
  left: 4.40195%;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.one-off .bloop_arm6 {
  will-change: transform;
}
.in-view .one-off .bloop_arm6 {
  -webkit-animation: armFlail6 infinite cubic-bezier(0.645, 0.045, 0.355, 1) 14.4s 800ms alternate both;
          animation: armFlail6 infinite cubic-bezier(0.645, 0.045, 0.355, 1) 14.4s 800ms alternate both;
}

@-webkit-keyframes armFlail6 {
  0% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
}

@keyframes armFlail6 {
  0% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  100% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
}
.bloop_arm8 {
  width: 31.09131%;
  height: 13.90526%;
  background-position: 65.84565% 43.98955%;
  background-size: 277.81022% auto;
  top: 65.13192%;
  left: 1.75821%;
}

.bloop_tentacle2 {
  width: 36.4018%;
  height: 38.78836%;
  background-position: 0 49.90119%;
  background-size: 237.2818% auto;
  top: 61.5882%;
  left: 13.6807%;
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.one-off .bloop_tentacle2 {
  will-change: transform;
}
.in-view .one-off .bloop_tentacle2 {
  -webkit-animation: tentacleFlail2 infinite cubic-bezier(0.645, 0.045, 0.355, 1) 5.5s alternate both;
          animation: tentacleFlail2 infinite cubic-bezier(0.645, 0.045, 0.355, 1) 5.5s alternate both;
}

@-webkit-keyframes tentacleFlail2 {
  0% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}

@keyframes tentacleFlail2 {
  0% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}
.bloop_arm3 {
  width: 26.89285%;
  height: 12.30433%;
  background-position: 9.54198% 20.49287%;
  background-size: 320.91062% auto;
  top: 65.05432%;
  left: 6.72485%;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 124.8dpi), only screen and (min-resolution: 1.3dppx) {
  .bloop_bits {
    background-image: url('../img/bloop2x-s3e56bf6dfc.png');
  }
}
/* For the control panel */
@media (min-width: 54em) {
  .sonar .sonar_wrapper {
    float: left;
    width: calc(50% - 1em);
  }
  .sonar .sonar-panel {
    float: right;
  }
  .sonar .alarm {
    position: absolute;
    top: 50%;
    right: 0;
    width: calc(50% - 1em);
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
.sonar .sonar-panel {
  margin: 0 auto rhythm(6);
  overflow: hidden;
  height: 24rem;
  width: 24rem;
  position: relative;
}
.sonar .sonar-panel img {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.sonar .sonar-panel .sonar_bloop {
  top: 36%;
  left: 16%;
  height: 25px;
}

.animated .in-focus .sonar_beam {
  -webkit-animation: searching 5.5s linear infinite;
          animation: searching 5.5s linear infinite;
}

.animated .in-focus .sonar_bloop {
  -webkit-animation: finding 5.5s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
          animation: finding 5.5s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

@-webkit-keyframes searching {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes searching {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes finding {
  90% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  95% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@keyframes finding {
  90% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  95% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
.sonar_tab circle {
  stroke: currentColor;
  stroke-width: 1;
  fill: none;
}
.sonar_tab path {
  stroke: currentColor;
  stroke-width: 1;
  fill: none;
}
.sonar_tab svg {
  -webkit-transform: translateY(3px);
      -ms-transform: translateY(3px);
          transform: translateY(3px);
}