ehmorris/keepsakes

.map {
  @include position(absolute, 0px 0px 0px 0px);
  @include transition(all .4s $ease-out-quint);
}

.map-today {
  background: $ground-color;
  @include transform(scale(1) translateY(0) translateX(0));
  width: 100%;
  z-index: 1;

  &.loading {
    -webkit-filter: blur(50px);
  }

  &.recessed {
    @include transform(translate3d(0, 0, -30vw));
  }

  &.down {
    @include transform(translate3d(0, 25%, -30vw));
  }

  &.up {
    @include transform(translate3d(0, -25%, -30vw));
  }

  &.tilt-up {
    @include transform(translate3d(0, 1.4rem, 0) rotateX(5deg));
  }

  &.tilt-down {
    @include transform(translate3d(0, -1.4rem, 0) rotateX(-5deg));
  }

  &.load-tomorrow {
    @include transform(translate3d(-110%, 0, 0));
  }

  &.load-yesterday {
    @include transform(translate3d(110%, 0, 0));
  }
}

.map-yesterday, .map-tomorrow {
  overflow: hidden;
  @include transform(translate3d(-110%, 0, 0));

  &.recessed {
    @include transform(translate3d(-110%, 0, -30vw));
  }

  &.down {
    @include transform(translate3d(-110%, 25%, -30vw));
  }

  &.up {
    @include transform(translate3d(-110%, -25%, -30vw));
  }

  &.load-tomorrow {
    @include transform(translate3d(-220%, 0, 0));
  }

  &.load-yesterday {
    @include transform(translate3d(0%, 0, 0));
  }

  .image {
    background: url(anonymous-map-1.png) no-repeat;
    background-size: cover;
    content: '';
    @include position(absolute, 0px 0px 0px 0px);
  }
}

.map-tomorrow {
  @include transform(translate3d(110%, 0, 0));
  
  &.recessed {
    @include transform(translate3d(110%, 0, -30vw));
  }

  &.down {
    @include transform(translate3d(110%, 25%, -30vw));
  }

  &.up {
    @include transform(translate3d(110%, -25%, -30vw));
  }

  &.load-tomorrow {
    @include transform(translate3d(0%, 0, 0));
  }

  &.load-yesterday {
    @include transform(translate3d(220%, 0, 0));
  }
}