/* Motion is confined to painted contents: card and popup anchors keep their original geometry. */
.work-flow-ready .work-directory-grid{position:relative;isolation:isolate}
.work-flow-highlight{position:absolute;left:0;top:0;right:0;height:0;z-index:0;pointer-events:none;opacity:0;background:#1a1a1a;will-change:transform,opacity}
.work-flow-ready .work-directory-card{position:relative;z-index:1}
.work-flow-ready .work-directory-grid.is-block .work-flow-highlight{display:none}
.work-flow-ready .work-directory-grid.is-list .work-directory-card:hover,
.work-flow-ready .work-directory-grid.is-list .work-directory-card:focus-visible,
.work-flow-ready .work-directory-grid.is-list .work-directory-card.is-previewing{background:transparent}
.work-flow-ready .work-directory-card-art{translate:var(--work-flow-x,0px) var(--work-flow-y,0px)}
.work-flow-ready .work-directory-card-caption p{translate:calc(var(--work-flow-x,0px)*.45) calc(var(--work-flow-y,0px)*.45)}
.work-flow-ready .work-directory-grid.is-block .work-directory-card.work-flow-row-active .work-directory-card-art{border-color:#fff}
.work-flow-ready .work-directory-grid.is-list .work-directory-card-foot>span:last-child::after{display:inline-block;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.work-flow-ready .work-directory-grid.is-list .work-directory-card.work-flow-row-active .work-directory-card-foot>span:last-child::after{content:'→';transform:translateX(3px)}
.work-flow-ready .work-directory-grid.is-block .work-directory-card.work-flow-row-active .work-directory-card-open{font-size:0}
.work-flow-ready .work-directory-grid.is-block .work-directory-card.work-flow-row-active .work-directory-card-open::after{content:'→';font-size:15px}
@media(min-width:681px){
.work-flow-ready .work-directory-grid.is-list .work-directory-card-caption h2{transition:opacity .58s cubic-bezier(.16,1,.3,1),clip-path .65s cubic-bezier(.16,1,.3,1);clip-path:inset(-3px -8px -3px -8px)}
.work-flow-ready .work-directory-card:not(.work-flow-entered) .work-directory-card-caption h2{opacity:0;clip-path:inset(0 0 100% 0)}
.work-flow-ready .work-directory-card-art{transition:opacity .55s cubic-bezier(.16,1,.3,1),border-color .25s}
.work-flow-ready .work-directory-card:not(.work-flow-entered) .work-directory-card-art{opacity:.2}
.work-flow-ready .work-directory-grid.is-list .work-flow-row-active .work-directory-strip-frame:nth-child(-n+8){animation:work-flow-frame-in .48s cubic-bezier(.16,1,.3,1) both}
.work-flow-ready .work-directory-strip-frame:nth-child(1){animation-delay:0ms!important}
.work-flow-ready .work-directory-strip-frame:nth-child(2){animation-delay:24ms!important}
.work-flow-ready .work-directory-strip-frame:nth-child(3){animation-delay:48ms!important}
.work-flow-ready .work-directory-strip-frame:nth-child(4){animation-delay:72ms!important}
.work-flow-ready .work-directory-strip-frame:nth-child(5){animation-delay:96ms!important}
.work-flow-ready .work-directory-strip-frame:nth-child(6){animation-delay:120ms!important}
.work-flow-ready .work-directory-strip-frame:nth-child(7){animation-delay:144ms!important}
.work-flow-ready .work-directory-strip-frame:nth-child(8){animation-delay:168ms!important}
.work-flow-ready .work-directory-list-strip.is-dragging .work-directory-strip-frame{animation:none!important}
}
@keyframes work-flow-frame-in{from{opacity:.2;transform:translate3d(0,9px,0);clip-path:inset(100% 0 0 0)}to{opacity:1;transform:translate3d(0,0,0);clip-path:inset(0 0 0 0)}}
@media(max-width:680px){.work-flow-ready .work-directory-card-art,.work-flow-ready .work-directory-card-caption p{translate:none}.work-flow-highlight{display:none}}
@media(max-width:680px){.work-flow-ready .work-directory-grid.is-list .work-directory-card-foot>span:last-child::after{content:none!important}}
/* Keep the floating ribbon above adjacent rows without moving the card or Block popup anchor. */
.work-flow-ready .work-directory-grid.is-list .work-directory-card:is(:hover,:focus-visible,.is-previewing,.work-flow-row-active){z-index:20}
@media(min-width:681px){
.work-flow-ready .work-directory-grid.is-list .work-directory-card-caption h2{clip-path:none!important;translate:0 0;transition:opacity .58s cubic-bezier(.16,1,.3,1),translate .6s cubic-bezier(.16,1,.3,1)}
.work-flow-ready .work-directory-grid.is-list .work-directory-card:is(:hover,:focus-visible,.work-flow-row-active) .work-directory-card-caption h2{opacity:1;translate:4px 0;clip-path:none!important}
.work-flow-ready .work-directory-grid.is-list .work-directory-card .roll-title{clip-path:none}
.work-flow-ready .work-directory-grid.is-list .work-flow-row-active .work-directory-strip-frame:nth-child(-n+8){animation-duration:.42s;animation-fill-mode:backwards}
.work-flow-ready .work-directory-list-strip.is-dragging .work-directory-strip-frame{animation:none!important}
}

@media(min-width:681px){.work-flow-ready .work-directory-card .roll-title{transform:skewX(var(--work-flow-skew,0deg));transform-origin:left center;transition:transform .28s cubic-bezier(.16,1,.3,1)}}
