:root {
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: #020f20;
}

body {
  min-height: 100svh;
}

.poster-stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  background:
    radial-gradient(circle at 72% 34%, rgb(0 216 255 / 12%), transparent 38%),
    #020f20;
}

.campaign-poster {
  display: block;
  width: min(
    calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)),
    calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom))
  );
  height: auto;
  max-width: 100%;
  max-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  object-fit: contain;
  opacity: 0;
  transform: scale(.985);
  animation: poster-entrance 700ms cubic-bezier(.22, 1, .36, 1) 80ms forwards;
}

@keyframes poster-entrance {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-poster {
    animation: none;
    opacity: 1;
    transform: none;
  }
}