<input id="trigger" class="toggle-checkbox" type="checkbox"><label for="trigger">Shhhhh...</label>

<div class="h">
  <svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 285 320"><path fill="#442818" fill-rule="nonzero" d="M127.7 227l-41.9-59.2-8.4 6-6-8.4 8.5-6-12-17-8.4 6-12-16.8-8.4 6-12-17-8.4 6-18-25.2 8.5-6-6-8.5 8.4-6-.2-.3 16.8-12 .2.3 36 50.7 8.4-6 12 16.9 8.3-6 59.8 84.4-25.2 18v.1z"/><path fill="#676767" fill-rule="nonzero" d="M105.1 141.4l107.6 152-16.8 12-107.7-152 16.9-12z"/><path fill="#3a3a3a" fill-rule="nonzero" d="M95.6 110l6 8.5-8.5 6-6-8.5 8.5-6z"/><path fill="#442818" fill-rule="nonzero" d="M157.3 227l41.9-59.2 8.4 6 6-8.4-8.5-6 12-17 8.4 6 12-16.8 8.4 6 12-17 8.4 6 18-25.2-8.5-6 6-8.5-8.4-6 .2-.3-16.8-12-.2.3-36 50.7-8.4-6-12 16.9-8.3-6-59.8 84.4 25.2 18v.1z"/><path fill="#676767" fill-rule="nonzero" d="M179.9 141.4l-107.6 152 16.8 12 107.7-152-16.9-12z"/><path fill="#3a3a3a" fill-rule="nonzero" d="M189.4 110l-6 8.5 8.5 6 6-8.5-8.5-6z"/><path fill="#3a3435" fill-rule="nonzero" d="M176.2 10.4h10.5V31H94.2V10.4h10.3V0h71.7v10.4z"/><path fill="#e1b389" fill-rule="nonzero" d="M114.8 124.6h52.6v21h-52.6z"/><path fill="#00b0d8" fill-rule="nonzero" d="M94.4 279.8V197H83.8v10.3H73.5v10.4H32.2v-31.1h10.4v-10.4H52v-10.5h11.2v-10.1h10.3V145h134.2v10.3h10.4v10.4h10.3V176h10.3v10.4H249v31.7h-41.3v-10.8h-10.3V197h-10.8v104h-.2v21.8h-41.3V301h-9.6v21.8H94.2v-43h.2z"/><path fill="#fccb98" fill-rule="nonzero" d="M207.7 248.6v-31H249v52h-10.3v10.1h-10.3v10.4h-9.6v10.4h-21.4V290H187v-31h10.5v-10.3h10.3l-.1-.1z"/><path fill="#e1b389" fill-rule="nonzero" d="M114.8 134.4h52.6v21h-52.6z"/><path fill="#fccb98" fill-rule="nonzero" d="M176.9 31H187v20.8h20.6V83h-10.3v31H187v10.6h-10.2v9.7h-20.7V145h-31v-10.7h-20.7v-9.7H94.2V114H83.8V83H73.5V51.8h20.7V31.1h10.3V20.7h72.4v10.4-.1z"/><path fill="#3a3435" fill-rule="nonzero" d="M83.8 31h10.4v41.7H83.8V31zM187 31h10.4v41.7h-10.3L187 31z"/><path fill="#fff" fill-rule="nonzero" d="M145.8 41.4h31v31.2h-31V41.4zm-41.3 0h31v31.2h-31V41.4z"/>
    <path id="mouth" fill="#b18c6f" fill-rule="nonzero" d="M158.8 108.4l-3.6 11.1h-28.6l-3.6-11.1h35.8z"/>
    <path fill="#e1b389" fill-rule="nonzero" d="M135.5 62.2h10.3v31.1h-10.3z"/><g fill="#00242c" fill-rule="nonzero"><path d="M166.4 217.6h10.4v10.3h-10.4v-10.3zm-10.3-10.4h10.3v10.4h-10.3v-10.4zm-10.3-10.3H156v10.3h-10.3l.1-10.3zm31 31.1H187v10.3h-10.3l.1-10.3zm-62-62.2h10.3V176h-10.3v-10.2zm20.7 20.7h10.3v10.4h-10.3v-10.4zM94.2 145h10.3v10.4H94.2V145zm10.3 10.4h10.3v10.4h-10.3v-10.4zm20.6 20.7h10.4v10.4H125l.1-10.4zm51.7 72.6H187V259h-10.3l.1-10.3z"/><path d="M166.4 248.7h10.4V259h-10.4v-10.3zm-10.3-10.4h10.3v10.4h-10.3v-10.4z"/><path d="M166.4 238.3h10.4v10.4h-10.4v-10.4zm-20.6-20.7H156v10.3h-10.3l.1-10.3zm0 10.4H156v10.3h-10.3l.1-10.3zm10.3 0h10.3v10.3h-10.3V228zm-82.6-83h10.3v10.4H73.5V145zm31 41.5h10.3v10.4h-10.3v-10.4zm31 20.7h10.3v10.4h-10.3v-10.4z"/><path d="M135.5 217.6h10.3v10.3h-10.3v-10.3zm-20.7-31.1h10.3v10.4h-10.3v-10.4zm0 10.4h10.3v10.3h-10.3v-10.3z"/><path d="M125.1 207.2h10.4v10.4H125l.1-10.4z"/><path d="M125.1 196.9h10.4v10.3H125l.1-10.3zm-30.9-31.1h10.3V176H94.2v-10.2zm-10.4 0h10.4V176H83.8v-10.2zm0-10.4h10.4v10.4H83.8v-10.4zm-10.3 0h10.3v10.4H73.5v-10.4zm31 20.7h10.3v10.4h-10.3v-10.4zm-10.3 0h10.3v10.4H94.2v-10.4zm82.6 62.2H187v10.4h-10.3l.1-10.4zm-20.7-20.7h10.3v10.3h-10.3v-10.3zm-10.3-10.4H156v10.4h-10.3l.1-10.4zm20.6 20.8h10.4v10.3h-10.4V228zm-51.6-51.9h10.3v10.4h-10.3v-10.4z"/><path d="M135.5 196.9h10.3v10.3h-10.3v-10.3zM83.8 145h10.4v10.4H83.8V145zm10.4 10.4h10.3v10.4H94.2v-10.4zm30.9 31.1h10.4v10.4H125l.1-10.4zm-20.6-20.7h10.3V176h-10.3v-10.2z"/></g><path fill="#092818" fill-rule="nonzero" d="M87.9 140.7l6.4 5.1-5 6.5-6.5-5.1 5.1-6.5z"/><path fill="#0d3d24" fill-rule="nonzero" d="M94.3 145.8l6.5 5.1-5.1 6.5-6.5-5.1 5.1-6.5z"/><path fill="#092818" fill-rule="nonzero" d="M100.8 151l6.4 5-5 6.5-6.5-5.1 5.1-6.4z"/><path fill="#0d3d24" fill-rule="nonzero" d="M95.7 157.4l6.4 5.1-5 6.5-6.5-5.1 5.1-6.5z"/><path fill="#092818" fill-rule="nonzero" d="M90.6 163.9l6.5 5-5.1 6.6-6.5-5.1 5.1-6.5z"/><path fill="#0d3d24" fill-rule="nonzero" d="M85.5 170.4l6.5 5-5.1 6.5-6.5-5 5.1-6.5z"/><path fill="#092818" fill-rule="nonzero" d="M79 165.2l6.5 5.2-5 6.4-6.5-5 5-6.6z"/><path fill="#0d3d24" fill-rule="nonzero" d="M72.6 160.1l6.4 5.1-5 6.5-6.5-5 5.1-6.6z"/><path fill="#092818" fill-rule="nonzero" d="M77.7 153.7l6.4 5-5 6.5-6.5-5 5.1-6.5z"/><path fill="#0d3d24" fill-rule="nonzero" d="M82.8 147.2l6.4 5-5 6.6-6.5-5.1 5.1-6.5z"/><path fill="#092818" fill-rule="nonzero" d="M89.2 152.3l6.5 5-5.1 6.6-6.5-5.1 5.1-6.5z"/><path fill="#0d3d24" fill-rule="nonzero" d="M84.1 158.8l6.5 5-5 6.6-6.6-5.2 5.1-6.4z"/><path fill="#092818" fill-rule="nonzero" d="M99.4 139.3l6.5 5.1-5.1 6.5-6.5-5 5.1-6.6z"/><g fill-rule="nonzero"><path fill="#092818" d="M118.4 167.8l6.4 5-5 6.6-6.5-5.2 5.1-6.4z"/><path fill="#0d3d24" d="M124.8 172.9l6.5 5-5.1 6.6-6.5-5.1 5.1-6.5z"/><path fill="#092818" d="M131.3 178l6.4 5-5 6.6-6.5-5.1 5.1-6.5z"/><path fill="#0d3d24" d="M126.2 184.5l6.4 5-5 6.5-6.5-5 5.1-6.5z"/><path fill="#092818" d="M121 191l6.6 5-5.1 6.5-6.5-5 5-6.5z"/><path fill="#0d3d24" d="M116 197.4l6.5 5.1-5.1 6.5-6.5-5.1 5.1-6.5z"/><path fill="#092818" d="M109.5 192.3l6.5 5.1-5 6.5-6.5-5.1 5-6.5z"/><path fill="#0d3d24" d="M103 187.2l6.5 5.1-5 6.5-6.5-5.1 5-6.5z"/><path fill="#092818" d="M108.2 180.7l6.4 5.1-5 6.5-6.5-5 5.1-6.6z"/><path fill="#0d3d24" d="M113.3 174.2l6.4 5.2-5 6.4-6.5-5 5.1-6.6z"/><path fill="#092818" d="M119.7 179.4l6.5 5-5.1 6.5-6.5-5 5.1-6.5z"/><path fill="#0d3d24" d="M114.6 185.8l6.5 5.1-5 6.5-6.6-5 5.1-6.6z"/><path fill="#092818" d="M129.9 166.4l6.5 5.1-5.1 6.5-6.5-5.1 5.1-6.5z"/></g><g fill-rule="nonzero"><path fill="#092818" d="M148.9 194.8l6.4 5.1-5 6.5-6.5-5 5.1-6.6z"/><path fill="#0d3d24" d="M155.3 200l6.5 5-5.1 6.5-6.5-5 5.1-6.5z"/><path fill="#092818" d="M161.8 205l6.4 5.1-5 6.5-6.5-5 5.1-6.6z"/><path fill="#0d3d24" d="M156.7 211.5l6.4 5.1-5 6.5-6.5-5.1 5.1-6.5z"/><path fill="#092818" d="M151.6 218l6.5 5.1-5.1 6.5-6.5-5.1 5.1-6.5z"/><path fill="#0d3d24" d="M146.5 224.5l6.5 5-5.1 6.6-6.5-5.1 5.1-6.5z"/><path fill="#092818" d="M140 219.4l6.5 5-5 6.6-6.5-5.1 5-6.5z"/><path fill="#0d3d24" d="M133.6 214.3l6.4 5-5 6.6-6.5-5.2 5.1-6.4z"/><path fill="#092818" d="M138.7 207.8l6.4 5-5 6.6-6.5-5.1 5.1-6.5z"/><path fill="#0d3d24" d="M143.8 201.3l6.4 5.1-5 6.5-6.5-5.1 5.1-6.5z"/><path fill="#092818" d="M150.2 206.4l6.5 5.1-5.1 6.5-6.5-5.1 5.1-6.5z"/><path fill="#0d3d24" d="M145.1 212.9l6.5 5.1-5 6.5-6.6-5.1 5.1-6.5z"/><path fill="#092818" d="M160.4 193.5l6.5 5-5.1 6.5-6.5-5 5.1-6.5z"/></g><g fill-rule="nonzero"><path fill="#092818" d="M179.4 221.9l6.4 5-5 6.6-6.5-5.1 5.1-6.5z"/><path fill="#0d3d24" d="M185.8 227l6.5 5.1-5.1 6.5-6.5-5.1 5.1-6.5z"/><path fill="#092818" d="M192.3 232.1l6.4 5.1-5 6.5-6.5-5.1 5.1-6.5z"/><path fill="#0d3d24" d="M187.2 238.6l6.4 5-5 6.6-6.5-5.1 5.1-6.5z"/><path fill="#092818" d="M182 245l6.6 5.2-5.1 6.4-6.5-5 5-6.6z"/><path fill="#0d3d24" d="M177 251.5l6.5 5.1-5.1 6.5-6.5-5 5.1-6.6z"/><path fill="#092818" d="M170.5 246.4l6.5 5.1-5 6.5-6.5-5 5-6.6z"/><path fill="#0d3d24" d="M164 241.3l6.5 5.1-5 6.5-6.5-5 5-6.6z"/><path fill="#092818" d="M169.2 234.8l6.4 5.2-5 6.4-6.5-5 5.1-6.6z"/><path fill="#0d3d24" d="M174.3 228.4l6.4 5-5 6.6-6.5-5.2 5.1-6.4z"/><path fill="#092818" d="M180.7 233.5l6.5 5-5.1 6.6-6.5-5.1 5.1-6.5z"/><path fill="#0d3d24" d="M175.6 240l6.5 5-5 6.5-6.6-5 5.1-6.5z"/><path fill="#092818" d="M190.9 220.5l6.5 5.1-5.1 6.5-6.5-5.1 5.1-6.5z"/></g>
    <path id="reye" fill="#444445" fill-rule="nonzero" d="M114.8 51.8h10.3v10.4h-10.3z"/>
    <path id="leye" fill="#444445" fill-rule="nonzero" d="M156.1 51.8h10.3v10.4h-10.3z"/><path fill="#a7a9ac" fill-rule="nonzero" d="M114.8 251.1l11.1 3-18.5 69.2-11.3-2.1 18.7-70v-.1z"/><path fill="#bbbdc0" fill-rule="nonzero" d="M103.7 248.2l11.1 3-18.7 70-12 .3 19.6-73.3z"/><path fill="#231f20" fill-rule="nonzero" d="M125 213.1l3-11.2 11 3-3 11.3h.2l-8.7 33.3 10.7 2.8-3 11.2-18.4-5.2-3.6-.9v.1l-3.5-.9-7.5-1.8v-.2l-11.2-3 3-11.2 11.1 3L114 210l11 3.1z"/><path fill="#aedee4" fill-rule="nonzero" d="M94.4 269.4h92.7v10.4H94.4z"/><path fill="#fccb98" fill-rule="nonzero" d="M73.5 248.7h10.3v10.2h14.5v31.2H83.8v10.4H63.2V290H52.9v-10.3H42.6v-10.2H32.2v-52h41.3v31.2z"/></svg>
