:root {
  /* Vignette controls — these are the four numbers worth touching. */
  --vignette-color: 0 0 0;      /* RGB channels of the darkening colour */
  --vignette-clear: 22%;        /* how much of the centre stays untouched */
  --vignette-falloff: 62%;      /* where the mid-tone sits; lower = tighter, harder ring */
  --vignette-mid: 0.42;         /* opacity at that mid-tone */
  --vignette-strength: 0.96;    /* opacity at the very edge */
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  background: #000;
  overflow: hidden;
}

.stage {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh; /* survives the collapsing browser bars on mobile */
}

.stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fills the viewport, crops rather than letterboxes */
  object-position: center;
  display: block;
  border: 0;
  pointer-events: none;
}

/*
  The vignette.

  `ellipse farthest-side` is what keeps it even at any aspect ratio: it sets the
  gradient's horizontal radius to half the viewport width and its vertical radius
  to half the height, so the 100% stop lands exactly on all four edges whether the
  screen is 21:9 or a tall phone. The default (`farthest-corner`) anchors to the
  corners instead, which leaves the long edges noticeably lighter as the screen
  gets wider. Corners here sit past 100%, so they clamp to full strength.
*/
.stage__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse farthest-side at 50% 50%,
    rgb(var(--vignette-color) / 0) var(--vignette-clear),
    rgb(var(--vignette-color) / var(--vignette-mid)) var(--vignette-falloff),
    rgb(var(--vignette-color) / var(--vignette-strength)) 100%
  );
}

/* Extreme aspect ratios: pull the clear centre in so the framing still reads. */
@media (min-aspect-ratio: 21/9) {
  :root {
    --vignette-clear: 14%;
    --vignette-falloff: 55%;
  }
}

@media (max-aspect-ratio: 3/4) {
  :root {
    --vignette-clear: 16%;
    --vignette-falloff: 58%;
  }
}