.logo {
  width: min(76vw, 760px);
  -webkit-user-drag: none;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  opacity: 0;
  transition:
    -webkit-mask-position 2.8s cubic-bezier(.6, 0, .3, 1) .35s,
    mask-position 2.8s cubic-bezier(.6, 0, .3, 1) .35s,
    opacity 1.2s ease .35s;
}
.entered .logo {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  opacity: 1;
}
.reactive .logo { scale: calc(1 + var(--beat, 0) * .04); }

@media (max-width: 520px) {
  .logo { width: 84vw; }
}

@media (prefers-reduced-motion: reduce) {
  .logo { transition-duration: .01s !important; transition-delay: 0s !important; }
}