.linkup-start-screen {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  background: var(--linkup-page-background, #faf8f3);
  color: #805d2c;
  isolation: isolate;
}

.linkup-start-screen__logo {
  display: block;
  width: min(640px, 100%);
  height: auto;
  aspect-ratio: 1536 / 350;
  object-fit: contain;
  --linkup-start-brightness: .65;
  filter: brightness(var(--linkup-start-brightness));
  --linkup-start-enter: 420ms;
  --linkup-start-app-enter: 4000ms;
  --linkup-start-exit: 180ms;
}

html[data-theme='dark'] .linkup-start-screen { color: #e7c991; }
html[data-theme='dark'] .linkup-start-screen__logo { --linkup-start-brightness: 1; }

.linkup-start-screen__noscript {
  max-width: 36rem;
  margin: 0;
  font: 16px/1.6 system-ui, sans-serif;
  text-align: center;
  overflow-wrap: anywhere;
}

.linkup-start-screen__logo[hidden],
.linkup-start-screen__noscript[hidden] {
  display: none;
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .linkup-start-screen-enhanced .linkup-start-screen__logo:not(.linkup-start-screen__logo--ready) {
    opacity: 0;
    transform: translate3d(0, 4px, 0) scale(.985);
  }

  .linkup-start-screen-enhanced .linkup-start-screen__logo--ready {
    animation: linkup-start-logo-reveal var(--linkup-start-enter) cubic-bezier(.22, 1, .36, 1) both;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.linkup-start-screen-app .linkup-start-screen__logo:not(.linkup-start-screen__logo--ready) {
    opacity: .35;
    transform: none;
    filter: brightness(var(--linkup-start-brightness)) blur(9px);
  }

  html.linkup-start-screen-app .linkup-start-screen__logo--ready {
    animation: linkup-start-logo-focus var(--linkup-start-app-enter) linear both;
  }

  .linkup-start-screen--leaving .linkup-start-screen__logo,
  html.linkup-start-screen-app .linkup-start-screen--leaving .linkup-start-screen__logo {
    animation: linkup-start-logo-dismiss var(--linkup-start-exit) cubic-bezier(.4, 0, 1, 1) both;
  }
}

@keyframes linkup-start-logo-reveal {
  from { opacity: 0; transform: translate3d(0, 4px, 0) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes linkup-start-logo-focus {
  from { opacity: .35; transform: none; filter: brightness(var(--linkup-start-brightness)) blur(9px); }
  to { opacity: 1; transform: none; filter: brightness(var(--linkup-start-brightness)) blur(0px); }
}

@keyframes linkup-start-logo-dismiss {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: none; }
}