</div>
<div class="z">
  <div class="ninja z1"></div>
  <div class="ninja z2"></div>
  <div class="ninja z3"></div>
  <div class="ninja z4"></div>
  <div class="ninja z5"></div>
  <div class="ninja z6"></div>
  <div class="ninja z7"></div>
  <div class="ninja z8"></div>
  <div class="ninja z9"></div>
  <div class="ninja z10"></div>
  <div class="ninja z11"></div>  
</div>


<div class="logo"><a href="https://undead.institute" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1804713/UndeadInsti-LogoOnWhite.png" alt="Getting Braaains should be fun"></a></div>

.toggle-checkbox:checked ~ .z .ninja { 
  animation: 1s ease-in-out calc( var(--multiplier) * 1s) popdown forwards;
}
@keyframes popdown {
  0% {
    transform: rotate(180deg) translate(0, calc( var(--multiplier) * 5vw + 13vw));
  }
  100% {
    transform: rotate(180deg) translate( 0, calc( (var(--multiplier) * -2vw + -5vw) * -1 ));
  }
}
.toggle-checkbox:checked ~ .h #leye, .toggle-checkbox:checked ~ .h #reye  { 
  animation: 2s ease-in-out 7s concern forwards;
}
#leye, #reye {
  transform: translateY(0);
  transform-origin: center center;
}
@keyframes concern {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-10px, -5px);
  }
}
.toggle-checkbox:checked ~ .h  { 
  animation: 2s ease-in-out 10s concern2 forwards;
}
.h {
  transform: translateY(0);
}
@keyframes concern2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 50vw);
  }
}
.z7 { --multiplier: 0; --m2: 7.75; }
.z1 { --multiplier: 0.5; --m2: 1; }
.z5 { --multiplier: 1; --m2: 5.2; }
.z6 { --multiplier: 1.5; --m2: 6; }
.z4 { --multiplier: 2; --m2: 4; }
.z3 { --multiplier: 2.5; --m2: 1.5; }
.z9 { --multiplier: 3; --m2: 9; }
.z8 { --multiplier: 3.5; --m2: 7.5; }
.z11 { --multiplier: 4; --m2: 1; }
.z10 { --multiplier: 4.5; --m2: -1; }
.z2 { --multiplier: 5; --m2: 2; }

