Add the feature loop video to the website

docs/SITE_DESIGN.md

@@ -36,6 +36,15 @@ crossed out).
   has no dark artboard, make the dark copy from the canvas's own palettes (WinDashboard's `light`/`dark` tables for
   Windows screens, AndHome's for Android), mapping each light color to its dark role.
 
+## Film
+
+A 12-second muted loop right after the hero shows four features in motion (clipboard, notifications, files,
+mirroring). It's rendered from the owner's Remotion project (`OrbitIntro`, outside this repo): compositions
+`OrbitLoop` (dark) and `OrbitLoopLight` (light), at 1280x720, as MP4 (H.264, plays everywhere) and a poster JPEG
+each, saved in `site/media/` (`npm run render:web` in that project, then copy from `out/web/`). It plays only while on screen, swaps with the theme, loads nothing until
+it's near, has a Pause button (WCAG 2.2.2), and starts paused on its poster under reduced motion. Re-render it
+when a feature it shows changes.
+
 ## System
 
 - **Palette (light / dark):** ground `#F5F5F8` / `#0C0C12`, ink `#121219` / `#F1F1F6`, muted `#55566A` / `#A6A7BA`,
@@ -53,6 +62,7 @@ crossed out).
 
 ```
 hero      badge, h1, one line, download buttons / Windows dashboard with the Android home screen in front
+film      the 12 s feature loop, framed 16:9, with a Pause button
 features  bento of screens: clipboard, files (share sheet), mirroring (full width), notifications,
           earbuds, tray, phone shortcuts
 connect   one line / the route race

site/index.html

@@ -88,6 +88,18 @@ <h1 id="hero-title">Your phone and PC, in one <em>orbit.</em></h1>
   </div>
 </section>
 
+<!-- FILM: the features in motion -->
+<section class="v-film" aria-labelledby="film-title">
+  <div class="wrap">
+    <h2 id="film-title" class="sr">Orbit at work</h2>
+    <figure class="film">
+      <video class="film-v th-l" muted loop playsinline preload="none" poster="media/orbit-loop-light.jpg" width="1280" height="720" aria-label="Orbit at work: text copied on the PC is pasted on the phone, phone notifications appear on the PC, a file dropped on the PC arrives on the phone, and the phone opens in a window on the PC."><source src="media/orbit-loop-light.mp4" type="video/mp4"></video>
+      <video class="film-v th-d" muted loop playsinline preload="none" poster="media/orbit-loop-dark.jpg" width="1280" height="720" aria-label="Orbit at work: text copied on the PC is pasted on the phone, phone notifications appear on the PC, a file dropped on the PC arrives on the phone, and the phone opens in a window on the PC."><source src="media/orbit-loop-dark.mp4" type="video/mp4"></video>
+      <button class="film-btn" type="button" aria-pressed="false"><svg class="i-pause" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6 4h4v16H6zM14 4h4v16h-4z"/></svg><svg class="i-play" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 4v16l13-8z"/></svg><span class="film-btn-l">Pause</span></button>
+    </figure>
+  </div>
+</section>
+
 <!-- FEATURES: one screen each -->
 <section class="section v-feats" id="what" aria-labelledby="what-title">
   <div class="wrap">

site/site.css

@@ -197,6 +197,17 @@ footer{border-top:1px solid var(--line);padding-block:56px 40px;content-visibili
 .phn{grid-column:10/-1;grid-row:1;margin-bottom:-28px}
 @media (max-width:760px){.win{grid-column:1/-1}.phn{grid-column:8/-1;grid-row:2;margin:-34% 4px 0 0;padding:5px;border-radius:30px}.phn img{border-radius:25px}}
 
+/* Film: the features in motion (rendered from the OrbitIntro Remotion project, one per theme) */
+.v-film{padding-block:clamp(16px,3vw,40px) 0}
+.film{position:relative;margin:0;border-radius:24px;overflow:hidden;border:1px solid var(--line-strong);box-shadow:var(--shadow);background:var(--surface);aspect-ratio:16/9}
+.film-v{display:block;width:100%;height:100%;object-fit:cover}
+.film-btn{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink);font:700 13px/1 var(--f);cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .3s,scale .2s}
+@media (hover:hover){.film-btn:hover{border-color:var(--accent)}}
+.film-btn:active{scale:.96}
+.film-btn .i-play{display:none}
+.film-btn[aria-pressed="true"] .i-play{display:block}.film-btn[aria-pressed="true"] .i-pause{display:none}
+@media (max-width:640px){.film{border-radius:16px}.film-btn{right:8px;bottom:8px;min-height:32px;padding:0 9px}.film-btn-l{display:none}}
+
 /* Features: one screen per tile */
 .bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);margin-top:clamp(32px,4vw,56px)}
 .tile{position:relative;overflow:hidden;border-radius:24px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;min-height:420px;transition:box-shadow .5s var(--ease),opacity .9s var(--ease),translate .9s var(--ease)}

site/site.js

@@ -97,6 +97,33 @@
       .catch(function () { /* keep the Releases page links */ });
   }
 
+  // Film: plays only while on screen and in the current theme; never loads before it's near. A pause button
+  // stops it for good (WCAG 2.2.2); under reduced motion it starts paused on its poster.
+  var film = document.querySelector('.film');
+  if (film) {
+    var vids = [].slice.call(film.querySelectorAll('video')), btn = film.querySelector('.film-btn');
+    var label = btn.querySelector('.film-btn-l'), stopped = reduce, near = false, seen = false;
+    var current = function () { for (var i = 0; i < vids.length; i++) if (vids[i].offsetParent) return vids[i]; return vids[0]; };
+    var sync = function () {
+      var v = current();
+      vids.forEach(function (o) { if (o !== v && !o.paused) o.pause(); });
+      btn.setAttribute('aria-pressed', String(stopped));
+      label.textContent = stopped ? 'Play' : 'Pause';
+      btn.setAttribute('aria-label', stopped ? 'Play the video' : 'Pause the video');
+      if (!near) return;
+      if (v.preload !== 'auto') v.preload = 'auto';
+      if (!stopped && seen) { var p = v.play(); if (p && p.catch) p.catch(function () {}); } else if (!v.paused) v.pause();
+    };
+    btn.addEventListener('click', function () { stopped = !stopped; near = true; seen = true; sync(); });
+    if (hasIO) {
+      new IntersectionObserver(function (e) { near = near || e[0].isIntersecting; sync(); }, { rootMargin: '400px 0px' }).observe(film);
+      new IntersectionObserver(function (e) { seen = e[0].isIntersecting; sync(); }, { threshold: 0.35 }).observe(film);
+    } else { near = seen = true; }
+    if (themeBtn) themeBtn.addEventListener('click', function () { setTimeout(sync, 0); });
+    matchMedia('(prefers-color-scheme: dark)').addEventListener('change', sync);
+    sync();
+  }
+
   // Feature tiles slide up as they arrive (tiles already on screen stay put).
   if (hasIO && !reduce) {
     var tio = new IntersectionObserver(function (entries) {