.motion-page{--orange:var(--violet);--blue:var(--violet)}
.motion-gallery{display:grid;gap:64px;max-width:960px;margin-inline:auto}
.motion-preview{position:relative;overflow:hidden;background:#17141e;aspect-ratio:16/9}
.motion-preview img{width:100%;height:100%;object-fit:cover;transition:transform 400ms cubic-bezier(.16,1,.3,1)}
.motion-card-play{position:absolute;inset:0;margin:auto;display:grid;place-items:center;width:64px;height:64px;border:1px solid #ffffff80;border-radius:50%;background:#17141edd;color:#fff;font-size:20px;padding-left:3px}
.motion-duration{position:absolute;right:18px;bottom:18px;background:#17141ee6;color:#fff;padding:7px 10px;font-size:11px;letter-spacing:1px;font-variant-numeric:tabular-nums}
.motion-project-main .breadcrumbs{margin-bottom:24px}
.motion-page .motion-project-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;margin-bottom:28px}
.motion-page .motion-project-heading h1{font-size:clamp(40px,4.5vw,60px);margin-top:12px}
.motion-project-heading .graphic-project-subtitle{font-size:17px;margin-top:12px}
.motion-facts{display:flex;gap:32px;margin:0 0 3px}
.motion-facts dt{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.motion-facts dd{font-size:12px;line-height:1.6;margin:0}
.motion-film{width:min(100%,1040px,calc(max(220px,100svh - 350px)*1.7778));margin:0 auto 44px}
.motion-player{aspect-ratio:16/9;background:#17141e;overflow:hidden}
.motion-player iframe{display:block;width:100%;height:100%;border:0}
.motion-film figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:14px;font-size:10px;line-height:1.6;color:var(--muted)}
.motion-film figcaption a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media(hover:hover) and (pointer:fine){.motion-card:hover .motion-card-play{background:var(--violet);border-color:var(--violet)}}
@media(max-width:760px){.motion-page .motion-project-heading{display:block}.motion-facts{gap:20px;flex-wrap:wrap;margin-top:24px}.motion-film{width:100%;margin-bottom:32px}.motion-card-play{width:52px;height:52px;font-size:16px}.motion-duration{right:10px;bottom:10px;font-size:9px}.motion-film figcaption{font-size:9px}}
