/* A reusable, non-interactive background. The existing foreground keeps its
   layout, colors and animations. Each placement may override these variables. */
.ambient-video{
  --video-focus:50% 42%;
  --video-focus-wide:50% 50%;
  --video-wash:.74;
  --video-fade:clamp(90px,18%,170px);
  position:absolute;inset:0 0 auto;height:100%;z-index:-1;
  overflow:hidden;contain:paint;isolation:isolate;
  pointer-events:none;background:#f0f0f0;
}
.ambient-video-poster,.ambient-video video,.ambient-video-wash,.ambient-video-fade{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
}
.ambient-video-poster img,.ambient-video video{
  display:block;width:100%;height:100%;object-fit:cover;object-position:var(--video-focus);
}
.ambient-video video{opacity:0}
.ambient-video.is-playing video{opacity:1}
.ambient-video-wash{background:#f0f0f0;opacity:var(--video-wash)}
.ambient-video-fade{
  inset:auto 0 0;height:var(--video-fade);
  background:linear-gradient(to bottom,rgba(240,240,240,0),#f0f0f0);
}
/* The measured edge follows the existing bottom row, including font loading
   and rotation; these CSS values cover first paint and disabled JavaScript. */
.hero-video{height:var(--video-height,calc(100% - 85px))}
/* Owner-approved label color, scoped to the six opening-screen pictograms. */
.hero .orbit-item .orbit-label{color:#f0f0f0}
@media(max-width:780px){.hero-video{height:var(--video-height,calc(100% - 75px))}}
@media(min-width:700px){
  .ambient-video-poster img,.ambient-video video{object-position:var(--video-focus-wide)}
}
@media(prefers-reduced-motion:reduce){.ambient-video video{display:none}}
@media print{.ambient-video video{display:none}}