/* Copyright 2016 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

body {
  align-items: center;
  color: var(--paper-grey-900);
  display: flex;
  flex-direction: column;
  font-size: 100%;
  justify-content: center;
  min-height: 100vh;
  overflow-y: hidden;
}

@keyframes slideUpContent {
  from {
    transform: translateY(186px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}


@keyframes fadeInAndSlideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes spin {
  from {
    transform: rotate(1440deg) scale(0.8);
  }
}

@keyframes fadeInAndSlideDownShadow {
  from {
    opacity: .6;
    top: 0;
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(.8);
  }
}

@keyframes colorize {
  from {
    -webkit-filter: grayscale(100%);
    opacity: .6;
  }
}

@keyframes bounce {
  0% {
    transform: matrix3d(0.8, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  7.61% {
    transform: matrix3d(0.907, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  11.41% {
    transform: matrix3d(0.948, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  15.12% {
    transform: matrix3d(0.976, 0, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.92% {
    transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  22.72% {
    transform: matrix3d(1.008, 0, 0, 0, 0, 1.008, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  30.23% {
    transform: matrix3d(1.014, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  50.25% {
    transform: matrix3d(1.003, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  70.27% {
    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

.content {
  align-items: center;
  animation: slideUpContent 600ms 1.8s cubic-bezier(.4, .2, 0, 1) both;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  max-width: 500px;
}

.heading {
  animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4, .2, 0, 1) both;
  font-size: 2.125em;
  margin-bottom: .25em;
  margin-top: 1.5em;
  text-align: center;
}

.subheading {
  animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4, .2, 0, 1) both;
  color: #939393;
  font-size: 1em;
  font-weight: 500;
  margin-top: .25em;
  text-align: center;
}

.logo {
  animation: fadeIn 600ms both, bounce 1s 600ms linear both;
  height: 96px;
  position: relative;
  width: 96px;
}

.logo-icon {
  animation: spin 2.4s cubic-bezier(.4, .2, 0, 1) both,
             colorize 300ms 700ms linear both;
  background-image: -webkit-image-set(url(chrome://welcome/logo.png) 1x,
                                      url(chrome://welcome/logo2x.png) 2x);
  background-size: 100%;
  height: 96px;
  width: 96px;
}

.logo-shadow {
  -webkit-filter: blur(16px);
  animation: fadeInAndSlideDownShadow 300ms 600ms both;
  background: rgba(0, 0, 0, .2);
  border-radius: 50%;
  height: 96px;
  position: absolute;
  top: 16px;
  width: 96px;
  z-index: -1;
}

.signin {
  animation: fadeInAndSlideUp 600ms 2s cubic-bezier(.4, .2, 0, 1) both;
  margin-top: 3em;
  text-align: left;
}

.signin-description {
  font-size: .875em;
  line-height: 1.725em;
  max-width: 344px;
}

.signin-buttons {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 2em;
}

.action {
  background: var(--google-blue-500);
  border-radius: 2px;
  color: white;
  font-size: .8125em;
  font-weight: 500;
  line-height: 2.25rem;
  padding: 0 1.5em;
}

.action:active {
  background: var(--google-blue-500);
}

.action:focus {
  background: var(--google-blue-700);
}

.link {
  color: var(--google-blue-700);
  display: inline-block;
  font-size: .8125em;
  margin: 1.5em;
  text-align: center;
  text-decoration: none;
}

.watermark {
  -webkit-mask-image: url(chrome://welcome/watermark.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  animation: fadeIn 1s cubic-bezier(0, 0, .2, 1) both;
  background: var(--paper-grey-400);
  bottom: 24px;
  height: 24px;
  position: absolute;
  width: 74px;
}

@media(max-height: 608px) {
  .watermark {
    display: none;
  }
}