.c-splash {
  --animation-in-duration: 800ms;
  --animation-out-duration: 1000ms;

  position: fixed;
  z-index: 99999;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #181818;

  animation-name: splash-out;
  animation-duration: calc(var(--animation-out-duration) * 0.6);
  animation-play-state: running;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: calc(
    var(--animation-in-duration) + var(--animation-out-duration) * 0.4
  );

  &[data-splash-skip="true"] {
    display: none;
  }

  & .__logo {
    width: 80px;
  }

  & .__title {
    position: relative;

    display: flex;
    align-items: center;

    height: 100%;

    font-size: 34px;
    text-transform: uppercase;

    background-color: #181818;

    animation-play-state: inherit;
  }
}

@keyframes splash-out {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

/* ========= SHORT variant ========= */

.c-splash.c-splash--short {
  --animation-in-duration: 800ms;

  & .__title {
    --translate-x: 0;

    animation-name: splash-in-short;
    animation-duration: var(--animation-in-duration);
    animation-timing-function: cubic-bezier(0.55, 2.12, 0.19, 0.57);
    animation-fill-mode: forwards;
  }

  & .__title {
    --translate-x: -30px;

    z-index: 1;
    padding-left: 10px;
  }
}

@keyframes splash-in-short {
  from {
    transform: translateX(var(--translate-x));
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}