/* ============================================
   Loading Screen
   ============================================ */

body.is-loading {
  overflow: hidden;
}

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  background: transparent;
  transition: opacity 0.8s ease;

  & .panel {
    flex: 1;
    overflow: hidden;
    transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);

    & video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  & .left {
    transform: translateX(0);
  }

  & .right {
    transform: translateX(0);
  }

  & .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: opacity 0.5s ease;

    & svg {
      display: block;
      height: 128px;
      width: auto;
      fill: var(--color-text-inverse, #fff);
    }
  }

  &.dismiss {
    pointer-events: none;

    & .left {
      transform: translateX(-100%);
    }

    & .right {
      transform: translateX(100%);
    }

    & .logo {
      opacity: 0;
    }
  }

  @media (max-width: 768px) {
    flex-direction: column;

    &.dismiss {
      & .left {
        transform: translateY(-100%);
      }

      & .right {
        transform: translateY(100%);
      }
    }
  }
}