<figure>
  <div class="frame">
    <input type="checkbox" id="is-shocking">
    <label for="is-shocking">Is deleting apps</label>
    <div id="phone" class="drawing">
      <div class="device">
        <div class="screen">
          <div class="bootup-logo"></div>          
  <!--         <iframe src="https://example.com" frameborder="0"></iframe> -->
          <div class="os">
            <div class="icons">
              <div class="icon"></div>
              <div class="icon"></div>
              <div class="icon"></div>
              <div class="icon"></div>
              <div class="icon"></div>
              <div class="icon"></div>
              <div class="icon"></div>
              <div class="icon"></div>
              <div class="icon"></div>
            </div>
            <div class="dock">
              <div class="icon"></div>
              <div class="icon"></div>
              <div class="icon"></div>
              <div class="icon"></div>
            </div>            
          </div>
        </div>
        <div class="home-button"></div>
      </div>
    </div>
  </div>
  <figcaption>Mobile Phone in CSS</figcaption>
</figure>

/* Config */
.device {
  /* Normal speed is 0.1s. Slow it down to break-down the animation. */
  --speed: 0.1s;
  
  /* Fast speed */
  // --speed: 0.01s;
  
  /* Slow speed */
  // --speed: 0.3s;
}
/* Outline debug mode */
// *, *:after, *:before {
//   background: transparent !important;
//   border: 1px solid black !important;  
// }

/* */
*{box-sizing: border-box;}
body {
  background: snow;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
figcaption {
  border: 1px solid brown;
  background: snow;
  border-radius: 2px;
  padding: .2em .4em;
  display: inline-block;
  margin-top: -1.5em;
  box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);
  z-index: 2;
}

