/* "See it in action" embeds: poster first, the animated showcase (an iframe) only when scrolled near / tapped. */
.motion-section{margin:2.4rem 0}
.motion-section.container{margin-top:clamp(2rem,5vw,3.5rem);margin-bottom:clamp(2rem,5vw,3.5rem)}
.motion-head{text-align:center;max-width:680px;margin:0 auto 1.1rem}
.motion-head h2{margin:0 0 .45rem;font-size:clamp(1.5rem,3.6vw,2.1rem);line-height:1.12;letter-spacing:-.03em}
.motion-head p{margin:0;color:var(--text-light,#6e6e73);font-size:1rem;line-height:1.5}
.motion-embed{position:relative;width:100%;max-width:920px;margin:0 auto;aspect-ratio:16/10;border-radius:24px;overflow:hidden;background:#f2f2f2;contain:layout paint}
.motion-embed.is-home{max-width:1100px;aspect-ratio:1100/690}
.motion-embed picture,.motion-embed img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.motion-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .35s ease}
.motion-embed.is-ready iframe{opacity:1}
.motion-play{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;border:0;border-radius:99px;background:#0b0b0b;color:#fff;font:700 15px/1 Inter,system-ui,sans-serif;padding:14px 22px;cursor:pointer;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.motion-play[hidden]{display:none}
.motion-play:focus-visible{outline:3px solid #f0b93f;outline-offset:3px}
.motion-embed.is-ready .motion-play{display:none}
@media (max-width:600px){
  .motion-embed{aspect-ratio:5/7;border-radius:20px}
  .motion-embed.is-home{aspect-ratio:358/560}
}
/* reduced motion: the iframe shows a static grid of every stage, so give it room and let it scroll */
.motion-embed.is-rm.is-ready{aspect-ratio:auto;height:min(78vh,720px)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .motion-embed{background:#16161a}}
html[data-theme="dark"] .motion-embed{background:#16161a}