@import url(https://fonts.googleapis.com/css?family=Lato:400,700,300);

$colors: (
  header: #5d6373,
  footer: #252a37,
  card-1: #7b71be,
  card-2: #39A0ED,
  menu: #454b5b
);

html {
  font-size: 2vh;
}

$header-height: 9vh;
$footer-height: $header-height;
$main-height: calc(100% - #{$header-height * 2});
$app-width: 54vh;
$app-height: 96vh;
$card-width: $app-width / 2;
$card-height: $card-width;
$img-h: $card-width * 1.2;
$dots-width: 5rem;

$duration: 0.5s;
$easing: cubic-bezier(0.645, 0.045, 0.355, 1);

@function color($color) {
  @return map-get($colors, $color);
}

%transition {
  transition: all $duration $easing;
}

#explore {
  height: $app-height;
  width: $app-width;
  background: linear-gradient(#7d8393, #414757);
  overflow: hidden;
  box-shadow: 0 1vh 2vh rgba(0,0,0,0.4);
}

@keyframes inactive-location-top {
  100% {
    transform: translateY(-100%);
  }
}

[id^="golden"]:target ~ #explore .exp-location:not([data-location="golden"]) {
  transform: translateY(-($app-height / 4));
  opacity: 0;
  z-index: -1;
  
  *, * > * {
    transition-delay: 5s !important;
  }
}

[id^="alamo"]:target ~ #explore .exp-location:not([data-location="alamo"]) {
  transform: translateY($app-height / 4);
  opacity: 0;
  z-index: -1;
  
  *, * > * {
    transition-delay: 5s !important;
  }
}

.route {
  display: none;
}

.route:target ~ #explore {
  transform: translateY(0);

  .exp-header {
    transform: translateY(-120%);
  }

  .exp-footer {
    transform: translateY(100%);
  }

  .exp-main {
    transform: translateY(0);
  }

  .exp-location {
    transform:
      scale(1)
      translateY(0);

    > .exp-image {
      transform: scale(1);
      pointer-events: auto;
      
      &[href] {      
        @extend %pulse;
      }
    }

    > .exp-details {
      opacity: 1;

      transform:
        translateX(0)
        translateY($img-h);

    }

    .exp-card.-title {
      transform: scale(1);
      pointer-events: none;
      cursor: default;
      @extend %no-pulse;
    }

    .exp-card.-info {
      transform:
        translateX($card-width);
      transition-delay: $duration / 4;

      > * {
        transform: translateY(0);
        opacity: 1;
        transition-delay: $duration;
      }
    }

    > .exp-facts {
      transform: translateY(0);
      opacity: 1;
      transition-delay: $duration * 2;
    }
    
    .exp-dots {
      transform: translateY(0);
      opacity: 1;
      transition-delay: $duration * 2;
    }
  }
}

[id*="explore-details"]:target ~ #explore {
  .exp-location {
    .exp-gallery {
      > img { transition-delay: 0; }
    }
  }
}

#golden-explore-gallery:target ~ #explore {
  .exp-location {
    > .exp-image {
      @extend %no-pulse;
      transform:
        translateY($img-h)
        scaleY(1.5);
      
      > img {
        transform:
          scaleY(0.75);
      }
      
      &, > img {
        transition-delay: $duration;      
        transition-duration: $duration * 1.5;
      }
    }
    
    .exp-card.-title {
      animation: gallery-title $duration * 3 $easing both;
    }
    
    .exp-card.-info {
      opacity: 0;
      transform: translateY(3rem) translateX(100%);
    }
    
    .exp-facts {
      opacity: 0;
      transform: translateY(3rem);
      transition-delay: 0s;
    }
    
    .exp-gallery {
      &:hover > img {
        transition-delay: 0s !important;
      }
      
      > img {
        opacity: 0.4;
        transform: translateY(0);
            
        @for $n from 1 through 4 {
          &:nth-child(#{$n}) {      
            transition-delay: $duration * 2 + ($duration / 4) * $n;
          }
        }

        &.-active, &:hover {
          opacity: 1;
        }

        &:hover {
          transition-delay: 0s;
        }
      }
    }
  }
}

@keyframes gallery-title {
  33% {
    opacity: 0;
    transform: translateY(3rem);
  }
  66% {
    animation-timing-funtion: step-end;
    background-color: transparent;
  }
  67% {
    animation-timing-function: $easing;
    background-color: transparent;
    transform: translateY(-($img-h + $card-height));
    opacity: 0;
  }
  100% {
    opacity: 1;
    background-color: transparent;
    transform: translateY(-$img-h);
  }
}

.exp-header, .exp-footer {
  @extend %transition;
  transition-duration: $duration / 2;
  transition-delay: $duration / 2;
  height: $header-height;
  z-index: 2;
  font-size: 120%;
  color: white;
  font-weight: 700;
}

.exp-header {
  background-color: color(header);
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  line-height: $header-height;
  padding-left: 1.5rem;
}

