/* Destination reveal used only after a homepage exit transition. */
html.transition-reveal-pending,
html.transition-reveal-active {
  overflow: hidden;
  background: #000;
}

html.transition-reveal-pending body {
  opacity: 0;
  transform: scale(.12, .002);
  transform-origin: center center;
}

html.transition-reveal-active body {
  transform-origin: center center;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: tetonDestinationReveal .7s cubic-bezier(.76, 0, .24, 1) forwards;
}

html.transition-reveal-pending::after,
html.transition-reveal-active::after {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  width: 100vw;
  height: 1px;
  background: #fff;
  border: 0;
  box-shadow: none;
  content: '';
  opacity: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) scaleX(.12);
  transform-origin: center center;
  will-change: transform, opacity;
}

html.transition-reveal-active::after {
  animation: tetonLineReveal .7s cubic-bezier(.76, 0, .24, 1) forwards;
}

@keyframes tetonDestinationReveal {
  0% { transform: scale(.12, .002); opacity: 0; }
  35% { transform: scale(1, .002); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes tetonLineReveal {
  0% { transform: translate(-50%, -50%) scaleX(.12); opacity: 1; }
  35% { transform: translate(-50%, -50%) scaleX(1); opacity: 1; }
  60%, 100% { transform: translate(-50%, -50%) scaleX(1); opacity: 0; }
}

@media (max-width: 767px) {
  html.transition-reveal-pending,
  html.transition-reveal-active {
    min-height: 100dvh;
  }

  html.transition-reveal-pending body {
    min-height: 100dvh;
    opacity: 0;
    transform: scale3d(.12, .01, 1);
  }

  html.transition-reveal-active body {
    min-height: 100dvh;
    animation-name: tetonDestinationRevealMobile;
  }

  html.transition-reveal-pending::after,
  html.transition-reveal-active::after {
    top: 50%;
    left: 50%;
    height: 1px;
    transform: translate3d(-50%, -50%, 0) scaleX(.12);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  html.transition-reveal-active::after {
    animation-name: tetonLineRevealMobile;
  }

}

@media (max-width: 700px) {
  /* Keep the vertically centred Projects slider on the same stable viewport
     geometry before, during, and after the destination reveal. */
  html.transition-reveal-pending body.projects-page,
  html.transition-reveal-active body.projects-page {
    height: 100svh;
    min-height: 100svh;
  }
}

@keyframes tetonDestinationRevealMobile {
  0% { transform: scale3d(.12, .01, 1); opacity: 0; }
  35% { transform: scale3d(1, .01, 1); opacity: 0; animation-timing-function: step-end; }
  35.1% { transform: scale3d(1, .01, 1); opacity: 1; }
  100% { transform: scale3d(1, 1, 1); opacity: 1; }
}

@keyframes tetonLineRevealMobile {
  0% { transform: translate3d(-50%, -50%, 0) scaleX(.12); opacity: 1; }
  35% { transform: translate3d(-50%, -50%, 0) scaleX(1); opacity: 1; animation-timing-function: step-end; }
  35.1%, 100% { transform: translate3d(-50%, -50%, 0) scaleX(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.transition-reveal-pending body,
  html.transition-reveal-active body {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  html.transition-reveal-pending::after,
  html.transition-reveal-active::after {
    animation: none !important;
    opacity: 0 !important;
  }
}