/*
 * Returning-within-session splash transition (homepage only).
 */

.splash-return {
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 100;
}

.splash-return__backdrop {
  align-items: center;
  background: transparent;
  display: flex;
  inset: 0;
  justify-content: center;
  position: absolute;
  animation: splash-return-backdrop 1000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.splash-return__wordmark {
  height: auto;
  opacity: 0;
  transform: scale(0.88);
  width: min(280px, 60vw);
  animation: splash-return-wordmark 1000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes splash-return-wordmark {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }

  40% {
    opacity: 1;
    transform: scale(1);
  }

  65% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.06);
  }
}

@keyframes splash-return-backdrop {
  0%,
  39% {
    background: transparent;
  }

  65%,
  100% {
    background: var(--color-black, #030303);
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash-return--reduced .splash-return__backdrop {
    animation: splash-return-backdrop-reduced 300ms ease-out forwards;
  }

  .splash-return--reduced .splash-return__wordmark {
    animation: splash-return-wordmark-reduced 300ms ease-out forwards;
    transform: none;
  }
}

@keyframes splash-return-wordmark-reduced {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes splash-return-backdrop-reduced {
  0%,
  20% {
    background: transparent;
  }

  80%,
  100% {
    background: var(--color-black, #030303);
  }
}

[data-site-header].site-header--enter-pending:not(.site-header--entered) {
  transform: translate3d(0, calc(-100% - var(--site-header-offset, 0px)), 0);
  transition: none;
}

[data-site-header].site-header--enter-pending.site-header--entered {
  transform: translate3d(0, 0, 0);
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  [data-site-header].site-header--enter-pending:not(.site-header--entered) {
    transform: none;
  }

  [data-site-header].site-header--enter-pending.site-header--entered {
    transition: none;
  }
}