.brand-loader {
  display: none;
}

.intro-active .brand-loader {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  background: #fff;
  pointer-events: none;
}

.brand-loader__mark {
  position: relative;
  width: min(300px, 64vw);
}

.brand-loader__mark img {
  width: 100%;
  height: auto;
}

.brand-loader__ghost {
  opacity: 0.06;
}

.brand-loader__ink {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.is-playing .brand-loader__ink {
  animation: logo-reveal 1.15s cubic-bezier(0.25, 0.65, 0.3, 1) 0.1s both;
}

.intro-active .brand-loader.is-playing {
  animation: loader-exit 0.45s ease 1.35s both;
}

.intro-active .will-enter.has-entered {
  animation-play-state: paused;
}

@keyframes logo-reveal {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }

  100% {
    clip-path: polygon(0 0, 125% 0, 100% 100%, 0 100%);
  }

}

@keyframes loader-exit {
  to {
    opacity: 0;
    visibility: hidden;
  }

}

@media (prefers-reduced-motion: reduce) {
  .intro-active .brand-loader {
    display: none;
  }

  .intro-active .will-enter.has-entered {
    animation-play-state: running;
  }

}