:root {
  --bg: #030808;
  --fg: #f4f4ef;
  --line: rgba(244, 244, 239, 0.9);
  --page-pad: clamp(1rem, 2vw, 1.75rem);
  --art-ratio: 2.4415;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
}

body {
  min-height: 100svh;
}

.poster {
  min-height: 100svh;
  width: 100%;
  padding: var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.025), transparent 35%),
    var(--bg);
}

.artwork {
  width: min(
    calc(100vw - (var(--page-pad) * 2)),
    calc((100svh - (var(--page-pad) * 2)) * var(--art-ratio))
  );
}

.art-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2048 / 839;
  border: 2px solid var(--line);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 214, 138, 0.08) 0 8%, transparent 9%),
    radial-gradient(circle at 50% 50%, rgba(255, 158, 56, 0.95) 0 11%, rgba(255, 214, 140, 0.98) 13%, rgba(255, 129, 14, 0.92) 16%, rgba(255, 127, 0, 0.86) 20%, rgba(21, 0, 0, 0.1) 24%, transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(255, 171, 69, 0.52) 0 15%, rgba(255, 122, 0, 0.38) 22%, rgba(111, 8, 0, 0.56) 38%, transparent 62%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.98) 0 14%, rgba(59, 0, 0, 0.98) 33%, rgba(174, 80, 0, 0.82) 50%, rgba(83, 0, 0, 0.98) 67%, rgba(0, 0, 0, 0.98) 100%);
}

.art-frame::before,
.art-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.art-frame::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 214, 138, 0) 0 16%, rgba(255, 183, 86, 0.14) 18%, transparent 28%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.36));
  mix-blend-mode: screen;
}

.art-frame::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 48%, rgba(0, 0, 0, 0.45) 88%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.32));
}

.event-horizon {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.event-horizon::before,
.event-horizon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.event-horizon::before {
  width: 9.4%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 1) 0 62%, rgba(15, 0, 0, 0.96) 73%, transparent 80%);
  box-shadow:
    0 0 2rem rgba(255, 143, 33, 0.22),
    0 0 4rem rgba(172, 29, 0, 0.22);
}

.event-horizon::after {
  width: 16%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(255, 240, 188, 0.95) 50%, rgba(255, 160, 45, 0.98) 61%, rgba(249, 111, 4, 0.85) 72%, rgba(116, 11, 0, 0.24) 82%, transparent 88%);
  filter: blur(0.35rem);
  opacity: 0.95;
}

.ellipse {
  position: absolute;
  top: 5%;
  bottom: 5%;
  width: 38%;
  border: 2px solid var(--line);
  border-radius: 50%;
  z-index: 2;
}

.ellipse-1 {
  left: -18%;
}

.ellipse-2 {
  left: 8%;
}

.ellipse-3 {
  left: 34%;
}

.ellipse-4 {
  left: 60%;
}

.ellipse-5 {
  left: 86%;
}

@media (max-width: 720px) {
  .artwork {
    width: min(
      calc(100vw - (var(--page-pad) * 2)),
      calc((100svh - (var(--page-pad) * 2)) * var(--art-ratio))
    );
  }

  .event-horizon::before {
    width: 14%;
  }

  .event-horizon::after {
    width: 23%;
  }

  .ellipse {
    width: 54%;
  }

  .ellipse-1 {
    left: -30%;
  }

  .ellipse-2 {
    left: -1%;
  }

  .ellipse-3 {
    left: 28%;
  }

  .ellipse-4 {
    left: 57%;
  }

  .ellipse-5 {
    left: 86%;
  }
}