* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  width: min(94vw, 920px);
  aspect-ratio: 1900 / 1088;
  opacity: 0;
  animation: reveal 2.4s ease-out .3s forwards;
}

/* The video's encoded black is never a perfect #000, so without a mask
   the frame reads as a faint lighter rectangle on the page. The radial
   mask dissolves the edges into the page background, letting the glow
   breathe instead of getting clipped. The transparent stop must be
   reached BEFORE the ellipse crosses the video border (edge midpoint
   sits at ~83% of the 60%-radius), otherwise the edges stay visible. */
.stage video,
.stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 41%, transparent 81%);
          mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, #000 41%, transparent 81%);
}

.caption {
  margin-top: clamp(4px, 2vh, 20px);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .42em;
  text-indent: .42em; /* optically re-center letter-spaced text */
  text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
  opacity: 0;
  animation: reveal 2.4s ease-out 1.2s forwards;
  user-select: none;
}

@keyframes reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stage, .caption { animation-duration: .01s; animation-delay: 0s; }
}