/* Bankroll — holding page. Black screen, looping logo, nothing else. */

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

body {
  position: relative;
  /* The video frame is 9:16 but the logo only fills a band in the middle.
     We deliberately size past the viewport so the logo reads large, and let
     the empty black top and bottom fall outside. Nothing is lost — that area
     is the same #000 as the page. */
  overflow: hidden;
}

/* Absolute centring rather than flex/grid: when a box is taller than its
   container, grid centring can clip the top instead of overflowing evenly.
   translate(-50%, -50%) always overflows symmetrically, so the logo stays
   dead centre on every screen. */
.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(72vw, 560px);
  aspect-ratio: 9 / 16;
}

/* On phones the same width leaves the logo looking small, because it is only
   ~46% of the frame. Overshooting the viewport crops the empty black sides and
   brings the logo up to a comfortable size. */
@media (max-width: 700px) {
  .stage { width: 96vw; }
}

/* Older browsers without aspect-ratio: fall back to the padding trick. */
@supports not (aspect-ratio: 9 / 16) {
  .stage { height: 0; padding-top: 177.78%; }
}

.stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
  /* No interaction of any kind — it is a logo, not a player. */
  pointer-events: none;
  /* Fade in so there is no flash before the player paints its first frame. */
  opacity: 0;
  animation: fade .6s ease .35s forwards;
}

@keyframes fade { to { opacity: 1; } }

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