:root {
  --T: 3s;
  --over-x: 6vw;
  --over-y: 2vh;
}

.transition {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  overflow: hidden;
  background: url("../img/logo/ninareru_logo.svg") no-repeat center white;
  opacity: 0;
  visibility: hidden;
  display: none;
  transition: opacity 0.2s ease;
}
.transition.active {
  opacity: 1;
  visibility: visible;
  display: block;
}

.bar {
  position: absolute;
  top: calc(-1 * var(--over-y));
  left: calc(-1 * var(--over-x));
  width: calc(100vw + 2 * var(--over-x));
  height: calc(100vh + 2 * var(--over-y));
  transform: translate3d(calc(-100vw - var(--over-x)), 0, 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  opacity: 0;
  visibility: hidden;
}
.bar1 {
  background: #6cb1dc;
}
.bar2 {
  background: #f8ef5b;
}
.bar3 {
  background: #d24192;
}

.transition.active .bar {
  opacity: 1;
  visibility: visible;
}
.transition.active .bar1 {
  animation: move var(--T) cubic-bezier(0.8, 0, 0.2, 1) forwards;
}
.transition.active .bar2 {
  animation: move var(--T) cubic-bezier(0.85, 0, 0.15, 1) forwards;
  animation-delay: calc(0.08 * var(--T));
}
.transition.active .bar3 {
  animation: move var(--T) cubic-bezier(0.9, 0, 0.1, 1) forwards;
  animation-delay: calc(0.16 * var(--T));
}

@keyframes move {
  0% {
    transform: translate3d(calc(-100vw - var(--over-x)), 0, 0);
  }
  100% {
    transform: translate3d(calc(100vw + var(--over-x)), 0, 0);
  }
}