html, body
  height: 100%
  background-color: #f5efe6

.panel
  background-color: hsl(0deg, 53%, 58%)

  position: relative
  height: 100%
  z-index: 1
  transform-style: preserve-3d
   
  &:after, &:before
    content: ''
    display: block
    position: absolute
    height: 100%
    width: 100%
    top: 0
    left: 0
    background-color: hsl(0deg, 53%, 73%)
    z-index: -1
    
  &:before
    background-color: hsl(0deg, 53%, 88%)
      
  &.entering
    transform: rotateZ(-180deg) translateZ(1px)
    transform-origin: 0 100%
    animation: 1.2s entering-rotate-down forwards
      
  &.entering
    &:after, &:before
      transform: rotateZ(45deg) translateZ(-1px)
      transform-origin: 0 100%
      animation: 1.2s entering-rotate-down-sudo forwards

    &:before
      animation: 1.2s entering-rotate-down-sudo forwards
      transform: rotateZ(90deg) translateZ(-1px)
        
        
      
  &.exiting
    transform: rotateZ(0deg) translateZ(1px)
    animation: 1.2s exiting-rotate-down forwards
    transform-origin: 100% 100%
    
    &:after, &:before
      transform: rotateZ(-30deg) translateZ(-1px)
      transform-origin: 100% 100%
      animation: 1.2s exiting-rotate-down-sudo forwards

    &:before
      animation: 1.2s exiting-rotate-down-sudo forwards
      transform: rotateZ(-60deg) translateZ(-1px)

@keyframes entering-rotate-down
  to
    transform: rotateZ(0deg)
  
@keyframes entering-rotate-down-sudo
  to
    transform: rotateZ(0deg) translateZ(-1px)
      
      
@keyframes exiting-rotate-down
  to
    transform: rotateZ(90deg)
  
@keyframes exiting-rotate-down-sudo
  to
    transform: rotateZ(0deg) translateZ(-1px)