/* design-pass-1: case cards are full-bleed photos floating on the scene (no black panel). Remove the <link> in index.html to revert. */
.lcard{-webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);mask-image:linear-gradient(180deg,#000 88%,transparent)}

/* UGC cards turn toward the creator at the desk (bottom left). Farther cards turn more. Delete this block to revert. */
.card3d .lcard,.card3d .ug-pv{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ov>.card3d:nth-child(5) .lcard,.ov>.card3d:nth-child(5) .ug-pv{transform:perspective(1100px) rotateY(-14deg) scaleX(1.031) rotateX(-3deg)}
.ov>.card3d:nth-child(6) .lcard,.ov>.card3d:nth-child(6) .ug-pv{transform:perspective(1100px) rotateY(-19deg) scaleX(1.058) rotateX(-3deg)}
.ov>.card3d:nth-child(7) .lcard,.ov>.card3d:nth-child(7) .ug-pv{transform:perspective(1100px) rotateY(-24deg) scaleX(1.095) rotateX(-3deg)}
.ov>.card3d:nth-child(8) .lcard,.ov>.card3d:nth-child(8) .ug-pv{transform:perspective(1100px) rotateY(-29deg) scaleX(1.143) rotateX(-3deg)}
.ov>.card3d:has(.lcard:hover) .lcard,.ov>.card3d:has(.lcard:hover) .ug-pv{transform:perspective(1100px) rotateY(-6deg) scaleX(1.01) rotateX(-2deg)}

/* Previous Works rows are driven by script now (endless random stream), so the old fixed loop animation is off. */
.pw-t{animation:none!important;will-change:transform}

/* Previous Works labels: one line, ellipsis, smaller, so they never cover the image (4 rows made the tiles shorter). */
.pw-k{left:.5cqw;right:.5cqw;bottom:.4cqw;gap:.12cqw}
.pw-k b{font-size:.4cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.12em}
.pw-k span{font-size:.6cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;letter-spacing:.04em}
.pw-c:after{background:linear-gradient(180deg,rgba(0,0,0,0) 66%,rgba(0,0,0,.72))}

/* three short rows in the empty space right of the Previous Works title */
.pw-row.pw-up{height:6cqw}

/* Previous Works hover pop-out */
.pw-c:hover i{opacity:0!important}
#pw-pop{position:fixed;z-index:60;pointer-events:none;border-radius:7px;overflow:hidden;background:#0b0b0c;border:1px solid rgba(255,255,255,.28);box-shadow:0 22px 60px rgba(0,0,0,.75);opacity:0;transform:scale(.58);transition:opacity .18s ease,transform .24s cubic-bezier(.2,.8,.2,1)}
#pw-pop.on{opacity:1;transform:scale(1)}
#pw-pop img,#pw-pop video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#pw-pop .k{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.88));color:#fff;font-family:"Inter Tight",Inter,sans-serif}
#pw-pop .k b{display:block;font-weight:500;font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.72);text-transform:uppercase}
#pw-pop .k span{display:block;margin-top:3px;font-weight:600;font-size:15px;letter-spacing:.03em;text-transform:uppercase}
#pw-pop .k i{display:block;margin-top:5px;font-style:normal;font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.88)}
@media (hover:none){#pw-pop{display:none}}