.exp-footer {
  width: 100%;
  padding: 0 2rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.exp-dots {
  flex-basis: $dots-width;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: $header-height;
}

.exp-dot {
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  border-style: solid;
  border-width: 0.25rem;
  border-color: rgba(white, 0.3);
  
  &.-active {
    background-color: white;
    border-color: white;
  }
}

.exp-menu {
  position: absolute;
  top: 0;
  right: 0;
  height: $header-height;
  width: $header-height;
  background-color: color(menu);
  box-shadow: 0 0 1rem rgba(0,0,0,0.4);
  
  &:before {
    content: '';
    width: 1.3rem;
    height: 0.25vh;
    position: absolute;
    background-color: white;
    top: calc(#{$header-height} / 2 - 0.5rem);
    left: calc(#{$header-height} / 2 - 0.75rem);
    box-shadow:
      0.25rem 0.5rem 0 white,
      0 1rem 0 white;
  }
}

.exp-footer {
  background-color: color(footer);
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}

.exp-main {
  @extend %transition;
  height: $main-height;
  transform: translateY($header-height);
  position: absolute;
  width: 100%;
}

.exp-location {
  $location-height: $app-height;
  @extend %transition;
  position: absolute;
  left: 0;
  top: 0;
  height: $app-height;
  width: 100%;
  transform-origin: 50% 50%;
  
  $detail-transform: calc(#{$location-height / 4 - $card-height / 2 - $header-height / 2});
  
  > .exp-details {
    opacity: 0.8;
  }
  
  > .exp-image {
    pointer-events: none;
    transform:
      translateY(calc(#{$location-height / 4 - $img-h / 2 - $header-height / 2}));
  }
  
  
  &:nth-child(1) {
    transform:
      scale(0.9);
    
    > .exp-details {
      transform:
        translateY($detail-transform)
        translateX(0)
    }
    
    .exp-card.-title {
      background-color: color(card-1);
      transform-origin: left 50%;
    }
  }
  
  &:nth-child(2) {
    transform:
      scale(0.9)
      translateY($app-height / 2 - $header-height);
    
    > .exp-details {
      transform:
        translateY($detail-transform)
        translateX(calc(#{$app-width / 2}))
    }
    
    .exp-card.-title {
      background-color: color(card-2);
      transform-origin: right 50%;
    }
  }
}

.exp-details {
  @extend %transition;
  position: absolute;
  top: 0;
  left: 0;
}

.exp-card {
  @extend %transition;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: $app-width / 2;
  height: $app-width / 2;
  padding: 2rem;
  text-decoration: none;
  
  &.-title {
    z-index: 2;
    color: white;
    transform: scale(1.3);
    @extend %pulse;
  }
  
  &.-info {
    background-color: white;
    
    > * {
      @extend %transition;
      transform: translateY(1rem);
      opacity: 0;
    }
    
    > .subheading {
      color: #999;
    }
  }
}

.exp-image {
  @extend %transition;
  width: 100%;
  height: $img-h;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  
  > img {
    @extend %transition;
    width: 100%;
  }
}

.exp-facts {
  @extend %transition;
  position: absolute;
  left: 0;
  padding: 2rem;
  height: calc(#{$app-height} - #{$img-h} - #{$card-height});
  top: $img-h + $card-height;
  opacity: 0;
  transform: translateY(1rem);
  color: white;
  background-color: transparent;

  > .heading {
    font-size: 100%;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  > .paragraph {
    font-size: 120%;
    font-weight: 300;
    line-height: 1.5;
  }

  > .exp-dots {
    @extend %transition;
    width: $dots-width;
    position: absolute;
    bottom: 0;
    left: calc(50% - #{$dots-width / 2});
    transform: translateY(100%);
    opacity: 0;
  }
}

.exp-gallery {
  height: auto;
  width: $app-width;
  white-space: nowrap;
  overflow: hidden;
  padding: 2rem 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  
  > img {
    @extend %transition;
    height: $app-width / 4;
    width: $app-width / 4;
    display: inline-block;
    margin-left: 1rem;
    transform: translateY(100%);
    opacity: 0;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.4);
  }
}

.heading {
  font-size: 200%;
  font-weight: 400;
  
  &:first-child {
    margin-top: 0;
  }
  
  &.-h2 {
    margin-bottom: 0.5rem;
  }
}

.subheading {
  font-size: 100%;
  font-weight: 300;
}

%pulse {
  &:before {
    content: '';
    width: 3rem;
    height: 3rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: 0.5rem solid white;
    border-radius: 50%;
    z-index: 2;
    opacity: 0;
    animation: pulse $duration * 3 3s infinite;
    pointer-events: none;
  }
}

%no-pulse {
  cursor: default;
  
  &:before {
    display: none;
  }
}

@keyframes pulse {
  from {
    transform: scale(0.5);
    opacity: 0;
    animation-timing-function: ease-in;
  }
  25% {
    transform: scale(1);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  50%, to {
    transform: scale(1.2);
    opacity: 0;
  }
}

.meta {
  flex-basis: calc(80% - #{$app-width});
  font-size: 1.2rem;
  font-weight: 300;
  
  p, a { color: rgba(white, 0.7); }
  h1 {
    font-size: 3rem;
    line-height: 1.2;
    font-weight: 300;
    color: white;
  }
  p { line-height: 1.4; }
  
  a:hover {
    color: rgba(white, 0.7);
  }
  
  @media (max-width: 750px) {
    display: none;
  }
}


body {
  display: flex;
  padding: 0 calc(50% - 450px) !important;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  font-family: Lato, sans-serif;
  background: linear-gradient(#98a2ad, #88909b);
  overflow: hidden;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  user-select: none;
  box-sizing: border-box;
  position: relative;
}