:root {
  --atlas-splash-visible-duration: 2s;
  --atlas-splash-fade-duration: .28s;
}

.atlas-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  animation: atlas-splash-exit var(--atlas-splash-fade-duration) ease var(--atlas-splash-visible-duration) forwards;
}

.atlas-splash picture,
.atlas-splash img {
  display: block;
  width: 100%;
  height: 100%;
}

.atlas-splash img {
  object-fit: contain;
  object-position: center;
  background: #000;
}

/* Keep the complete artwork; extend its own star field into portrait letterboxing. */
@media (max-width: 900px) and (orientation: portrait) {
  .atlas-splash {
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background-image: url('/assets/images/splash/atlas-splash-vertical.png?v=20260920-v1');
    background-size: cover;
    background-position: center;
  }

  .atlas-splash picture {
    min-width: 0;
    min-height: 0;
  }

  .atlas-splash img {
    background: transparent;
  }
}

@keyframes atlas-splash-exit {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}