.hero-viewport {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}
/* =========================================================
   SCENE BACKGROUND VIDEO (GLOBAL, REUSABLE)
========================================================= */

.scene-bg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  z-index: 0;

  /* performance + consistency */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  pointer-events: none;
}