:root {
  color-scheme: dark;
  background: #111113;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background-color: #111113;
  background-image:
    linear-gradient(rgb(0 0 0 / 14%), rgb(0 0 0 / 14%)),
    url("/assets/black-vinyl.webp");
  background-position: center;
  background-size: cover;
}

.placeholder {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(1.5rem, 5vw, 4.5rem);
  place-items: center;
}

.logo {
  display: block;
  width: min(92vw, 70rem);
  height: auto;
  filter: drop-shadow(0 1.25rem 1.5rem rgb(0 0 0 / 55%));
  user-select: none;
  -webkit-user-drag: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 40rem) {
  .placeholder {
    padding-inline: 1rem;
  }

  .logo {
    width: 96vw;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .logo {
    animation: settle 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}