// =========================
// colors
// =========================
$master-grey: #f0f0f0;

// 3 shades of grey
$master-l-10: mix(white, $master-grey, 10%);
$master-d-10: mix(black, $master-grey, 10%);
$master-d-15: mix(black, $master-grey, 15%);

// font colors
$font-base: mix(black, $master-grey, 50%);
$font-dark: mix(black, $master-grey, 80%);
$font-spot: #08c;




// =========================
// one breakpoint is enough for this demo
// =========================
$wide-m:600px;

@mixin wide-m {
  @media (max-width: #{$wide-m}) {
    @content;
  }
}
// @include wide-m {};



// =========================
// max-width for centered boxes
// =========================
$mx-width: 50rem;




// =========================
// reset and styling stuff
// =========================
*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: "Myriad Pro", sans-serif;
  font-size: 100%;
  line-height: 1.5;
  color: $font-base;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  @include wide-m { font-size: 70%; }
}

a {
  text-decoration: none;
  color: $font-spot;
}

strong {
  font-weight: normal;
  color: $font-dark;
}




// =========================
// this wraps all items
// =========================
.wrap-3d {
  width:100%;
  height: 100%;
  max-height: 100%;
  padding-top: 5%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  background-color: $master-grey;
  transform-style: preserve-3d;
  perspective: 150rem;
  perspective-origin: 50% 110%;
}




// =========================
// this wraps one single item
// =========================
.item-3d {
  width: 100%;
  margin-bottom: 20%;
  padding-top: 10%;
  padding-bottom: 5%;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  //box-shadow: inset 0 0 0 1px red;
  
  @include wide-m { margin-bottom: 40%; }
}




// =========================
// this fakes the 3d surface
// has to be wider than it's parent
// =========================
.ground {
  position:absolute;
  top: 0;
  right: -50%;
  bottom: 0;
  left: -50%;
  width: 200%;
  margin: 0 auto;
  background-image:linear-gradient($master-d-10, $master-l-10 60%);
  background-size: 100%;
  transform-origin: 50% 100%;
  transform: rotateX(70deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  //box-shadow: inset 0 0 0 10px black;
  
  &:before, &:after {
    content:'';
    position: absolute;
    width: 100%;
  }
  
  // this contains a radial-gradient, which fakes the watch's dropshadow 
  &:before {
    top: 0;
    left: 50%;
    height: 100%;
    width: 50%;
    max-width: $mx-width;
    background-image:radial-gradient($master-d-15, rgba($master-d-15,0) 60%);
    background-size: 50% 80%;
    background-repeat: no-repeat; 
    transform: translateX(-50%);
    //box-shadow: inset 0 0 0 5px purple;
  }
  
  // the front-side
  &:after {
    bottom: -500px;
    left: 0;
    height: 500px;
    background-image: linear-gradient($master-d-10, $master-l-10);
    transform-origin: 50% 0;
    transform: rotateX(-70deg);
    //box-shadow: inset 0 0 0 5px blue;
  }
}


//switching the dropshadows from left to right
.item-3d:nth-child(even) .ground:before {
  background-position: 100% 50%;
  animation: floating-shadow-r 5s -1s infinite;
}

.item-3d:nth-child(odd) .ground:before {
  background-position: 0 50%;
  animation: floating-shadow-l 5s -1s infinite;
}


// animations for the shadows
@keyframes floating-shadow-l {
  0%, 100% { 
    background-size: 35% 80%;
    background-position: 10% 80%; 
  }
  50% { 
    background-size: 50% 80%;
    background-position: 0 80%; 
  }
}

@keyframes floating-shadow-r {
  0%, 100% { 
    background-size: 35% 80%;
    background-position: 90% 80%; 
  }
  50% { 
    background-size: 50% 80%;
    background-position: 100% 80%; 
  }
}




// =========================
// a figure element that wraps 
// the image and the caption
// =========================
.item-content {
  position:relative;
  width: 100%;
  max-width: $mx-width;
  margin: 0 auto;
  display: flex;
  align-items: center;
  transform: translateZ(0); // fixes the layers in Safari
  //box-shadow: inset 0 0 0 1px green;
}



// =========================
// additional wrap for the image
// =========================
.item-img {
  position:relative;
  float: left;
  display: block;
  width: 50%;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  animation: floating 5s -1s infinite;
  //box-shadow: inset 0 0 0 1px red;
  
  img {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: 50% 100%;
    transform: translateZ(-5rem);
  }
}

.item-3d:nth-child(even) .item-img {
  float: right;
  order: 1;
}

// animation for the image
@keyframes floating {
  0%, 100% { transform: translateY(-5%); }
  50% { transform: translateY(0); }
}






// =========================
// the caption
// =========================
.item-caption {
  display: block;
  position: relative;
  float: left;
  width: 50%;
  //box-shadow: inset 0 0 0 1px red;
}

.item-3d:nth-child(odd) .item-caption {
  padding-left: 10%;
  @include wide-m { padding-left: 5%; }
}

.item-3d:nth-child(even) .item-caption {
  text-align: right;
  padding-right: 10%;
  
  @include wide-m { padding-right: 5%; }
}

.item-caption p {
  font-size: 87.5%;
  line-height: 1.333;
  margin-bottom: 1.25rem;
  
  @include wide-m { margin-bottom: 0.5rem; }
}

.item-caption p a {
  position: relative;
  display: inline-block;
  margin-bottom: 0.3rem;
  
  &:before {
    content: '';
    position: absolute;
    right: 1rem;
    bottom: 3px;
    left: 0;
    height: 1px;
    background-color: $font-spot;
    opacity: 0;
    transition: opacity 0.25s;
  }
  
  &:after {
    content: '\003E';
    padding-left: 0.5rem;
    text-decoration: none;
  }
  
  &:hover:before, &:active:before, &:focus:before {
    opacity: 0.5;
  }
}





// =========================
// the intro
// =========================
.intro {
  position: relative;
  width: 100%;
  max-width: $mx-width;
  margin: 0 auto;
  padding: 15% 2rem;
  text-align: center;
  
  &:after {
    content: '\2193';
    position: absolute;
    bottom: 20%;
    left: 0;
    width: 100%;
    font-size: 150%;
    animation: scroll-arrw 1s -1s infinite linear;
  }
}

@keyframes scroll-arrw {
  0% { transform: translateY(0); opacity: 0; }
  50% { transform: translateY(80%); opacity: 1; }
  100% { transform: translateY(160%); opacity: 0; }
}

.intro h1 {
  font-size: 250%;
  font-weight: normal;
  color: $font-dark;
}

.intro p {
  margin-bottom: 2rem;
  font-size: 175%;
  line-height: 1.4286;
}





// =========================
// the footer
// =========================
.footer {
  padding: 0 2rem 20% 2rem;
  text-align: center;
  transform: translateZ(0);
  
  a {
    display: inline-block;
    position: relative;
    color: $font-dark;
    
    &:before {
      content: '';
      position: absolute;
      right: 0;
      bottom: 3px;
      left: 0;
      height: 1px;
      background-color: $font-dark;
      opacity: 0;
      transition: opacity 0.25s;
    }
  
    &:hover:before, &:active:before, &:focus:before {
      opacity: 0.5;
    }
  }
}