/* Shared original-project media. Posters remain usable without JavaScript. */
project-motion.project-motion{display:block;position:relative;overflow:hidden;isolation:isolate;background:#101014;aspect-ratio:16/9}
project-motion.project-motion>img{display:block;width:100%;height:100%;object-fit:contain}
.project-motion .pm-layer{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .55s cubic-bezier(.16,1,.3,1)}
.project-motion.pm-ready .pm-layer{opacity:1}
.project-motion .pm-stage{position:absolute;inset:0;display:grid;place-items:center;background:#08080a}
.project-motion .pm-stage>video,.project-motion .pm-stage>canvas{position:absolute;width:100%;height:100%;object-fit:cover;inset:0}
.project-motion .pm-stage>.pm-logo{position:relative;width:46%;height:auto;max-height:45%;object-fit:contain;z-index:1}
.project-motion[data-project-motion=thrive] .pm-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#08081733,transparent,#08081733);pointer-events:none}
.project-motion[data-project-motion=data-swiss] .pm-stage{background:#f4f4fb;padding:7%}
.project-motion[data-project-motion=data-swiss] .pm-stage>svg{width:100%;height:100%}
.project-motion[data-project-motion=textava] .pm-logo{width:55%}
.project-motion .pm-toggle{position:absolute;right:12px;bottom:12px;z-index:5;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid #ffffff55;border-radius:50%;background:#141619bf;color:#fff;font:14px/1 sans-serif;cursor:pointer;opacity:0;transition:opacity .2s}
.project-motion:hover .pm-toggle,.project-motion:focus-within .pm-toggle{opacity:1}
.project-motion .pm-toggle:focus-visible{outline:2px solid white;outline-offset:3px}
.result-media>project-motion.project-motion{width:100%;height:100%;aspect-ratio:auto}
.cs-hero .cs-artwork>project-motion{width:100%;aspect-ratio:16/9;border-radius:inherit}
.cs-hero .cs-artwork>project-motion>img{height:100%;max-height:none}
@media(hover:none){.project-motion .pm-toggle{opacity:1}}
@media(prefers-reduced-motion:reduce){.project-motion .pm-layer{transition:none}}
.project-motion .pm-stage>.pm-artwork{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;mix-blend-mode:screen;z-index:1}
.sample-art>project-motion.project-motion{width:100%;height:100%}
/* Work's full-frame image rule must not resize the overlaid identity. */
html body .result-grid .result-media .pm-stage>img.pm-logo{width:46%!important;height:auto!important;object-fit:contain!important;max-height:45%;position:relative}
html body .result-grid .result-media .pm-stage>img.pm-artwork{width:100%!important;height:100%!important;object-fit:contain!important}
[data-project-motion-pause][hidden]{display:none!important}
/* The artwork responds; overlaid project logos stay anchored. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .project-motion[data-motion-state=playing] .pm-stage>video{transform:translate(var(--motion-x,0px),var(--motion-y,0px)) scale(1.045);transition:transform .75s cubic-bezier(.16,1,.3,1)}
 .project-motion[data-motion-state=playing] .pm-stage>svg{transform:translate(var(--motion-x,0px),var(--motion-y,0px));transition:transform .75s cubic-bezier(.16,1,.3,1)}
}

/* One-colour reverse lockup keeps every original logo detail legible on film. */
html body .project-motion[data-project-motion=thrive] .pm-stage>img.pm-logo{filter:brightness(0) invert(1)!important}

/* EXO uses a clean landscape and independently rendered product/rotor planes. */
.project-motion .pm-stage.pm-flight{background-size:cover;background-position:center}
html body.work-index .work-card__media>project-motion.project-motion{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
html body.work-index .project-card:hover .work-card__media>project-motion>img{transform:none}
.work-preview-tools{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:16px 0 24px}
html body.work-index .work-preview-tools .work-filter-count{margin:0}
html body.work-index .work-motion-control{width:34px;height:34px;display:grid;place-items:center;padding:0;border:1px solid #d7d9d5;border-radius:50%;color:#252728;background:transparent;font:15px/1 sans-serif;cursor:pointer}
.work-motion-control:hover{background:#f4f4f2}
.work-motion-control:focus-visible{outline:2px solid #252728;outline-offset:4px}
/* Deep links clear the shared sticky navigation. */
html body.work-index .project-card[id]{scroll-margin-top:112px}
/* Source films retain their original framing and contrast. */
.project-motion[data-project-motion=careflow] .pm-stage>video{transform:none!important;object-fit:cover}
/* EXO gallery: a clipped landscape with a separate, overshooting foreground. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 html body.work-index .work-card__media:has(>.pm-flight-popout.pm-ready){overflow:visible;isolation:isolate;background:transparent}
 html body.work-index .work-card__media>.pm-flight-popout.pm-ready{overflow:visible;background:transparent;border-radius:14px}
 html body.work-index .pm-flight-popout.pm-ready>img{opacity:0}
 html body.work-index .pm-flight-popout :is(.pm-layer,.pm-flight){overflow:visible;border-radius:inherit}
 html body.work-index .pm-flight-popout .pm-flight>canvas{transform-origin:50% 44%;filter:drop-shadow(0 16px 12px #0004);will-change:transform}
 html body.work-index .project-card:has(.pm-flight-popout):is(:hover,:focus-within){z-index:2}
}