@import url('https://fonts.googleapis.com/css?family=Exo+2');

:root{
  --shield-width: 144px;
  --shield-height: calc(var(--shield-width) * 1.1);
  --acc: cubic-bezier(0.390, 0.575, 0.565, 1.000);
  --acc-2: cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

*,
*:before,
*:after{
  -webkit-tap-highlight-color: rgba(255,255,255,0);
}

body{
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #09002b 0%, #000000 100%);
  padding: 0; 
  margin: 0;
  perspective: 144px;
  perspective-origin: bottom;
  overflow: hidden;
  font-family: 'Exo 2';
  font-weight: 700;
  animation: fadeIn .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1;
}

@keyframes fadeIn{
  0%,50%{
    opacity: 0;
    transform: scale(.89);
  }
}

.shield,
.shield:before,
.shield:after{
  display: block;
  border-radius: 10% 10% 50% 50% / 10% 10% 90% 90%;
  background: #000;
  width: var(--shield-width);
  height: var(--shield-height);
  position: absolute;
  cursor: pointer;
  will-change: background;
  transform-style: preserve-3d;
  outline: 1px solid transparent;
}

.shield{
  animation: float 4.5s var(--acc-2) infinite;
  background: linear-gradient(to top, rgba(0,183,234,1) 0%,rgba(0,183,234,.13) 100%);
}

@keyframes float{
  0%{
    transform: none;
  }
  50%{
    transform: translate3d(-1%,-3%,0) scaleX(1.02) scaleY(.98) skewY(-2deg) rotateX(-1deg) rotateY(1deg) rotateZ(-1deg);
  }
}

.control:checked + .shield{
  background: linear-gradient(to bottom, rgba(0,183,234,.34) 0%,rgba(0,183,234, 0.67) 55%);
}

.shield:before{
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: #ddd;
  -webkit-clip-path: polygon(0 0, 50% 50%, 50% 100%, 0 100%);
  clip-path: polygon(0 0, 50% 50%, 50% 100%, 0 100%);
  transform: translate3d(-13%,8%,0) scale(.89) rotateZ(-3deg);
  transition: all 144ms var(--acc-2);
  background: linear-gradient(to top, rgba(0,183,234,.55) 0%,rgba(0,183,234,1) 55%);
  text-align: left;
  line-height: 200px;
  color: #ddd;
  letter-spacing: 1px;
}

.control:checked + .shield:before{
  transform: none;
  opacity: 1;
  transition-delay: 10ms;
  content: '100';
  font-size:32px;
}

.shield:after{
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0; 
  -webkit-clip-path: polygon(50% 0%, 100% 0, 50% 50%, 0 0);
  clip-path: polygon(50% 0%, 100% 0, 50% 50%, 0 0);
  background: #555;
  transform: translateY(-21%) scale(.89) rotateZ(3deg) rotateY(-2deg);
  transition: all 144ms var(--acc-2);
  background: linear-gradient(to bottom, rgba(0,183,234,.89) 0%,rgba(0,183,234,1) 89%);
  text-align: center;
  line-height: 55px;
  color: #ddd;
  letter-spacing: .5px;
  font-style: italic;
}

.control:checked + .shield:after{
  transform: none;
  opacity: 1;
  background: linear-gradient(to bottom, rgba(0,183,234,.89) 0%,rgba(0,183,234, .34) 100%);
  content: 'active';
  font-size: 18px;
}

.control{
  display: none;
}

div{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; 
  top: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--acc) 144ms;
}

div:before,
div:after{
  content: '';
  position: absolute; 
  left: 0; 
  top: 0;
  display: block;
}

div:before{
  background: radial-gradient(ellipse at center, #3500fd 0%, #0031ff 100%);
  opacity: 0;
  width: 100%;
  height: 100%;
}

div:after{
  content: 'shield';
  display: block;
  opacity: 1;
  left: 50%;
  top: 50%;
  color: #fff;
  transform-style: preserve-3d;
  transition: all 144ms var(--acc-2), opacity 89ms var(--acc-2);
  font-size: 24px;
  letter-spacing: .5px;
  text-indent: 21px;
}

.control:checked ~ div:after{
  opacity: 0;
  text-indent: 13px;
}

.control:checked ~ div:before{
  opacity: .05;
  transform: none;
}