/**
 *
 * Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

@import '../third-party/normalize/normalize.scss';

* {
  box-sizing: border-box;
}

html, body{
  height: 100%;
  width: 100%;
  background: rgb(0,0,0);
}

body{
  margin: 0;
  padding: 0;
  font-family: cardo, Georgia, Times, serif;
}

p{
  margin: 0;
  font-size: 1.2em;
  line-height: 1.5;
}

/*
The timeline-track is a placeholder to give the page height so scroll will work.
Its height is set from JavaScript as the largest maximum limit of all animations.
*/
.timeline-track{
  width: 1px; /* needs width, otherwise height will be ingored */
  position: absolute;
}

/*
Scroll events don't trigger on vertical scrolling if overflow-x is applied to the body.
Wrapping all content to prevent horizontal scrolling.
*/
.wrapper{
  overflow-x: hidden;
  font-size: 100%;
  background: black;
  position: relative;
}

.scene{
  position: fixed;
}

.scene--intro{
  @extend .scene;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(66, 66, 66, 0.9);
}

.scene--alice{
  @extend .scene;
  z-index: 1;

  /*
    Scale the scene size by tweaking the font-size on .wrapper
    The background will scale with the scene. Fonts are in `rem` so they stay constant.
  */
  height: 1200px;
  width: 1920px;
  background: url(../images/bg_scn1.jpg) left top;
  background-size: 100%;

  @media all and (max-width: 1280px){
    margin-left: -18em;
  }
}

.scene--outro{
  @extend .scene;
  z-index: 3;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 1);
  visibility: hidden;

  header, .description{
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in;
  }

  &.complete{
    header, .description{
      opacity: 1;
    }
  }
}

footer{

  a{
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: 12;
    text-indent: -99em;
    overflow: hidden;
  }

  .ultranoir-logo{
    right: 5rem;
    width: 3.8rem;
    height: 4.5rem;
    background: url(../logos/logo-ultranoir.svg) center top / contain;
    background-repeat: no-repeat;
  }

  .adobe-logo{
    right: 1rem;
    width: 2.7rem;
    height: 4.5rem;
    background: url(../logos/logo-adobe-bottom.svg) center bottom / contain;
  }
}

header{
  padding: 5em 0 1em;
  font-size: 2em;
  font-weight: 700;
  color: #eee;
  text-align: center;

  span{
    display: block;
    white-space: nowrap;
  }
}

.description{
  padding: 1rem 3rem;
  font-size: 1.3em;
  color: #eee;
  text-align: center;

  a{
    white-space: nowrap;
    color: inherit;

    &:active{
      color: #A70203;
    };

    &:hover{
      text-decoration: none;
    }
  }
}

.direction{
  display: none;
  margin: 3em auto 0;
  font-weight: 100;
}

.warning{
  text-align: left;
  border-radius: 22px;
  background: #fcffd5 url(../images/warning.png) left center no-repeat;
  background-size: auto 75%;
  background-position: -5% 5%;
  padding: 1em;
  width: 50%;
  min-width: 40em;
  margin: 0 auto;

  p{
    color: #333;
    padding: 1rem 1rem 1rem 4.5rem;
  }

  a{
    color: #A70203;

    &:active{
      color: black;
    }
  }
}

h1{
  font-size: 1em;
  margin: 8em auto 3em;
  width: 15em;

  /* hide the text content */
  height: 9em;
  padding-top: 9em;
  overflow: hidden;

  background: url('../images/title-full.png') center bottom no-repeat;
  background-size: contain;
}

.content{
  visibility: hidden;
  position: relative;
  height: 100%;
  padding-top: 1px; /* prevent margin-collapse from H1 */
}

.content p{
  will-change: margin;
}

/* `shapes` class added by feature detection in JS */
html.shapes{
  .warning{
    display: none;
  }

  .direction{
    display: block;
  }

  .content{
    visibility: visible;
  }
}

.shape-shim{
  height: 100%;
  width: 50%;
}

.shape-shim--left{
  float: left;
  @extend .shape-shim;
  $shape: polygon(0px 0px, 714px 0px, 705px 200px, 653px 262px, 651px 345px, 722px 381px, 693px 411px, 690px 455px, 776px 476px, 751px 516px, 751px 556px, 851px 559px, 846px 611px, 721px 650px, 710px 694px, 753px 728px, 782px 790px, 800px 839px, 761px 898px, 657px 923px, 625px 1024px, 598px 1199px, 0px 1200px);

  shape-outside: $shape;
  -webkit-shape-outside: $shape;
}

.shape-shim--right{
  float: right;
  @extend .shape-shim;
  $shape: polygon(94px 1007px, 82px 886px, -2px 840px, -2px 794px, 12px 756px, 15px 685px, 58px 618px, 139px 600px, 154px 532px, 89px 472px, 95px 414px, 143px 374px, 219px 285px, 146px 177px, 212px 1px, 960px 0px, 960px 1200px, 59px 1199px);

  shape-outside: $shape;
  -webkit-shape-outside: $shape;
}
