$landing: (
  columns: 1,
  gutter: 0
);

$landing--md: (
  columns: 3,
  media: $media-md,
  gutter: 0
);

.landing {
  height: 100%;
  width: 100%;
  @include grid-container;

  .landing-intro {
    @include grid-column(1, $landing);
    @include grid-media($landing--md) {
      @include grid-column(2);
    }

    background: linear-gradient(darken($primary, 15%), $primary, darken($primary, 5%) 80%, $primary);
    color: white;
    position: relative;

    height: 100vh;
    width: 100%;
    overflow: hidden;

    &__text {
      position: absolute;
      z-index: 2;
      @include grid-media($landing--md) {
        margin-top: 4rem;
      }
    }

    &__cta-button {
      color: $primary;
      background-color: white;
      transition: transform .15s ease;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
      }
    }

    &__inner {
      position: relative;
      margin: 4rem 3rem;
    }

    &__lead {
      font-weight: 700;
    }

    &__sample-graph {
      opacity: 0.25;
      position: absolute;
      bottom: 0;
      width: 100%;
    }

    &__coins {
      position: absolute;
      text-align: center;
      span {
        opacity: 0.1;
        line-height: 7rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
    }
  }

  .landing-auth {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: scroll;
    @include grid-column(1, $landing);
    @include grid-media($landing--md) {
      @include grid-column(1);
    }

    &__body {
      flex: 1 0 auto;
    }

    &__footer {
      text-align: center;
      p {
        margin: 0;
      }
    }

    padding: 4rem 3rem;
  }

  .landing__coin-icon {
    perspective: 800px;
    transform-style: preserve-3d;
    perspective-origin: 50% 50%;
    font-size: 5rem;
  }

  .stripes {
    position: absolute;
    transform: skewY(-12deg);
    display: grid;
    grid: repeat(5, 200px) / repeat(10, 1fr);
    height: 100%;
    width: 100%;
  }

  .stripes :nth-child(1) {
    grid-column: span 3;
    background: linear-gradient(
      100grad,
      rgba(lighten($primary, 15%), 0.4),
      rgba(lighten($primary, 15%), .15) 20%,
      rgba($primary, 0)
    );
  }

  .stripes :nth-child(2) {
    grid-area: 2 / span 2 / auto / -1;
    background: linear-gradient(100grad,rgba(0,119,204,0),rgba(0,119,204,.05) 40%,rgba(0,119,204,.35));
    background: linear-gradient(
      100grad,
      rgba(lighten($primary, 15%), 0),
      rgba(lighten($primary, 15%), 0.05) 40%,
      rgba($primary, 0.35)
    );
  }

  .stripes :nth-child(3) {
    background: linear-gradient(
      100grad,
      rgba(lighten($primary, 15%), 0.4),
      rgba(lighten($primary, 15%), .15) 20%,
      rgba($primary, 0)
    );
    grid-row: 3;
    grid-column: span 5;
  }
}

.changelog {
  h2 { font-size: 2.5rem; }
  h3 { font-size: 2rem; }
  h1, h2, h3 {
    margin-bottom: 1rem;
  }

  background-color: rgba(255, 255, 255, 0.4);
  padding: 1rem 2rem;
  height: 250px;
  overflow: auto;
}
