// December 2021 update: Chrome no longer likes stacking translateZs :(

// My first serious foray into CSS 3D transforms
// Try in Dark UI mode (toggle top right)

// Also an example of melding several of my WIP UI kits:
// https://codepen.io/collection/ABpRqv/


// Variables

$exploder-viewport-width: 360px;
$exploder-viewport-height: 360px;
$exploder-annotation-width: 180px;
$exploder-viewport-annotation-gap: 16px;
$exploder-component-gap-v:$layout-gap-default;
$exploder-duration: .5s;


// Selectors

main {
  align-items:center;
}

.exploder {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  margin:-($exploder-component-gap-v/2) 0;
  padding:0 ($exploder-annotation-width/2 + $exploder-viewport-annotation-gap);
  flex:0 100%;
  
  .component {
    margin:($exploder-component-gap-v/2) ($exploder-annotation-width/2 + $exploder-viewport-annotation-gap);
    flex:0 0 $exploder-viewport-width;
    position:relative;
    label {
      position:absolute;
      left:0;
      top:0;
      z-index:100;
      opacity:0;
      @include transitionDefault('opacity');
    }
  }
  .component:hover label {
    opacity:1;
  }
  .component:hover input:checked + label {
    transition-delay:$exploder-duration + .15s;
  }
  .graphics {
    position:relative;
    display:flex;
  }
  .viewport {
    height:$exploder-viewport-height;
    flex:1 0px;
    order:2;
    display:flex;
    align-items:center;
    justify-content:space-around;
    > * {
      transition:transform $exploder-duration ease-in-out;
    }
  }
  input:checked ~ .graphics .viewport:hover > *, input:checked + label:hover + .graphics .viewport > * {
    transform:rotateX(60deg) rotateZ(-45deg) scale(1.25) translateZ(-96px);
    .bar {
      transition-delay: .25s;
      box-shadow:-40px 40px 40px hsla(0,0,0,.20);
      .dark-ui & {
        box-shadow:-40px 40px 40px hsla(0,0,0,.7);
      }
    }
    .bar::after {
      transform:translateZ(196px);
    }
    .remaining {
      transform:translateZ(128px);
      transform-style:preserve-3d;
      overflow:visible;
      &::before {
        transform:translateZ(24px);
      }
    }
    .phase,.current-state {
      transform:translateZ(64px); 
      transform-style:preserve-3d;
    }
    .phase::after {
      transform:translateZ(24px);
      box-shadow:0px 0px 5px black;
      .dark-ui & {
        box-shadow:0px 0px 5px white;
      }
    }
  }
  
  .annotation {
    opacity:0;
    flex:0 0px;
    position:relative;
    font-size:14px;
    color:$color-secondary;
    transition:all .35s ease-in-out;
    pointer-events:none;
    &.left {
      order:1;
      .note {
        left:-($exploder-annotation-width + $exploder-viewport-annotation-gap);
        justify-content:flex-end;
        text-align:right;
        &::before {
          right:0;
          left:($exploder-annotation-width + $exploder-viewport-annotation-gap/2);  
        }
      }
    }
    &.right {
      order:3;
      .note {
        right:-($exploder-annotation-width + $exploder-viewport-annotation-gap);
      }
    }
  }
  input:checked ~ .graphics .viewport:hover ~ .annotation, input:checked + label:hover + .graphics .annotation {
    opacity:1;
    transition-delay:$exploder-duration + .15s;
  }
  .note {
    position:absolute;
    box-sizing:content-box;
    display:flex;
    width:$exploder-annotation-width;
    height:1em;
    margin-top:-.6em;
    line-height:1.2em;
    z-index:99;
    &.upward {
      align-items:flex-end;
      &::before {
        bottom:0;
      }
    }
    &::before {
      content:"";
      box-sizing:content-box;
      position:absolute;
      padding:.6em 0 calc(.6em - 1px);
      height:1px;
      background-clip:content-box;
      background-color:currentColor;
      left:0;
      right:($exploder-annotation-width + $exploder-viewport-annotation-gap/2);
    }
  }
}


.progress-project {
  width:100%;
  transition:transform .5s ease-in-out;
  transform-style:preserve-3d;
  .phase, .remaining, .current-state {
    transition:transform .5s ease-in-out;
  }
  .bar {
    transition:all .25s ease-in-out;
    background-image:none;
  }
  .phase::after, .bar::after { 
    transition:all .5s ease-in-out;
    // 'all' was a happy accident for the ui theme aware elements. Makes a nice effect when you toggle between ui modes
  }
}

header {
  padding:20px 24px 32px;
}


footer {
  padding:32px 24px 20px;
  font-size:14px;
}