.ninja {
  background-image: url("https://assets.codepen.io/1804713/ninja.svg");
  width: calc( var(--multiplier) * 5vw + 10vw );
  height: calc( var(--multiplier) * 5vw + 13vw);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform-origin: center;
  transform: rotate(180deg) translate(0, calc( var(--multiplier) * 5vw + 13vw));
  top: 0;
  left: calc( var(--multiplier) * 1vw + var(--m2) * 8vw);
  position: absolute;
  z-index: calc( var(--multiplier) * 10 );
  filter: blur( calc( (var(--multiplier) - 3) * -1px ) );
}
.h svg {
  width: 30vw;
  max-width: 800px;
}
.h {
  position: absolute;
  bottom: -8vw;
  left: 35vw;
  z-index: 49;
}

body {
  background-color: mistyrose;
  overflow: hidden;
}

.logo {
  width: 100%;
  max-width: 400px;
  position: absolute;
  top: 0;
  right: 0;
}
.logo img {
  width: 100%;
}
input{
  display: none;
}
input:checked + label {
  box-shadow: inset 3px 3px 2px #660000;
  transform: translate(3px, 3px);
}
label {
  font-size: 1.5em;
  color: #FFF;
  background-color: #960B0B;
  width: 140px;
  height: 30px;
  text-align: center;
  font-weight: bold;
  display: block;
  border-radius: 7px;
  box-shadow: 3px 3px 0 #660000;
  cursor: pointer;
  position: relative;
  z-index: 100;
}