/* The hero at the top of Features (home-d3.js), film mode: the still (exactly the video's frame 0, the LCP image), the muted loop over it once playing, pausable; the one
   exception to scroll as the clock (system.md § 6). The still follows the page's theme: the system's, or the footer's Light · Dark · Auto (data-theme), as the film does.
   The video comes in on the app's glide (200 ms); the still and its first frame are the same picture, so what the visitor sees begin is the motion. The box holds its
   space (aspect ratio) and nothing is swapped. */
.d3-feat-hero { padding-block: clamp(16px, 2.6vw, 36px) 0; }
.d3-feat-hero .hero-film { width: min(100%, 880px); margin-inline: auto; }
.hero-film { position: relative; margin: 0; min-width: 0; aspect-ratio: 16 / 10; border-radius: var(--sx-radius); overflow: hidden; background: #f3f0ea; box-shadow: var(--sx-surface); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .hero-film { background: #121315; } }
html[data-theme="dark"] .hero-film { background: #121315; }
@media (max-width: 719px) { .hero-film { aspect-ratio: 4 / 5; } }
.hero-film picture { display: contents; }
.hero-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-film .hero-still-dark { display: none; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .hero-film .hero-still-light { display: none; } html:not([data-theme="light"]) .hero-film .hero-still-dark { display: contents; } }
html[data-theme="dark"] .hero-film .hero-still-light { display: none; }
html[data-theme="dark"] .hero-film .hero-still-dark { display: contents; }
/* Without a script nothing plays: the page shows the film's last picture (the lit stack, with its labels) from the <noscript> pair; with reduced motion the picture's own source does the same. */
html:not(.js) .hero-film .hero-still:not(.hero-thesis) { display: none !important; }
.hero-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 200ms cubic-bezier(0.32, 0.72, 0, 1); }
.hero-film.is-live video { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-film video { transition: none; } }
.hero-film[role="button"] { cursor: pointer; }
.hero-film:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 4px; }