.atla-logo-splash {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: #000;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 480ms ease,
    visibility 0s linear 480ms;
}

.atla-logo-splash.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.atla-logo-container {
  position: relative;
  width: min(405px, 40.5vw);
  overflow: hidden;
}

.atla-logo-image {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
}

.atla-logo-vanish {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.atla-logo-fragment {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.72;
}

.atla-logo-fragment.f1 {
  --delay: 220ms;
  clip-path: polygon(6% 84%, 19% 12%, 33% 84%, 28% 84%, 19% 33%, 10% 84%);
}

.atla-logo-fragment.f2 {
  --delay: 760ms;
  clip-path: polygon(33% 22%, 55% 22%, 55% 32%, 33% 32%, 43.4% 32%, 46% 32%, 46% 84%, 43.4% 84%);
}

.atla-logo-fragment.f3 {
  --delay: 1300ms;
  clip-path: polygon(59.8% 22%, 63.2% 22%, 63.2% 84%, 59.8% 84%);
}

.atla-logo-fragment.f4 {
  --delay: 1840ms;
  clip-path: polygon(59.8% 74%, 70% 74%, 70% 84%, 59.8% 84%, 69% 84%, 82% 12%, 95% 84%, 90% 84%, 82% 33%, 74% 84%);
}

.atla-logo-container.is-animating .atla-logo-image {
  animation: atlaLogoSettle 2800ms ease-in-out 260ms forwards;
}

.atla-logo-container.is-animating .atla-logo-vanish {
  animation: atlaVanishLayerIn 140ms linear forwards;
}

.atla-logo-container.is-animating .atla-logo-fragment {
  animation: atlaFragmentVanish 820ms ease-in-out var(--delay, 0ms) forwards;
}

@keyframes atlaLogoSettle {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.72;
  }
}

@keyframes atlaVanishLayerIn {
  to {
    opacity: 1;
  }
}

@keyframes atlaFragmentVanish {
  from {
    opacity: 0.72;
  }

  to {
    opacity: 0;
  }
}

@media (max-width: 700px) {
  .atla-logo-container {
    width: min(340px, 76vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .atla-logo-container.is-animating .atla-logo-image {
    animation: none;
    opacity: 1;
  }

  .atla-logo-vanish,
  .atla-logo-fragment,
  .atla-logo-container.is-animating .atla-logo-vanish,
  .atla-logo-container.is-animating .atla-logo-fragment {
    animation: none;
    opacity: 0;
  }
}