.landing {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 420px;
  isolation: isolate;
  overflow: hidden;
  background: #05010d;
}

.visual-backdrop {
  position: absolute;
  z-index: -2;
  inset: -5vmax;
  overflow: hidden;
  background: #05010d;
  filter: blur(28px) saturate(1.08) brightness(0.62);
  transform: scale(1.08);
}

.visual-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(3 0 12 / 0.35);
}

.visual-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.landing::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(3 0 12 / 0.4), transparent 12% 88%, rgb(3 0 12 / 0.4)),
    linear-gradient(0deg, rgb(3 0 12 / 0.38), transparent 22% 78%, rgb(3 0 12 / 0.3));
}

.visual-master {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: min(100vw, calc(100svh * 1671 / 941));
  height: auto;
  aspect-ratio: 1671 / 941;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  transform: translate(-50%, -50%);
}

.visual-master img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 18px 48px rgb(0 0 0 / 0.45));
}

.sound-surface {
  position: absolute;
  z-index: 9;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sound-surface:focus-visible {
  outline: 3px solid rgb(255 191 0 / 0.95);
  outline-offset: -6px;
}

@media (max-width: 720px), (orientation: portrait) {
  .visual-backdrop {
    filter: blur(21px) saturate(1.16) brightness(0.74);
    transform: scale(1.13);
  }

  .landing::after {
    background:
      linear-gradient(0deg, rgb(3 0 12 / 0.34), transparent 30% 70%, rgb(3 0 12 / 0.3)),
      rgb(3 0 12 / 0.06);
  }

  .visual-master {
    width: min(100vw, calc(100svh * 941 / 1671));
    aspect-ratio: 941 / 1671;
  }

  .visual-master img {
    filter:
      drop-shadow(0 0 1px rgb(255 255 255 / 0.32))
      drop-shadow(0 14px 34px rgb(0 0 0 / 0.58));
  }

}