/*
 * HeyHi design system: moving pictures. A short, silent loop of footage that plays over a scene's photograph
 * (MediaHelper#loop_video_tag), the photograph staying underneath as its poster. The poster is the loop's own first
 * frame in the same house treatment, so nothing changes but that it starts to move. The loop fills its frame exactly as
 * the photograph does (the frame's focus), sits under the frame's grain like the photograph, and fades in once it's
 * actually playing (loop_video_controller.js), so a browser slow to its first frame never shows a blank. Phones, and
 * anyone who asks for less motion, keep the photograph: the loop isn't shown there, and its sources don't load there
 * either. Without scripts it simply plays.
 */
.photo__loop {
  position: absolute; inset: 0; z-index: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 50%);
  pointer-events: none;
}
@media (scripting: enabled) {
  .photo__loop { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out); }
  .photo__loop.is-playing { opacity: 1; }
}
@media (max-width: 47.99em), (prefers-reduced-motion: reduce) {
  .photo__loop { display: none; }
}