/* ---------------------------------------------------------------
   stephenpfaff.com — full-bleed decorative video background
   --------------------------------------------------------------- */

:root {
  /* Sampled from the clip's average colour, so any pre-load frame is
     indistinguishable from the video itself. */
  --bg: #030505;
  --fg: #f4f6f6;

  /* Natural size of the source clip. The video is never rendered
     smaller than this — see .bg-video. */
  --video-w: 1920px;
  --video-h: 1080px;

  --layer-poster: 0;
  --layer-video: 1;
  --layer-content: 2;
}

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

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  background-color: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Shared geometry -------------------------------------------------
   The box is at least the clip's natural 1920x1080 and grows only when
   the viewport exceeds it, so the effective scale is

       max(1, vw / 1920, vh / 1080)

   i.e. never below 100%. Anchoring the centre to the viewport centre
   means a smaller window crops evenly on all four sides instead of
   shrinking the image. The poster layer reuses the identical box, so
   the still and the video line up pixel-for-pixel and there is no jump
   when playback starts. */
.bg-video,
body::before {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: max(var(--video-w), 100vw);
  height: max(var(--video-h), 100vh);
}

/* Poster layer ---------------------------------------------------- */
/* Sits under the video permanently: it is what you see while the mp4
   buffers, if autoplay is refused, or if the file 404s — so there is
   never a flash of empty black. */
body::before {
  content: "";
  z-index: var(--layer-poster);
  background-color: var(--bg);
  background-image: url("/media/poster-1080p.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Video layer ----------------------------------------------------- */
.bg-video {
  z-index: var(--layer-video);

  /* The box above is only 16:9 when the viewport is; `cover` keeps the
     frame undistorted in every other case. */
  object-fit: cover;
  object-position: center center;

  background-color: var(--bg);
  border: 0;
  /* Decorative — never swallow clicks or hover from the UI above it. */
  pointer-events: none;
}

/* Content layer ---------------------------------------------------- */
/* Full-viewport grid with three named rows, ready for the top-bar and
   centre-frame hover regions. Empty for now. */
.stage {
  position: relative;
  z-index: var(--layer-content);

  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "top"
    "center"
    "bottom";

  min-height: 100vh;
  min-height: 100svh;

  /* Respect notches and rounded corners on mobile. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Accessibility ---------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Drop the motion for anyone who has asked the OS to reduce it.
   The poster layer underneath becomes the static background. */
@media (prefers-reduced-motion: reduce) {
  .bg-video {
    display: none;
  }
}