/* Hide server placeholders until the interactive case has its final dimensions.
   The frame never translates or scales; only the lower-to-upper mask moves. */
html[data-case-reveal] #work .case .case-open{
 border-radius:8px;overflow:hidden;clip-path:inset(100% 0 0 0 round 8px);
}
html[data-case-reveal] #work .case[data-case-reveal="open"] .case-open{
 clip-path:inset(0 round 8px);
}
/* The caption fade starts with the mask and finishes on the same frame. */
html[data-case-reveal] #work .case .case-info{
 opacity:0;transform:none;transition:opacity 1050ms cubic-bezier(.25,.1,.25,1);transition-delay:0ms;
}
html[data-case-reveal] #work .case[data-case-reveal="revealing"] .case-info,
html[data-case-reveal] #work .case[data-case-reveal="open"] .case-info{
 opacity:1;
}
html[data-case-reveal] #work .case .case-open>.case-first-frame{
 position:absolute;inset:0;display:block;width:100%;height:100%;
 max-width:none;max-height:none;pointer-events:none;z-index:1;
 border-radius:inherit;clip-path:inset(0 round 8px);
}
@media(prefers-reduced-motion:reduce){html[data-case-reveal] #work .case .case-info{transition:none}}
/* Screen slides arrive with a prepared image. Only the caption has a short
   visibility fade; the phone's one-time mask reveal remains unchanged. */
@media(min-width:701px) and (pointer:fine) and (hover:hover) and (prefers-reduced-motion:no-preference){
 html[data-case-reveal] #work .case .case-info{transition-duration:140ms}
 html[data-case-reveal] #work .case[data-case-reveal="open"] .case-info{opacity:0}
 html[data-case-reveal] #work .case[data-case-reveal="open"].caption-visible .case-info{opacity:1}
}