%input{:type => "checkbox"}/
#wrap
 .inner
  -21.times do
   .box
 .text
  %h5
   %span CREATIVE
   %span DEVELOPER
  %a{:href => "https://codepen.io/cobra_winfrey/", :target => "_blank"}
   %i.fab.fa-codepen
  %a{:href => "https://twitter.com/cobra_winfrey", :target => "_blank"}
   %i.fab.fa-twitter

$p: #fe5911;
$y: #fecc5c;
$pu: #ff8cb7;
$w: #f0e6d2;

body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  background:#000;
  perspective:1000000000000px;
  font-family: 'Nova Cut', cursive;
  input{
    position:absolute;
    z-index:999;
    width:500px;
    height:500px;
    opacity:0;
    left:calc(50% - 250px);
    top:calc(50% - 250px);
    cursor:pointer;
    &:hover{
      & ~ #wrap{
        .inner{
          .box{
            &:nth-of-type(21){
              &:after{
                letter-spacing:8px;
              }
            }
          }
        }
      }
    }
    &:checked{
      & ~ #wrap{
        transform:scaleY(1);
        &:before{
           box-shadow:0 0 0 90px #000, 0 0 0 91px $pu;
          clip-path: polygon(-200% 50%, 300% 50%, 265% -300%, -200% 300%);
          transition:1400ms ease-in-out, box-shadow 800ms cubic-bezier(1, 0.25, 0.25, 1);
          transition-delay:500ms, 0s;
        }
        &:after{
           box-shadow:0 0 0 90px #000, 0 0px 0 91px $p;
        }
        .text{
          a{
            i{
              transform:translateY(0);
              transition-delay:1400ms, 0s;
            }
            &:first-of-type{
              transition-delay:1700ms, 0s;
            }
          }
          h5{
            span{
              &:before{
                transform:translate(-50%, -50%);
                transition:transform 800ms cubic-bezier(1, 0.25, 0.25, 1);
                transition-delay:1200ms;
                opacity:1;
              }
            }
          }
        }
      }
      & ~ #wrap .inner{
        transform:rotateY(-45deg);
        transition-delay:700ms;
        .box{
          @for $i from 1 through 11{
             &:nth-of-type(#{$i}){
               transition-delay:600ms;
               &:before, &:after{
                 transition-delay:600ms;
               }
             }
           }
          @for $i from 12 through 20{
             &:nth-of-type(#{$i}){
               background-position:0% 0%, 0% 0%;
               clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
               transition-delay:0s;
             }
           }
          &:first-of-type{
            background:darken($p, 5%);
            &:after{
              background:darken($p, 5%);
              box-shadow:inset 0 20px 20px -10px transparentize(darken($pu, 10%), 0.5);
            }
          }
          &:nth-of-type(2){
            background:darken($p, 12.5%);
            box-shadow:inset 0 -20px 30px -15px transparentize(darken($pu, 10%), 0.25);
            &:after{
              box-shadow:inset 0 76px 0 0 $p, inset 0 75px 20px transparentize(darken($pu, 10%), 0.25);
              z-index:9;
            }
            &:before{
              background-position:50% 50%;
          background-size:100% 100%;
              box-shadow:inset 0 20px 30px -15px transparentize(darken($pu, 10%), 0.5), inset 0 -55px 0 darken($p, 5%), inset 0 -55px 0 transparentize(darken($pu, 10%), 0.5);
            }
          }
          &:nth-of-type(3){
            
            background:darken($p, 5%);
            &:before{
              background:darken($p, 10%);
              box-shadow:inset 0 40px 30px -10px transparentize(darken($pu, 10%), 0.5), inset 0 55px 0 0 darken($p, 10%), inset 0 115px 25px -20px transparentize(darken($pu, 10%), 0.5);
            }
            &:after{
              background:darken($p, 5%);
              box-shadow:inset 0 40px 30px -10px transparentize(darken($pu, 10%), 0.5);
            }
          }
          &:nth-of-type(4){
            
            &:before{
              background:darken($p, 5%);
              box-shadow:inset 0 -30px 30px -10px transparentize(darken($pu, 10%), 0.5);
            }
            &:after{
              background:darken($p, 5%);
              box-shadow:inset 0 20px 30px -10px transparentize(darken($pu, 10%), 0.5);
            }
          }
          &:nth-of-type(5){
            
            background:darken($p, 5%);
            box-shadow:inset 0 20px 30px -10px transparentize(darken($pu, 10%), 0.5), inset 0 -20px 30px -10px transparentize(darken($pu, 10%), 0.5);
            &:before{
              background:darken($p, 5%);
              box-shadow:inset 0 -40px 40px -10px transparentize(darken($pu, 10%), 0.4);
            }
          }
          &:nth-of-type(6){
            
            box-shadow:inset 0 50px 30px transparentize(darken($pu, 10%), 0.6);
            &:before{
              box-shadow:inset 0 20px 15px -12.5px transparentize(darken($pu, 20%), 0.7), inset 0 -100px 0 0 transparentize(darken($pu, 10%), 0.8), 0 7px 10px transparentize(darken($pu, 10%), 0.85);
            }
          }
          &:nth-of-type(7){
            background:darken($p, 5%);
            box-shadow:inset 0 -5px 30px transparentize(darken($pu, 10%), 0.5);
            &:after{
              box-shadow:inset 0 -5px 30px -10px transparentize(darken($pu, 10%), 0.5), inset 0 5px 30px -10px transparentize(darken($pu, 10%), 0.5);
            }
          }
          &:nth-of-type(8){
            background:darken($p, 5%);
            box-shadow:inset 0 -5px 30px transparentize(darken($pu, 10%), 0.5);
            &:after{
             background:darken($p, 5%);
            }
          }
          &:nth-of-type(9){
            box-shadow:inset 0 42.5px 20px -12.5px $p, inset 0 75px 10px -40px transparentize(darken($pu, 20%), 0.95), inset 0 100px 40px -30px transparentize(darken($pu, 10%), 0.5);
            &:before{
               background:$p;
               box-shadow:inset 0 -10px 30px -20px transparentize(darken($pu, 10%), 0.5);
            }
            &:after{
              background:darken($p, 5%);
              box-shadow:inset 0 -40px 20px -10px transparentize(darken($pu, 10%), 0.5);
            }
          }
          &:nth-of-type(10){
            background:darken($p, 5%);
            box-shadow:inset 0 180px 30px darken($p, 5%), inset 0 210px 0 transparentize(darken($pu, 10%), 0.5),  inset 0 250px 20px transparentize(darken($pu, 10%), 0.5);
            &:before{
               background:darken($p, 5%);
               box-shadow:inset 0 -20px 30px -20px transparentize(darken($pu, 10%), 0.5), inset 0 60px 40px -20px transparentize(darken($pu, 10%), 0.5);
            }
            &:after{
              background:darken($p, 10%);
              box-shadow:inset 0 -40px 30px -15px transparentize(darken($pu, 10%), 0.5);
              left:-4px;
            }
          }
          &:nth-of-type(11){
            background:darken($p, 10%);
            &:before{
               background:darken($p, 5%);
               box-shadow:inset 0 -90px 50px -20px transparentize(darken($pu, 10%), 0.5), inset 0 60px 40px -20px darken($p, 5%);
            }
            &:after{
              background:$p;
              box-shadow:inset 0 40px 30px -15px transparentize(darken($pu, 10%), 0.5);
            }
          }
          &:nth-of-type(21){
            &:after{
              transform:translateX(-125%);
              transition-delay:0ms;
            }
          }
        }
      }
    }
  }
  #wrap{
    transform:scale(0.5);
    transition:all 800ms cubic-bezier(1, 0.25, 0.25, 1);
    &:before, &:after{
      content:'';
      position:absolute;
      width:100%;
      height:100%;
      left:0;
      top:0;
      box-shadow:0 0 0 25px #000, 0 0 0 50px $w, inset 0 -5px 0 #000, inset 0 5px 0 #000;
      transition:box-shadow 800ms cubic-bezier(1, 0.25, 0.25, 1), clip-path 1000ms ease-in-out;
      z-index:1;
      clip-path: polygon(-200% 50%, 300% 50%, 300% -300%, -200% -300%);

    }
    &:after{
      clip-path: polygon(-200% 50%, 300% 50%, 300% 300%, -200% 300%);

    }
    .text{
      position:absolute;
      width:100%;
      height:100%;
      z-index:99;
      left:0;
      top:0;
      overflow:visible;
      a{
        position:absolute;
        bottom:-75px;
        right:-45px;
        z-index:9;
        color:#fff;
        font-size:22px;
        transition:0.2s ease-in-out;
        display:inline-block;
        overflow:hidden;
        i{
          display:inline-block;
          transition:transform 600ms cubic-bezier(1, 0.25, 0.25, 1), color 0.2s ease-in-out;
          transform:translateY(75px);
          
        }
        &:hover{
          color:$pu;
          i{
            color:$pu;
          }
        }
        &:last-of-type{
          right:-75px;
        }
      }
      h5{
        color:transparent;
        margin:0px;
        position:absolute;
        left:-375px;
        top:-102.5px;
        span{
          font-size:20px;
          display:inline-block;
          margin-left:5px;
          letter-spacing:22px;
          transform:scaleY(0.75);
          overflow:hidden;
          font-weight:100;
          &:before{
            color:#fff;
            content:'developer';
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%, calc(-50% + 30px));
            transition:transform 400ms cubic-bezier(1, 0.25, 0.25, 1), opacity 0.2s ease-in-out;
            opacity:0;
          }
          &:first-of-type{
            transform-origin:calc(100% + 20px) 50%;
            transform:rotate(-90deg) scaleY(0.85) translateX(10px);
            margin-left:0;
            &:before{
              content:'creative';
              position:absolute;
              top:50%;
              left:50%;
            }
          }
        }
      }
    }
  }
  #wrap .inner{
    width:400px;
    height:400px;
    display:grid;
    grid-template-columns: repeat(20, 25px);
    grid-template-rows: repeat(20, 25px);
    transform-style:preserve-3d;
    transform:rotateY(0deg) scaleY(0.95) translateY(-3%);
    transition:all 800ms cubic-bezier(1, 0.25, 0.25, 1);
    &:before, &:after{
      color:#fff;
      font-size:20px;
      letter-spacing:20px;
      position:absolute;
      font-weight:900;
    }
    .box{
      position:relative;
      background:$p;
      transition:all 800ms cubic-bezier(1, 0.25, 0.25, 1);
      transform-style:preserve-3d;
      z-index:1;
      &:before, &:after{
        content:'';
        background:$p;
        position:absolute;
        width:100%;
        transition:all 800ms cubic-bezier(1, 0.25, 0.25, 1);
        transform-style:preserve-3d;
      }
      &:first-of-type{
        grid-column: 1;
        grid-row: 3 / span 5;
        z-index:3;
        &:before,&:after{
          content:'';
          position:absolute;
          height:52.5%;
          top:-52.5%;
          transform-origin:bottom;
          transform:rotateX(49deg);
        }
        &:after{
          height:57.5%;
          top:-10%;
          transform:rotateX(45deg);
        }
      }
      &:nth-of-type(2){
        grid-column: 3;
        grid-row: 6 / span 4;
        z-index:1;
        &:before{
          height:125%;
          bottom:-125%;
          transform-origin:top;
          transform:rotateX(45deg);
           background:linear-gradient(-125deg, darken($p, 12.5%), darken($p, 10%) 45%, $p 45%, $p 200px);
          background-position:50% -150px;
          background-size:100% 220%;
          background-repeat:no-repeat;
        }
        &:after{
          
        box-shadow:inset 0 20px 20px -20px $p, inset 0 -55px 0 $p, inset 0 -56px 0 $p;
         height:200%; 
         top:75%; transform:translateX(-200%);
        }
      }
      &:nth-of-type(3){
        grid-column: 1;
        grid-row: 3 / span 5;
        z-index:3;
        &:before{
          top:-35%;
          width:100%;
          height:125%;
          transform:translateZ(-50px);
        }
        &:after{
          top:167.5%;
          left:400.5%;
          width:100%;
          height:60%;
          transform-origin:top;
          transform:translateZ(-51px) rotateX(43deg);
         
        }
      }
      &:nth-of-type(4){
        grid-column: 5;
        grid-row: 1 / span 7;
        &:before{
          height:41.5%;
          top:-41.5%;
          transform-origin:bottom;
          transform:rotateX(135.5deg);
        }
        &:after{
          height:41%;
          top:59%;
          transform-origin:bottom;
          transform:rotateX(45deg);
        }
      }
      &:nth-of-type(5){
        grid-column: 7;
        grid-row: 3 / span 3;
        &:before{
          height:120%;
          top:160%;
          width:100%;
        }
        &:after{
          height:150%;
          top:200%;
          width:100%;
          left:-200%;
        }
      }
      &:nth-of-type(6){
        grid-column: 11;
        grid-row: 10 / span 3;
        transform:translateY(-5%);
        &:before{
          height:45%;
          bottom:58%;
          transform-origin:top;
          transform:rotateX(45deg);
        }
      }
      
      &:nth-of-type(7){
        grid-column: 3;
        grid-row: 13 / span 2;
        z-index:-5;
        &:before{
          height:105%;
          top:-105%;
          transform-origin:bottom;
          transform:rotateX(-45deg);
          background:linear-gradient(to bottom, transparentize(darken($pu, 10%), 0.5), darken($p, 1.5%)), $p;
        }
        &:after{
          height:350%;
          left:1000%;
          bottom:-67.5%;
        }
      }
      &:nth-of-type(8){
        grid-column: 9;
        grid-row: 3 / span 11;
        z-index:9;
        &:before{
          height:25.75%;
          top:-25.75%;
          transform-origin:bottom;
          transform:rotateX(45deg);
          z-index:9;
        }
        &:after{
          height:25.75%;
          top:54.25%;
          transform-origin:bottom;
          transform:rotateX(45deg);
        }
      }
      &:nth-of-type(9){
        z-index:-1;
        grid-column: 11;
        grid-row: 1 / span 6;
        &:before{
          height:47.5%;
          top:0%;
          transform-origin:bottom;
          transform:rotateX(-135deg);
        }
        &:after{
          height:35%;
          top:112%;
        }
      }
      &:nth-of-type(10){
        grid-column: 13;
        grid-row: 1 / span 7;
        box-shadow:inset 0 210px 0 $p, inset 0 -100px 20px -100px darken($p, 10%);
        &:before{
          height:40%;
          top:0%;
          transform-origin:top;
          transform:rotateX(-30deg);
        }
        &:after{
          height:40%;
          top:-10px;
          left:0px;
          transform-origin:bottom;
          transform: translateZ(-40px) rotateX(32deg) ;
        }
      }
      &:nth-of-type(11){
        grid-column: 16;
        grid-row: 1 / span 6;
        &:before{
          height:125%;
          top:100%;
        }
        &:after{
          height:100%;
          top:125%;
          transform:rotateX(-30deg);
          transform-origin:bottom;
        }
      }
      &:nth-of-type(21){
        grid-column:15;
        grid-row: 1 / span 17;
        background:transparent;
        transform:translateX(-55%);
        overflow:hidden;
        &:after{
          content:'click me';
          writing-mode:vertical-lr;
          height:100%;
          background:transparent;
          text-align:center;
          font-size:30px;
          letter-spacing:5px;
          transition:transform 400ms cubic-bezier(1, 0.25, 0.25, 1), letter-spacing 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
          color:$w;
          transition-delay:1200ms, 0s;
          font-family:'Nova Square';
        }
      }
      @for $i from 12 through 20{
        &:nth-of-type(#{$i}){
          grid-column: #{(($i - 12) * 2) - 1};
          grid-row: 1 / span 17;
          z-index:3;
          background:linear-gradient(to top, transparentize(darken($pu, 10%), 0.5), $p 25%), $p;
          background-size:100% 400%;
          background-position:0% 100%;
          background-repeat:no-repeat;
          overflow:hidden;
          z-index:99;
          transform:translateZ(100px);
          transform-style:preserve-3d;
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
          transition-delay:500ms;
        }
        &:nth-of-type(20){
          grid-column:16;
        }
      }
    }
  }
}