Effects, ready to ship.

/* CSS */
[data-sc-effect="video-cinema-stage"] { position: relative; isolation: isolate; overflow: hidden; background: #101522; }
[data-sc-effect="video-cinema-stage"] > video.site-studio-motion-background { position: absolute; z-index: -1; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(1.08) brightness(.64); }

/* JS */
document.querySelectorAll('[data-sc-effect="video-cinema-stage"]').forEach((scene) => {
  const video = scene.querySelector(':scope > video.site-studio-motion-background');
  if (!video) return;
  const motionSetting = getComputedStyle(scene).getPropertyValue('--sc-respect-reduced-motion').trim();
  const media = window.matchMedia('(prefers-reduced-motion: reduce)');
  const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
  let visible = false;
  let scheduled = false;
  let idleId = 0;
  let fallbackTimer = 0;
  let loadHandler = null;
  const motionAllowed = () => motionSetting === '0' || !media.matches;
  const canPlay = () => visible && !document.hidden && motionAllowed() && !(connection && (connection.saveData || ['slow-2g', '2g'].includes(connection.effectiveType)));
  const stop = () => video.pause();
  const cancelStart = () => {
    scheduled = false;
    if (idleId && 'cancelIdleCallback' in window) window.cancelIdleCallback(idleId);
    if (fallbackTimer) window.clearTimeout(fallbackTimer);
    if (loadHandler) window.removeEventListener('load', loadHandler);
    idleId = 0; fallbackTimer = 0; loadHandler = null;
  };
  const start = () => {
    scheduled = false; idleId = 0; fallbackTimer = 0; loadHandler = null;
    if (!canPlay()) { stop(); return; }
    video.muted = true; video.loop = true; video.playsInline = true;
    if (!video.src && video.dataset.siteStudioSrc) { video.src = video.dataset.siteStudioSrc; video.load(); }
    const attempt = video.play();
    if (attempt && typeof attempt.catch === 'function') attempt.catch(() => {});
  };
  const scheduleStart = () => {
    if (scheduled || !canPlay()) return;
    scheduled = true;
    const afterLoad = () => {
      loadHandler = null;
      if (!scheduled) return;
      if ('requestIdleCallback' in window) idleId = window.requestIdleCallback(start, { timeout: 3000 });
      else fallbackTimer = window.setTimeout(start, 1200);
    };
    if (document.readyState === 'complete') afterLoad();
    else { loadHandler = afterLoad; window.addEventListener('load', loadHandler, { once: true }); }
  };
  if ('IntersectionObserver' in window) {
    const observer = new IntersectionObserver((entries) => entries.forEach((entry) => { visible = entry.isIntersecting; if (visible) scheduleStart(); else { cancelStart(); stop(); } }), { threshold: 0.01 });
    observer.observe(scene);
  } else { visible = true; scheduleStart(); }
  const motionChanged = () => {
    if (!motionAllowed()) { cancelStart(); stop(); if (video.hasAttribute('src')) { video.removeAttribute('src'); video.load(); } }
    else scheduleStart();
  };
  media.addEventListener ? media.addEventListener('change', motionChanged) : media.addListener(motionChanged);
  if (connection && connection.addEventListener) connection.addEventListener('change', () => { if (canPlay()) scheduleStart(); else { cancelStart(); stop(); } });
  document.addEventListener('visibilitychange', () => { if (document.hidden) { cancelStart(); stop(); } else scheduleStart(); });
});