.app-splash {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow: hidden;
  background: #080809;
  color: #f5e3bf;
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.app-splash.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-artwork {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #24160e 0, #080809 75%);
}

.splash-artwork img {
  display: block;
  width: min(100vw, 76.4656vh);
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 28px #000b);
}

@supports (height: 100svh) {
  .splash-artwork img {
    width: min(100vw, calc(100svh * 0.7646559));
  }
}

.splash-artwork::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #08080955 0%,
    transparent 19%,
    transparent 65%,
    #08080955 82%,
    #080809ee 100%
  );
}

.splash-copy {
  position: absolute;
  z-index: 1;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  left: max(20px, env(safe-area-inset-left));
  text-align: center;
  text-shadow: 0 2px 10px #000;
}

.splash-hint {
  max-width: 38ch;
  margin: 0 auto;
  color: #fff2d7;
  font-size: clamp(14px, 3.8vw, 18px);
  font-weight: 650;
  line-height: 1.4;
}

.splash-session-check {
  margin: 9px 0 0;
  color: #e1c99f;
  font-size: 12px;
}

.brand-mark {
  display: block;
  border-radius: 9px;
  object-fit: cover;
}

@media (max-width: 720px) {
  .brand-mark {
    width: 35px;
    height: 35px;
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  .splash-artwork img {
    width: min(72vw, 76.4656vh);
  }

  .splash-copy {
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .splash-session-check {
    margin-top: 4px;
  }
}

@supports (height: 100svh) {
  @media (max-height: 480px) and (orientation: landscape) {
    .splash-artwork img {
      width: min(72vw, calc(100svh * 0.7646559));
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-splash {
    transition: none;
  }
}