@import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed');

* { box-sizing: border-box }
$c-bg: #39065A;
$c-a1: #39065A;
$c-a2: #6A0572;
$c-a3: #9A0F98;
$c-a4: #EA0599;

html, body {
  background-color: $c-bg;
  overflow: hidden;
  font-family: 'Barlow Semi Condensed', sans-serif;
}
body {
  font-size: calc(1em + 0.5vw);
}

// 1. create the css parallax container to scroll in
.parallax-container {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  perspective: 400px; // define the perspective to create the depth
  text-align: center;
}
.parallax-child {
  transform-style: preserve-3d; // 2. pass down the 3D perspective from the parent
}


.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 2em 0;
  background-color: $c-a2;
  &--alt {
    background-color: $c-a3;
  }
}
.section + .section { padding-top: 2em }

.button {
  transform-style: preserve-3d;  // pass down the 3D perspective from the parent
  border: none;
  color: $c-a4;
  background: linear-gradient(to bottom, $c-a4 40%, #56065d 60%); // create the top and bottom "walls" on the button
  border-radius: 1em;
  padding: 0;
  display: inline-block;
  font-family: 'Barlow Semi Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 
    0px -3px 10px 0 rgba($c-a4, 0.4), // top tight glow
    10px -15px 60px 0 rgba($c-a4, 0.3), // top large glow
    -0 3px 3px 0 rgba($c-a1, 0.3), // bottom tight shadow
    -0 15px 60px 0 rgba($c-a1, 0.3); // bottom large shadow
  position: relative;

  &__text {
    background: $c-a3;
    border-radius: 1em;
    padding: 0.4em 1.3em 0.6em;
    position: relative;
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.1, 0.67, 0.31, 1);
    transform: translate3d(0,0,6px); // 3. Move the outer layer of the button in the z axis
    text-shadow: 0 0px 7px rgba($c-a4, 0.8); // add some text-glow
  }

  // Interactivity
  cursor: pointer;
  transition: box-shadow 0.4s cubic-bezier(0.1, 0.67, 0.31, 1);
  &:hover {
    box-shadow: 
      0px -1px 1px 0 rgba($c-a4, 0.1),
      10px -15px 60px 0 rgba($c-a4, 0.1),
      0px 1px 1px 0 rgba($c-a1, 0.1),
      10px 15px 60px 0 rgba($c-a1, 0.1);
    .button__text {
      transform: translate3d(0,0,1px); // animate the button in z-axis
    }
  }
  &:focus, &:active {
    outline: none;
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
    .button__text {
      transform: translate3d(0,0,0);
    }
  }
}

.button + .button {
  margin-top: 2em;
}

.divider {
  transform-style: preserve-3d;  // pass down the 3D perspective from the parent
  margin: 2em 25% 4em;
  width: 50%;
  height: 10px;
  position: relative;
  background: #ead3ac;
  box-shadow: 
    0px -3px 10px 0 rgba(234, 211, 172, 0.37), // top tight glow
    10px -15px 60px 0 rgba(234, 211, 172, 0.61), // top large glow
    0 3px 3px 0 rgba(74, 29, 29, 0.38), // bottom tight shadow
    0 15px 60px 0 rgba(165, 92, 92, 0.84); // bottom large shadow

  &__top, &__front, &__bottom, .painting {
    display: block;
    width: 100%;
    position: absolute;
    top: 0; left: 0;
  }
  &__top {
    transform: rotateX(90deg) translateZ(50px);
    background: linear-gradient(to bottom, #ca5651 0%, #ead3ac 100%);
    height: 100px;
  }
  &__front {
    transform: rotateY(0deg) translateZ(50px);
    background: #fffcd1;
    height: 10px;
  }
  &__bottom {
    transform: rotateX(-90deg) translate3D(0, 0, -40px);
    background: #a55d5d;
    height: 100px;
  }
  .painting {
    width: 150px;
    transform: rotateX(10deg) translate3D(100px, -115px, 50px);
    border: 10px solid white;
  }
  
}

.fake-📰 {
  width: 100%;
  height: 70vh;
  margin: 0 auto;
  max-width: 150vh;
  fill: $c-a3;
  padding: 2em;
  &--alt {
    fill: $c-a2;
  }
}

// debug
.section_off {
  transform: translate3d(50px, 0, -100px) rotateY(20deg);
}