/* Local motion-only preview. All resting geometry and colors stay unchanged. */
.has-js .reveal{transform:translateY(10px);transition:opacity 320ms cubic-bezier(.16,1,.3,1),transform 320ms cubic-bezier(.16,1,.3,1)}
.has-js .reveal.is-visible{transform:none}
.work-hero-panel{animation:none}
.work-hero-viewport{position:relative}
.work-hero-panel:hover .work-hero-media img,.work-hero-panel:focus-within .work-hero-media img{transform:none}
.ms-home-project:hover .work-hero-media img,.ms-home-project:focus-within .work-hero-media img{transform:none}
.work-hero-media img{transition:transform 200ms cubic-bezier(.16,1,.3,1)}
@media(hover:hover) and (pointer:fine){
.ms-home-project .ms-home-montage a:hover img,.ms-home-project .ms-home-montage>a:hover img{transform:scale(1.015)}
.work-hero-panel:not(.ms-home-project) .work-hero-media:hover img{transform:scale(1.015)}
.work-hero-watch span,.work-series-all span{display:inline-block;transition:transform 160ms cubic-bezier(.16,1,.3,1)}
.work-hero-watch:hover span,.work-series-all:hover span{transform:translate(2px,-2px)}
}
@media(prefers-reduced-motion:reduce){.has-js .reveal{transform:none;transition:none}.work-hero-media img{transition:none!important;transform:none!important}}
.ms-evidence-item h4 span,.ms-case-entry span{display:inline-block;transition:transform 160ms cubic-bezier(.16,1,.3,1)}
@media(hover:hover) and (pointer:fine){.ms-evidence-item:hover h4 span,.ms-case-entry:hover span{transform:translate(2px,-2px)}}
@media(prefers-reduced-motion:reduce){.ms-evidence-item h4 span,.ms-case-entry span,.work-hero-watch span,.work-series-all span{transform:none!important;transition:none!important}}
@media(hover:hover) and (pointer:fine){#featured .ms-home-project .ms-evidence-item:hover img{transform:scale(1.015)}#featured .ms-home-project .ms-evidence-item:hover h4 span{transform:translate(2px,-2px)}}
@media(prefers-reduced-motion:reduce){#featured .ms-home-project .ms-evidence-item:hover img,#featured .ms-home-project .ms-evidence-item:hover h4 span{transform:none!important}}
/* V2: playground shares the tutorial's compact split composition. */
@media(min-width:1025px){
 #vibe .work-hero-panel:not([hidden]){display:grid;grid-template-columns:minmax(0,min(60%,67.555svh,675px)) minmax(0,1fr);align-items:stretch}
 #vibe .work-hero-media{height:auto;min-height:0;aspect-ratio:16/9;align-self:stretch;padding:0;margin:0;overflow:hidden}
 #vibe .work-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
 #vibe .work-hero-copy{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:28px;border-top:0;border-left:1px solid var(--line)}
 #vibe .work-hero-heading h3{font-size:clamp(24px,2vw,32px);line-height:1.35}
 #vibe .work-hero-detail{display:block}
 #vibe .work-hero-detail p{font-size:15px;line-height:1.75}
}
.work-hero-viewport{overflow:hidden;border-radius:var(--radius-lg)}
@media(hover:hover) and (pointer:fine){
 #featured .ms-home-project .ms-evidence-item:hover img{transform:scale(1.04);transition-duration:320ms}
 #featured .ms-home-project .ms-evidence-item:hover h4 span{transform:translate(5px,-5px)}
 .work-hero-watch:hover span,.work-series-all:hover span{transform:translate(4px,-4px)}
}
@media(prefers-reduced-motion:reduce){#featured .ms-home-project .ms-evidence-item:hover img,#featured .ms-home-project .ms-evidence-item:hover h4 span{transform:none!important}}
/* V3: turn the cover only; the orange information panel stays in place. */
#vibe .work-hero-media{backface-visibility:hidden;transform-origin:center}

/* Lilac preview: play workshop accent */
#vibe .work-hero-copy{background:#B5A0FF;color:#171714}

/* Packaging carousel: edge-to-edge photographs without side gutters. */
.mooncake-gallery .mooncake-slide img{object-fit:cover;object-position:center}

/* Packaging typography: context, project name, description. */
.mooncake-project .mooncake-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;padding:clamp(24px,3vw,48px)}
.mooncake-copy .section-kicker{font-size:11px;line-height:1.5;letter-spacing:.14em;margin:0 0 28px}
.mooncake-copy .mooncake-context{font-size:15px;line-height:1.6;font-weight:500;letter-spacing:0;margin:0 0 10px;color:var(--muted,#68655e)}
.mooncake-copy h3{font-size:clamp(26px,2.2vw,38px);line-height:1.25;letter-spacing:-.025em;margin:0;font-weight:700}
.mooncake-copy .mooncake-title-group + p{font-size:16px;line-height:1.85;margin:24px 0 0;max-width:30em}
.mooncake-copy .mooncake-meta{font-size:12px;line-height:1.6;font-weight:500;letter-spacing:.02em;margin:28px 0 0}
@media(max-width:700px){.mooncake-project .mooncake-copy{padding:28px 24px}.mooncake-copy .section-kicker{margin-bottom:20px}.mooncake-copy h3{font-size:28px}.mooncake-copy .mooncake-title-group + p{margin-top:18px}}

/* Keep stretched aspect-ratio media inside its grid column at short heights. */
:is(#tutorials,#vibe) .work-hero-media{width:100%;max-width:100%;min-width:0;overflow:hidden;box-sizing:border-box}
:is(#tutorials,#vibe) .work-hero-media>img{max-width:100%;min-width:0}
@media(min-width:1025px){
 :is(#tutorials,#vibe) .work-hero-copy{box-sizing:border-box;min-width:0;padding:28px;border-left:1px solid transparent}
 :is(#tutorials,#vibe) .work-hero-heading,:is(#tutorials,#vibe) .work-hero-detail{width:100%;min-width:0;max-width:none}
}