/* Photographic movement: the frame softens while the original bitmap stays fixed. */
:root{--surface-radius:18px;--surface-progress:1}
.corner-frame{border-radius:calc(var(--surface-radius) * var(--surface-progress));overflow:hidden}
.corner-image{--corner-top:0px;--corner-right:0px;--corner-bottom:0px;--corner-left:0px;clip-path:inset(var(--corner-top) var(--corner-right) var(--corner-bottom) var(--corner-left) round calc(var(--surface-radius) * var(--surface-progress)))}
.photo-frame:hover img{transform:none}
/* Native controls stay inside the real 16:9 film, including its rounded corners. */
.cinema-stage{display:grid;place-items:center}
.cinema-stage.playing video{width:auto;max-width:100%;height:100%;aspect-ratio:16/9;border-radius:calc(var(--surface-radius) * var(--surface-progress));overflow:hidden}
.corner-frame:focus-visible{outline-offset:-5px}
.corner-frame :is(button,video,iframe):focus-visible{outline-offset:-7px}
@media(max-width:900px){:root{--surface-radius:14px}}
@media(max-width:600px){.cinema-stage.playing video{width:100%;height:auto;max-height:100%}}