.drawing {  
  background: #ffd;
  width: 300px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .device {
    background: #333;
    width: 66%;
    height: 80%;
    border-radius: 30px;
    
    box-shadow: 0 2px 3px rgba(0,0,0,.4), inset 0 -1px rgba(0,0,0,.9);
    
    border: 1px solid silver;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 10px 5px 10px;
      
    position: relative;
    z-index: 1;
    
    &:before,
    &:after{
      content: '';
      width: 2px;
      height: 18%;
      background: linear-gradient(to bottom, #111 40%, transparent 40%, transparent 60%, #111 60%);
      position: absolute;
      top: 21%;
      left: -1%;
      z-index: -1;
    }
    &:after {
      left: unset;
      right: -1%;
      background: #111;
      height: 10%;
    }
  }
  
  .screen {
    opacity: 0;
    position: relative;
    width: 100%;
    flex: 1;
    border-radius: 20px;
    margin-bottom: 5px;
  }
  
  .bootup-logo {
    // display: none;
    // opacity: 0;
    position: absolute;
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 40%;
    top: calc(50% - 30px / 2);
    left: calc(50% - 30px / 2);
    position: relative;
    z-index: 1;

    &:before {
      content: '';
      width: 25%;
      height: 30%;
      position: absolute;
      background: white;
      border-radius: 100% 0;
      top: -45%;
      left: 45%;
    }
    &:after {
      content: '';
      width: 80%;
      height: 80%;
      background: black;
      border-radius: 50%;
      position: absolute;
      top: -30%;
      right: -40%;
    }
  }
  
  .os {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background: linear-gradient(to bottom right, #b2dfea, #a1eafc);
    
    border-radius: 20px;
    display: flex;
    flex-direction: column;    
    align-items: stretch;
    
    padding: 10px;
    
    &:before,
    &:after {
      content: '';
      width: 30%;
      height: 10px;
      border-radius: 10px;
      background: rgba(255,255,255,.2);
      box-shadow: 0 0 5px rgba(255,255,255,.2);
      position: absolute;
      top: 5%;
      left: 5%;
    }
    &:before {
      transform: rotatez(90deg);
      transform-origin: 0 0;
      left: 10%;
    }
    
    .icons {
      flex: 1;
      padding: 10px;
      
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: repeat(auto-fit, 40px);
            
      .icon {
        margin: auto;
        position: relative;
      }
      
      /* TED */
      .icon:nth-child(1){
        background: black;
        
        &:after {
          content: '';
          position: absolute;
          top: 35%;
          left: 3px;
          width: 2px;
          height: 2px;
          background: red;
          box-shadow: 1px 2px red, 1px 4px red, 2px 0 red, 4px 0 red, 6px 0 red,4px 2px red, 4px 4px red, 6px 4px red, 5px 2px red, 9px 0 red,9px 2px red, 9px 4px red, 10px 0 red, 10px 4px red, 12px 1px red, 12px 3px red;
        }
      }
      
      /* Facaebook */
      .icon:nth-child(2) {
        background: #3b5999;
        overflow: hidden;
        
        &:after {
          content: 'f';
          position: absolute;
          bottom: -1px;
          right: 25%;
          color: white;
          font-weight: 900;
          font-family: Arial Black, sans-serif;
        }
      }
            
      
            
    }
    
    .icon {
      width: 20px;
      height: 20px;
      background: steelblue;
      border-radius: 5px;
    }
        
    
    .dock {      
      height: 30px;
      background: rgba(255,255,255,.2);
      border-radius: 10px;
      
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      
      .icon {
        position: relative;
        
      }
      /* Messages */
      .icon:nth-child(1) {
        background: linear-gradient(to bottom, #66fd80, #0bb725);
        display: flex;        
        
        &:after {
          content: '';
          width: 60%;
          height: 45%;
          background: white;
          margin: auto;
          border-radius: 50%;          
        }
        &:before {
          content:'';
          width: 0;
          height: 0;
          border: 3px solid transparent;
          border-top-color: white;
          border-top-width: 6px;
          position: absolute;
          bottom: -1px;
          left: 30%;
          transform: rotatez(20deg);
        }
      }
      /* Notes */
      .icon:nth-child(2) {
        background: white;
        border-top: 6px solid #fcc000;
        &:after {
          content:'';
          position: absolute;
          width: 100%;
          top: 30%;
          height: 30%;
          border-top: 1px dotted #eee;
          border-bottom: 1px dotted #eee;
        }
      }
      /* Safari */
      .icon:nth-child(3) {
        background: radial-gradient(at center, #00adef 60%, white 60%);
        display: flex;
                
        &:before {
          content: '';
          width: 3px;
          height: 90%;
          margin: auto;
          transform: rotatez(30deg) skewy(80deg) scale(0.5);          
          background: linear-gradient(to bottom right, red 50%, white 50%);
        }        
      }
      /* Calendar */
      .icon:nth-child(4) {
        background: white;
        &:before,
        &:after {
          text-align: center;
          width: 100%;
          position: absolute;
          top: 4px;
          left: 0;                 
        }
        &:after {
          content: 'Friday';
          font-size: 5px;
          color: #bf0909;
        }
        &:before {
          content: '20';
          font-size: 8px;          
          bottom: 2px;
          top: unset;
        }
      }
    }
  }
  .home-button {
    background: #222;
    width: 30px;
    height: 30px;
    flex: 0 1 auto;
    border-radius: 50%;
    box-shadow: inset 0 1px rgba(0,0,0,.9), inset 0 -1px rgba(255,255,255,.2);
  }
      
}

input#is-shocking {
  position: absolute;
  bottom: -60px;
  left: 30%;  
  z-index: 2;
}
label[for='is-shocking'] {
  position: absolute;
  bottom: calc(-60px - 5px);
  left: calc(30% - 5px);
  padding: 5px 10px 5px 25px;
  background: #f1f1f1;
  border-radius: 5px;  
}
input#is-shocking:checked ~ .drawing .icon {
  animation: shocking 0.2s infinite;
}

@keyframes shocking {
  0% {
    transform: translatex(-1px);
  }
  50% {
    transform: translatey(-1px);
  }
  70% {
    transform: translatex(1px);
  }
  100% {
    transform: translatex(-1px);
  }
}

.frame {
  border: 15px solid #a0784b;  
  border-top-color: #c1935e;
  border-bottom-color: #895213;
  box-shadow: 0 1px 1px rgba(0,0,0,.3);
  position: relative;
}

/* Beginning animation */
@keyframes show-up {
  0% {
    opacity: 0;
    transform: translatey(10px) scaley(0.5);
    transform-origin: 0 100%;
  }
  100% {
    opacity: 1;
    transform: unset;
  }
}
@keyframes bootup {
  0% {
    opacity: 0;
  }
  10%, 90% {
    opacity: 1;
  }  
  100% {
    opacity: 0;
  }
}
@keyframes screen-on {
  0% {
    background: black;
  }
  99% {
    background: #a1eafc;
  }
  100% {
    background: linear-gradient(to bottom right, #b2dfea, #a1eafc);
  }
}

.device {    
  animation: show-up calc(var(--speed) * 3) forwards;
      
  .home-button {
    opacity: 0;
    animation: show-up calc(var(--speed) * 3) forwards;
    animation-delay: calc(var(--speed) * 1)
  }
  .screen {    
    // opacity: 0;
    animation: show-up calc(var(--speed) * 3) forwards;
    animation-delay: calc(var(--speed) * 2);
  }
  .bootup-logo {
    opacity: 0;
    animation: bootup calc(var(--speed) * 10) forwards;
    animation-delay: calc(var(--speed) * 4);
  }
  .os {
    background: black;
    animation: screen-on calc(var(--speed) * 3) forwards;
    animation-delay: calc(var(--speed) * 14);
  }
  .dock, .icons {
    opacity: 0;
    animation: show-up calc(var(--speed) * 3) forwards;
    animation-delay: calc(var(--speed) * 16);
  }
}

/* Next thing TODO is to make it responsive. */