/* MintVanilla · work cards (see work-cards.js)
   rest: background + small browser window · active (.on): window pops forward, screenshot scrolls inside */
.wc{display:flex;flex-direction:column;gap:14px;color:inherit;text-decoration:none}
.wc-stage{position:relative;aspect-ratio:16/11;isolation:isolate}
/* background: a photo if there is one, otherwise the project's colours */
.wc-back{position:absolute;inset:0;border-radius:12px;overflow:hidden;
  background:radial-gradient(80% 90% at 85% 10%,color-mix(in srgb,var(--ac) 70%,transparent),transparent 70%),
             radial-gradient(70% 80% at 0% 100%,color-mix(in srgb,var(--fg) 30%,transparent),transparent 70%),var(--bg);
  transition:transform 1s cubic-bezier(.2,.8,.2,1),filter 1s}
.wc-back img{width:100%;height:100%;object-fit:cover;display:block}
.wc.on .wc-back{transform:scale(1.04);filter:brightness(.62) saturate(.9)}
.wc-logo{position:absolute;z-index:1;left:5%;top:6%;height:9%;width:auto;max-width:34%;object-fit:contain;transition:opacity .5s}
.wc.on .wc-logo{opacity:0}
/* the browser window */
.wc-win{position:absolute;z-index:2;left:11%;right:11%;top:16%;bottom:0;border-radius:10px 10px 0 0;overflow:hidden;background:#fff;
  box-shadow:0 -1px 0 rgba(255,255,255,.08),0 18px 40px -20px rgba(0,0,0,.6);
  transform-origin:50% 100%;transition:transform .8s cubic-bezier(.2,.9,.25,1.1),box-shadow .8s,border-radius .8s}
.wc.on .wc-win{transform:translateY(-6%) scale(1.14);border-radius:10px;box-shadow:0 40px 80px -24px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06)}
.wc-chrome{height:22px;display:flex;align-items:center;gap:5px;padding:0 10px;background:#ececec;border-bottom:1px solid #dcdcdc}
.wc-chrome i{width:8px;height:8px;border-radius:50%;background:#d0d0d0}
.wc-chrome i:nth-child(1){background:#ff6058}.wc-chrome i:nth-child(2){background:#ffbd2e}.wc-chrome i:nth-child(3){background:#28c941}
.wc-chrome span{margin-left:10px;flex:1;max-width:60%;height:13px;border-radius:7px;background:#fff;font:500 8px/13px "Geist Mono",ui-monospace,monospace;color:#888;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wc-view{position:absolute;inset:22px 0 0 0;overflow:hidden;background:var(--bg)}
.wc-shot{display:block;width:100%;height:auto;will-change:transform}
/* under the card */
.wc-meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.wc-meta h3{margin:0;font:600 clamp(18px,1.8vw,26px)/1.1 var(--display,"Syne"),Arial,sans-serif;letter-spacing:-.03em}
.wc-info{font:500 10px/1.4 "Geist Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
/* bubbles */
.wc{--mx:0;--my:0}
.wc-pops{position:absolute;inset:0;z-index:3;pointer-events:none}
.wc-pop{position:absolute;opacity:0;transform:translate(var(--from)) scale(.3);
  transition:opacity .3s,transform .55s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i) * 40ms)}
.wc.on .wc-pop{opacity:1;transform:translate(calc(var(--mx) * var(--d) * -26px),calc(var(--my) * var(--d) * -26px)) scale(1);
  transition:opacity .4s,transform .8s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.35s + var(--i) * 110ms)}
.wc-pop-in{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--bg) 72%,transparent);color:var(--fg);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  border:1px solid color-mix(in srgb,var(--fg) 22%,transparent);box-shadow:0 14px 30px -14px rgba(0,0,0,.55);
  font:500 10px/1 "Geist Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;animation:wcFloat 4s ease-in-out infinite;animation-delay:calc(var(--i) * -.9s)}
.wc-pop-in i{width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 30%,transparent)}
.wc-pop-in em{width:14px;height:14px;border-radius:50%;margin-right:-4px;border:1.5px solid color-mix(in srgb,var(--fg) 40%,transparent)}
.wc-pop-in em:last-of-type{margin-right:4px}
.wc-pop.stat .wc-pop-in{flex-direction:column;align-items:flex-start;gap:4px;border-radius:14px;padding:12px 16px;background:var(--ac);color:var(--bg);border-color:transparent;text-transform:none;letter-spacing:0}
.wc-pop.stat b{font:700 clamp(20px,2vw,30px)/.95 "Syne",Arial,sans-serif;letter-spacing:-.03em}
.wc-pop.stat small{font:500 9px/1.2 "Geist Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
@keyframes wcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.wc-win,.wc-back,.wc-pop{transition:none}.wc-pop-in{animation:none}}