$box-width: 15em;
$box-height: 15em;

$tile-color: #ddd;
 
*,
*::before,
*::after {
  box-sizing: border-box;
}    
 
html {
  font-family: Roboto;
}

.wrap {
  height: $box-height; 
  width: $box-width;
  margin: 7em auto 0;
  position: relative;
  p {
    position: absolute;
    z-index: 1;
    top: 4.4em; 
    font-weight: bold;
    text-transform: uppercase;
    color: #222;
    line-height: 1.5;
    font-size: 1.25em; 
    width: 110%;
    left: 0;  
  }
}

.line {
  display: inline-block;  
  opacity: 0;
}

.container {
  width: 100%;
  height: 100%; 
  perspective: 50em;
  position: relative;
  transform: rotate(45deg);
  &::before,
  &::after {
    content: '';
    position: absolute;
    background: black;
    top: -1em;
    left: -1em;  
    z-index: 2;
  }
  &::before {
    height: .1em;
    width: 0; 
    box-shadow: -2em $box-width*1.13 0 0 #000;
    left: -20em;
  }  
  &::after {
    height: 0;   
    width: .1em;
    box-shadow: $box-width*1.13 -2em 0 0 #000;
    top: -20em;
  }
} 

.active {
  &::before {
    width: 150%;
    transition: .6s;
    left: -2.5em;
  }
  &::after {  
    height: 150%; 
    transition: .6s;
    top: -2.5em;
  }
}
 
.box-wrap { 
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  transition: .7s cubic-bezier(0, -0.295, 0.045, 1.240);
  transform-origin: center center;
} 
 
.box {
  height: 100%;
  width: 100%;  
  position: absolute;
  backface-visibility: hidden;
  background: $tile-color; 
  line-height: 1.4;
} 

.front {
  p {
    transform: rotate(-45deg); 
    transform-origin: center center;
  }
}

.back {
  position: absolute;
  transform: rotateY(180deg);
  top: 0;
  left: 0;
}