/* ==========================================================
   Animated project covers (Citya, Sports Venue, Flying Money)
   Markup: .im-cover[data-cover] inside .image-wrapper.work
   Behaviour: js/covers.js (hover on desktop, scroll-play on touch)
   ========================================================== */
.im-cover{position:absolute;inset:0;overflow:hidden;z-index:0}
.im-cover .scene{position:absolute;left:50%;top:50%;width:640px;height:420px;transform-origin:center;transform:translate(-50%,-50%) scale(var(--s,1))}
.im-cover[data-cover="citya"]{background:radial-gradient(120% 120% at 85% 10%,#56c2c0 0%,#6a72cf 45%,#5b5fb3 100%)}
.im-cover[data-cover="sports"]{background:linear-gradient(160deg,#8aa594,#6f8d7b)}
.im-cover[data-cover="money"]{background:radial-gradient(110% 120% at 20% 0%,#fbecb9 0%,#f4d98c 55%,#ecc96c 100%)}
.im-cover *{box-sizing:border-box}
.im-cover p,.im-cover h4{margin:0}

/* phones */
.im-cover .phone{position:absolute;background:#0f0f12;border-radius:30px;padding:7px;box-shadow:0 30px 50px -20px rgba(20,16,60,.55),inset 0 0 0 1.5px #3a3a44}
.im-cover .phone .scr{position:relative;width:100%;height:100%;border-radius:24px;overflow:hidden;background:#fff}
.im-cover .phone .scr img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top;opacity:0;transform:translateX(18px);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.im-cover .phone .scr img.on{opacity:1;transform:none}
.im-cover .phone .scr img.out{opacity:0;transform:translateX(-18px)}
.im-cover .phone .notch{position:absolute;left:50%;top:7px;width:62px;height:15px;margin-left:-31px;background:#0f0f12;border-radius:0 0 11px 11px;z-index:3}

/* ---------- Citya ---------- */
.im-cover .p-pass{width:178px;height:372px;left:150px;top:26px;transform:rotate(-6deg);z-index:2}
.im-cover .p-drv{width:160px;height:334px;left:350px;top:52px;transform:rotate(7deg);z-index:1}
.im-cover .route{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.im-cover .route path{fill:none;stroke:rgba(255,255,255,.35);stroke-width:2;stroke-dasharray:4 7}
.im-cover .shuttle{fill:#fff;opacity:0;transition:opacity .4s}
.im-cover.play .shuttle{opacity:1}
.im-cover .step{position:absolute;left:30px;bottom:26px;z-index:4;display:flex;gap:6px;align-items:center;background:rgba(255,255,255,.95);color:#2b2f6b;border-radius:999px;padding:7px 12px 7px 9px;font:600 12px/1 "DM Sans",Raleway,sans-serif;box-shadow:0 10px 24px -10px rgba(0,0,0,.35);transform:translateY(8px);opacity:0;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.im-cover.play .step{opacity:1;transform:none}
.im-cover .dots{display:flex;gap:3px;margin-right:4px}
.im-cover .dots i{width:6px;height:6px;border-radius:50%;background:#d5d7f0;transition:background .3s,width .3s}
.im-cover .dots i.on{background:#4b54c4;width:14px;border-radius:4px}

/* ---------- Sports Venue ---------- */
.im-cover .win{position:absolute;left:44px;top:26px;width:552px;height:370px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 34px 60px -26px rgba(15,35,25,.55)}
.im-cover .win .bar{height:26px;background:#f1f2f1;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid #e3e5e3}
.im-cover .win .bar i{width:9px;height:9px;border-radius:50%;background:#d7dad7}
.im-cover .win .bar span{margin-left:14px;height:13px;flex:0 0 210px;border-radius:7px;background:#e4e7e4}
.im-cover .win .page{position:absolute;left:0;top:26px;width:552px}
.im-cover .win .page img{width:100%;max-width:none;display:block}
.im-cover .shade{position:absolute;inset:0;background:rgba(30,40,34,.42);opacity:0;transition:opacity .35s ease;z-index:3}
.im-cover .pop{position:absolute;left:56px;top:54px;width:440px;z-index:4;border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);opacity:0;transform:translateY(16px) scale(.94);transition:opacity .35s ease,transform .5s cubic-bezier(.2,.9,.25,1.15)}
.im-cover .pop img{width:100%;max-width:none;display:block}
.im-cover .booked{position:absolute;left:181px;top:89px;width:231px;height:20px;border-radius:3px;background:#3f6e55;color:#fff;font:600 11px/20px "DM Sans",Raleway,sans-serif;text-align:center;opacity:0;transform:scale(.9);transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.25,1.2)}
.im-cover .hl{position:absolute;left:50px;top:135px;width:72px;height:38px;border-radius:5px;border:2px solid #5aa598;box-shadow:0 0 0 4px rgba(90,165,152,.25);opacity:0;transform:scale(1.15);transition:opacity .25s,transform .3s;z-index:2}
.im-cover .cursor{position:absolute;left:520px;top:380px;width:22px;height:22px;z-index:6;opacity:0;transition:left .8s cubic-bezier(.45,0,.2,1),top .8s cubic-bezier(.45,0,.2,1),opacity .3s,transform .15s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.im-cover .cursor.click{transform:scale(.82)}
.im-cover.s1 .cursor{opacity:1}
.im-cover.s2 .hl{opacity:1;transform:none}
.im-cover.s3 .shade{opacity:1}
.im-cover.s3 .pop{opacity:1;transform:none}
.im-cover.s4 .booked{opacity:1;transform:none}
.im-cover .toast{position:absolute;right:58px;bottom:40px;z-index:7;background:#fff;color:#1d2a22;border-radius:12px;padding:10px 14px;font:500 12px/1.3 "DM Sans",Raleway,sans-serif;display:flex;gap:8px;align-items:center;box-shadow:0 14px 30px -12px rgba(0,0,0,.4);opacity:0;transform:translateY(12px);transition:opacity .3s,transform .45s cubic-bezier(.2,.9,.25,1.2)}
.im-cover .toast b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#3f6e55;color:#fff;font-size:11px}
.im-cover.s4 .toast{opacity:1;transform:none}

/* ---------- Flying Money ---------- */
.im-cover .fm{font-family:"DM Sans",Raleway,sans-serif;color:#4a360f;line-height:1.2}
.im-cover .p-fm{width:186px;height:384px;left:66px;top:18px;transform:rotate(-4deg);background:#4b3510;box-shadow:0 30px 50px -18px rgba(90,60,0,.5),inset 0 0 0 1.5px #6b4d1b}
.im-cover .p-fm .notch{background:#4b3510}
.im-cover .ui{position:absolute;inset:0;background:#f4f1ea;font-size:8px}
.im-cover .ui .top{background:linear-gradient(180deg,#f1d98e,#f6e6b6);padding:22px 11px 30px;border-radius:0 0 16px 16px}
.im-cover .ui .sb{position:absolute;top:6px;left:14px;font-weight:700;font-size:7.5px}
.im-cover .ui h4{margin:0 0 7px;font-size:13px;font-weight:700;line-height:1.2;color:inherit}
.im-cover .ui .lbl{font-size:6.5px;opacity:.8}
.im-cover .ui .bal{font-size:18px;font-weight:700;letter-spacing:-.01em;color:#3a2a0b}
.im-cover .ui .months{display:flex;gap:9px;margin-top:7px;font-size:6.5px;white-space:nowrap}
.im-cover .ui .months b{background:#fffaf0;border-radius:8px;padding:2px 7px;font-weight:500}
.im-cover .ui .ei{margin:-22px 10px 0;background:#fff;border-radius:7px;display:flex;padding:7px 0;box-shadow:0 4px 10px -6px rgba(0,0,0,.25)}
.im-cover .ui .ei>div{flex:1;text-align:center}
.im-cover .ui .ei>div+div{border-left:1px solid #eee}
.im-cover .ui .ei .v{font-size:10px;font-weight:700}
.im-cover .exp{color:#d1531d}.im-cover .inc{color:#3e9a62}
.im-cover .ui .sec{margin:10px 11px 5px;font-size:9px;font-weight:700}
.im-cover .goal{margin:0 10px;background:#fff;border-radius:7px;display:flex;align-items:center;overflow:hidden;height:40px}
.im-cover .goal .ic{width:24px;height:100%;background:#6a4a12;display:grid;place-items:center}
.im-cover .goal svg.ring{width:30px;height:30px;margin:0 7px}
.im-cover .ring .t{fill:none;stroke:#ece6da;stroke-width:3.2}
.im-cover .ring .b{fill:none;stroke:#6a4a12;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:75.4;stroke-dashoffset:56.55;transform:rotate(-90deg);transform-origin:center}
.im-cover .ring text{font:700 7px "DM Sans",sans-serif;fill:#4a360f;text-anchor:middle;dominant-baseline:central}
.im-cover .goal .gt{font-size:6px;opacity:.75}.im-cover .goal .gv{font-size:10px;font-weight:700}
.im-cover .row{margin:0 10px 4px;background:#fff;border-radius:7px;display:flex;align-items:center;gap:6px;padding:6px 7px}
.im-cover .row .dot{width:15px;height:15px;border-radius:50%;flex:none}
.im-cover .row .n{flex:1;font-weight:500;font-size:7.5px}.im-cover .row .n small{display:block;font-size:5.5px;opacity:.6;font-weight:400}
.im-cover .row .a{font-weight:700;font-size:7.5px}
.im-cover .fab{position:absolute;left:50%;bottom:12px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:#c9a227;color:#fff;display:grid;place-items:center;font-size:15px;line-height:1;box-shadow:0 6px 12px -4px rgba(120,80,0,.5)}
.im-cover .tx{position:absolute;width:236px;background:#faf8f3;border-radius:12px;display:flex;align-items:center;gap:10px;padding:12px 14px;box-shadow:0 18px 34px -16px rgba(90,60,0,.45);z-index:3;animation:imc-bob 5s ease-in-out infinite}
.im-cover .tx .ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none}
.im-cover .tx .t{flex:1}.im-cover .tx .t b{display:block;font-size:14px;font-weight:500}.im-cover .tx .t span{font-size:9.5px;opacity:.6}
.im-cover .tx .amt{text-align:right;font-weight:700;font-size:15px}.im-cover .tx .amt small{display:block;margin-top:3px;font-weight:500;font-size:8.5px;opacity:.7}
.im-cover .tag{display:inline-block;background:#f1d27a;border-radius:6px;padding:1px 5px;margin-right:3px;color:#5a420f}
.im-cover .tx1{left:300px;top:64px}.im-cover .tx2{left:350px;top:168px;animation-delay:-1.6s}.im-cover .tx3{left:322px;top:272px;animation-delay:-3.2s}
@keyframes imc-bob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -5px;rotate:-.6deg}}
.im-cover.play .tx{animation:imc-flyin .9s cubic-bezier(.2,.9,.25,1.12) both,imc-bob 5s ease-in-out .9s infinite}
.im-cover.play .tx2{animation-delay:.18s,1.1s}.im-cover.play .tx3{animation-delay:.36s,1.3s}
@keyframes imc-flyin{0%{opacity:0;transform:translate(170px,-60px) rotate(14deg) scale(.85)}60%{opacity:1}100%{opacity:1;transform:none}}
.im-cover.play .row{animation:imc-rowin .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes imc-rowin{from{opacity:0;transform:translateY(8px)}}
.im-cover .coin{position:absolute;z-index:2;font:700 13px "DM Sans",sans-serif;color:#9a7413;opacity:0}
.im-cover.play .coin{animation:imc-coin 1.6s ease-out both}
@keyframes imc-coin{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),-120px) scale(1.1) rotate(var(--r))}}

/* keep the gentle image zoom the old covers had on hover */
.work-link:hover .im-cover .scene{transform:translate(-50%,-50%) scale(calc(var(--s,1) * 1.02));transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.im-cover .scene{transition:transform 1s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.im-cover *{animation:none!important;transition:none!important}}