:root {
  --splash-bg: linear-gradient(
    to bottom,
    #90DBF4 0%,
    #56c3e2 45%,
    #154192 100%
  );

  --reveal-duration: 1600ms;
  --split-duration: 950ms;
  --split-ease: cubic-bezier(.65, 0, 1, 1);
}

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

.splash__half {
  position: absolute;
  top: 0;
  width: 50vw;
  height: 100vh;
  overflow: hidden;
  background: var(--splash-bg);

  transform: translate3d(0,0,0);
  will-change: transform;
  backface-visibility: hidden;
  contain: paint;
}

.splash__half--left  { left: 0; }
.splash__half--right { left: 50vw; }

.splash__logoWrap{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
}

.splash__logoWrap--left{
  right: 0;
  transform: translate(50%, -50%);
}

.splash__logoWrap--right{
  left: 0;
  transform: translate(-50%, -50%);
}

.logoImg{
  display: block;
  width: clamp(120px, 25vw, 220px);
  height: auto;

  -webkit-mask-image: linear-gradient(#000 0 0);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 0% 100%;
  -webkit-mask-position: -2px 0;

  mask-image: linear-gradient(#000 0 0);
  mask-repeat: no-repeat;
  mask-size: 0% 100%;
  mask-position: -2px 0;

  will-change: -webkit-mask-size, mask-size;
}

.splash.is-animating .logoImg{
  transition: -webkit-mask-size var(--reveal-duration) cubic-bezier(.12,.9,.18,1),
              mask-size var(--reveal-duration) cubic-bezier(.12,.9,.18,1);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.splash.is-splitting .splash__half--left {
  transition: transform var(--split-duration) var(--split-ease);
  transform: translate3d(-100%, 0, 0);
}
.splash.is-splitting .splash__half--right {
  transition: transform var(--split-duration) var(--split-ease);
  transform: translate3d(100%, 0, 0);
}

.splash.is-hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .logoImg{
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}