/* Cinematic film section: the video opens from an inset card to full bleed as the
   section scrolls past. The 300vh height is the scroll runway; the stage is what
   stays on screen.

   Class names are namespaced (.film__stage, not .stage) on purpose: this theme
   already reuses short class names for unrelated things — .accordion is a heading,
   .playpause belongs to the video button in css/home.css — and both collided with
   new work earlier. */
.film{height:300vh}
.film__stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;
	overflow:hidden;background:#000}
.film__box{position:relative;width:100%;height:100%;overflow:hidden;will-change:transform}
.film__box video,.film__box .film__poster{width:100%;height:100%;object-fit:cover;display:block}
.film__shade{position:absolute;inset:0;background:rgba(0,0,0,.38)}
.film__cap{position:absolute;left:0;right:0;bottom:clamp(110px,18vh,200px);padding:0 clamp(20px,4vw,64px);text-align:center;z-index:2}
.film__cap h2{margin:0;color:#fff;font-size:42px;font-weight:600;
	letter-spacing:-.03em;line-height:1.08}

/* Reduced motion: no runway, no sticky, no transform. One screen, poster, heading. */
@media (prefers-reduced-motion:reduce){
	.film{height:100svh}
	.film__stage{position:static;height:100svh}
	.film__box{transform:none!important;border-radius:0!important}
}
/* Apple-style play/pause toggle: thin outline circle, bottom-right; video autoplays muted+loop. */
.film__play{position:absolute;right:20px;bottom:20px;z-index:3;outline:none;
width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);padding:0;cursor:pointer;
display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.18);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
transition:background .2s ease,border-color .2s ease}
.film__icon{width:16px;height:16px;fill:#fff}
.film__icon[hidden]{display:none}
.film__play:hover,.film__play:focus-visible{background:rgba(0,0,0,.32);border-color:#fff}
.film__play:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:767px){
	.film{height:180vh}
}
.film__box video{width:100%;height:100%;object-fit:cover;display:block}