/* Dynamic case study covers (src/components/CaseCover.astro). */
.cc{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;container-type:size;--ease:cubic-bezier(.16,1,.3,1)}
.cc-dev{container-type:inline-size;width:var(--dw);height:calc(var(--dw) / var(--ar))}
.cc-frame{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.cc-screen{position:absolute;overflow:hidden;background:#fff;z-index:2}
.cc-scr{position:absolute;inset:0;background:#fff;visibility:hidden}
.cc-scr img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top}
.cc-scr.cur,.cc-scr.old{visibility:visible}.cc-scr.cur{z-index:2}
.cc-scr.cur.go{animation:cc-in .6s var(--ease) both}.cc-scr.old{animation:cc-out .6s var(--ease) both}
@keyframes cc-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes cc-out{to{transform:translateX(-28%);filter:brightness(.82)}}

/* Desktop: fanned trio, opens on hover and leans toward the cursor */
.cc-fan{position:absolute;inset:0;perspective:900px;transition:transform .5s var(--ease);transform:rotateY(calc(var(--mx,0) * 7deg)) rotateX(calc(var(--my,0) * -5deg))}
.cc-fan .cc-dev{position:absolute;left:50%;top:50%;transition:transform .8s var(--ease);transform:translate(-50%,-50%) translate(var(--x,0),var(--y,0)) rotate(var(--rot,0deg)) scale(var(--sc,1))}
.cc-phone .cc-fan .cc-dev{--dw:min(30cqw,calc(80cqh * var(--ar)))}
.cc-tablet .cc-fan .cc-dev{--dw:min(62cqw,calc(64cqh * var(--ar)))}
.cc-fan .d0{z-index:3}.cc-fan .d1{z-index:2}.cc-fan .d2{z-index:1}
.cc-phone .cc-fan .d1{--x:-12%;--rot:-4deg;--sc:.94}
.cc-phone .cc-fan .d2{--x:12%;--rot:4deg;--sc:.94}
.cc-phone.playing .cc-fan .d1{--x:-78%;--y:6%;--rot:-10deg;--sc:.92}
.cc-phone.playing .cc-fan .d2{--x:78%;--y:6%;--rot:10deg;--sc:.92}
.cc-tablet .cc-fan .d1{--x:-8%;--y:4%;--rot:-3deg;--sc:.95}
.cc-tablet .cc-fan .d2{--x:8%;--y:4%;--rot:3deg;--sc:.95}
.cc-tablet.playing .cc-fan .d1{--x:-30%;--y:12%;--rot:-7deg;--sc:.9}
.cc-tablet.playing .cc-fan .d2{--x:30%;--y:12%;--rot:7deg;--sc:.9}

/* Phones and tablets: drifting reel */
.cc-reel{display:none;position:absolute;inset:0}
.cc-strip{position:absolute;left:0;top:50%;display:flex;gap:4cqw;padding-left:4cqw;width:max-content;transform:translateY(-50%);animation:cc-reel var(--dur,28s) linear infinite;animation-play-state:paused}
.cc.inview .cc-strip{animation-play-state:running}
.cc-reel .cc-dev{position:relative;flex:none}
.cc-phone .cc-reel .cc-dev{--dw:min(24cqw,calc(84cqh * var(--ar)))}
.cc-tablet .cc-reel .cc-dev{--dw:min(66cqw,calc(78cqh * var(--ar)))}
@keyframes cc-reel{to{transform:translateY(-50%) translateX(-50%)}}
@media (max-width:991px){.cc-fan{display:none}.cc-reel{display:block}}
@media (prefers-reduced-motion:reduce){.cc-strip{animation:none}.cc-scr{animation:none!important}}
@media (min-width:992px){.cc{aspect-ratio:1}}
.case-studies-small .cc{aspect-ratio:1}

/* Project artwork (src/components/ProjectCover.astro) */
.pj-wrap{border:0!important}  /* Webflow's wrapper draws a left border that doubles ours */
.pc{position:relative;width:100%;height:100%;container-type:size}
.pc .cc-dev{position:absolute;left:50%;top:50%}
.pc.solo-tablet .cc-dev{--dw:min(96cqw,calc(92cqh * var(--ar)));transform:translate(-50%,-50%)}
.pc.solo-phone .cc-dev{--dw:min(46cqw,calc(96cqh * var(--ar)));transform:translate(-50%,-50%)}
.pc.duo .k-tablet{--dw:min(78cqw,calc(86cqh * var(--ar)));transform:translate(-60%,-52%)}
.pc.duo .k-phone{--dw:min(22cqw,calc(72cqh * var(--ar)));transform:translate(98%,-34%);z-index:2}
.pc-shot{position:absolute;inset:0;background:#fff;opacity:0;transition:opacity 1.2s ease}
.pc-shot.on{opacity:1}
.pc-shot img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top}
.pc.static img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.pc.logo{display:grid;place-items:center}
.pc.logo img{width:min(46%,220px);max-height:40%;object-fit:contain}
html[data-theme="dark"] .pc.logo img{filter:brightness(0) invert(1)}
@media (prefers-reduced-motion:reduce){.pc-shot{transition:none}}