html {
  -ms-touch-action: none;
}
html,body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  height: 100%;
}
body {
  font-family: Helvetica, Arial;
  color: #fff;
  background: #222;
}
.gradient,
.crack,
#phone {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

a {
  color: rgba(255,255,255,.6875);
}
a:hover {
  color: #fff;
}

canvas#webgl {
  position: absolute;
  top: -2%;
  right: 1%;
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity: 0;
}
html.started canvas#webgl {
  opacity: 1;
}

header {
  position: relative;
  z-index: 10;
  margin: 5px auto;
}
header>#logo-main {
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
}

.slider {
  z-index: 5;
  width: 240px;
  height: 80px;
  margin: 15px auto;
  position: relative;
  border-radius: 40px;
  background: #bbb linear-gradient(180deg,#212121,#3e3c3c);
}
.slider>.button {
  position: absolute;
  width: 80px;
  height: 80px;
  background: transparent url(/statics/img/button.png) center center no-repeat;
  background-size: contain;
  left: 0px;
  cursor: pointer;
}
.slider>.back {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  bottom: 6px;
  border-radius: 34px;
  background: #171717;
}
.slider>.off {
  position: absolute;
  width: 100%;
  top: 6px;
  right: 6px;
  bottom: 6px;
  background: transparent url(/statics/img/off.svg) right 64px center no-repeat;
  background-size: auto 18px;
}
.slider>.on {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 0px;
  height: 52px;
  overflow: hidden;
}
.slider>.on svg {
  margin-top: 24px;
  margin-left: 24px;
  height: 18px;
}

/* background gradients */
.gradient {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity: 0;
}
.started .gradient {
  -webkit-transition-duration: 60s;
  transition-duration: 60s;
}

.gradient.b { border-radius: 38px; }
.started .gradient { opacity: 1; }

.started .gradient.one {
  -webkit-transition-duration: 1s;
  -webkit-transition-delay: 2s;
  transition-duration: 1s;
  transition-delay: 2s;
}
.started .gradient.two {
  -webkit-transition-delay: 3s;
  transition-delay: 3s;
}
.started .gradient.three {
  -webkit-transition-delay: 63s;
  transition-delay: 63s;
}

.gradient.a.one   { background-image: linear-gradient(180deg,#e8af66,#f89456,#d29457); }
.gradient.a.two   { background-image: linear-gradient(180deg,#ff8d5d,#ff9a80,#ff73a3); }
.gradient.a.three { background-image: linear-gradient(180deg,#fec3a7,#aeb3e8,#c9aef1,#d5d8ff); }

.gradient.b.one   { background-image: linear-gradient(180deg,#df6f28,#f9ba8e); }
.gradient.b.two   { background-image: linear-gradient(180deg,#d98771,#feb9b4); }
.gradient.b.three { background-image: linear-gradient(180deg,#b495c9,#e7dff7); }

/* text transitions */
.text {
  -webkit-transition: fill 1s ease-in-out;
  transition: fill 1s ease-in-out;
}
.started #logo {
  -webkit-animation: text-one 123s forwards;
  animation: text-one 123s forwards;
}
.started #burn {
  -webkit-animation: text-two 123s forwards;
  animation: text-two 123s forwards;
}

@-webkit-keyframes text-one-a {
  to { fill: #000; }
}
@-webkit-keyframes text-one {
  1.6260162% { fill: #000; }
  2.4390243% { fill: #ffbd5c; }
  51.219512% { fill: #f16482; }
  100% { fill: #ff887f; }
}
@keyframes text-one {
  1.6260162% { fill: #000; }
  2.4390243% { fill: #ffbd5c; }
  51.219512% { fill: #f16482; }
  100% { fill: #ff887f; }
}

@-webkit-keyframes text-two {
  1.6260162% { fill: #EA9456; }
  2.4390243% { fill: #ffbd5c; }
  51.219512% { fill: #f16482; }
  100% { fill: #ff887f; }
}
@keyframes text-two {
  1.6260162% { fill: #EA9456; }
  2.4390243% { fill: #ffbd5c; }
  51.219512% { fill: #ff887f; }
  100% { fill: #ccb8dd; }
}

/* cracks */
.crack {
  pointer-events: none;
  -webkit-pointer-events: none;
  z-index: 10;
  visibility: hidden;
  -webkit-transition: visibility;
  transition: visibility;
  background-size: cover;
  opacity: .6;
}
.crack.a {
  background: transparent url(/statics/img/glass.png) 50% center no-repeat;
  -webkit-transition-delay: 93s;
  transition-delay: 93s;
}
.crack.b {
  background: transparent url(/statics/img/glass.png) 50% center no-repeat;
  -webkit-transform: scale3d(-1,-1,1);
  transform: scale3d(-1,-1,1);
  -webkit-transition-delay: 153s;
  transition-delay: 153s;
}
.started .crack {
  visibility: visible;
}


/* actual site */
#phone {
  background: transparent url(/statics/img/bg.jpg) center top no-repeat;
  background-size: 100% auto;
  opacity: .1;
}

section#content {
  display: none;
}

footer {
  position: absolute;
  bottom: 20px;
  color: rgba(255,255,255,.32);
  padding: 0 5%;
  font-weight: bold;
  text-align: center;
  font-size: 11px;
  opacity: .5;
}

/* responsiveness */
@media (min-width: 520px) {
  body {
    perspective: 800px;
  }

  html:not(.mobile) #app-container {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 486px;
    height: 891px;
    padding-top: 83px;
    background: transparent url(/statics/img/iphone.png) center center no-repeat;
    background-size: contain;
    -webkit-transform-origin: center top;
    -webkit-transform: scale3d(.5,.5,1) translate3d(-243px,-445px,0) rotate3d(0,1,0,4deg);
    transform-origin: left top;
    transform: scale3d(.5,.5,1) translate3d(-243px,-445px,0) rotate3d(0,1,0,4deg);
    
  }
  html:not(.mobile) #app {
    background: #222;
    position: absolute;
    top: 138px;
    left: 60px;
    width: 360px;
    height: 640px;
    overflow: hidden;
    z-index: 20;
  }

  html:not(.mobile) section#content {
    display: block;
    position: relative;
    width: 730px;
    left: 50%;
    top: 45%;
    padding-top: 41px;
    -webkit-transform: translate3d(-365px,-223px,0);
    transform: translate3d(-365px,-223px,0);
  }
  section#content>.right {
    float: right;
    width: 243px;
  }
  section#content>.left {
    float: left;
    width: 243px;
  }
  section#content>.left,
  section#content>.right {
    content: '';
    display: block;
    clear: both;
  }
  section#content p {
    font-size: 14px;
    font-weight: bold;
    color: rgba(255,255,255,.48);
  }
  section#content p.highlight {
    color: rgba(255,255,255,.66);
  }
  footer {
    bottom: 20px;
    width: 100%;
    left: 0;
    padding: 0;
    opacity: 1;
  }
  footer>p {
    max-width: 730px;
    margin: 1em auto;
  }

}