/* ===== projects / packages ===== */
.pk-head-wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
#pkHead[dir=rtl]{text-align:right}
#pkHead[dir=rtl] .sec-sub{margin-inline:0}
.lang{position:relative;display:inline-flex;padding:4px;border-radius:99px;background:rgba(255,255,255,.06);border:.5px solid var(--line);margin-bottom:14px}
.lang button{appearance:none;border:0;background:none;color:var(--mu);font:600 14px var(--sans);padding:8px 16px;border-radius:99px;cursor:pointer;position:relative;z-index:1;transition:color .3s,transform .35s var(--spring)}
.lang button.on{color:#000}
.lang button:active{transform:scale(.92)}
.lang::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;background:#fff;transition:transform .5s var(--spring)}
.lang[data-l=ar]::before{transform:translateX(100%)}

#pkList{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;margin-inline:-20px;padding:6px 20px 12px;scroll-snap-type:x mandatory;scroll-padding-inline:20px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#pkList::-webkit-scrollbar{display:none}
.pk{flex:none;width:min(88vw,540px);scroll-snap-align:start;margin:0;display:flex;flex-direction:column}
.pk-list+.tags{margin-bottom:16px}
.pk-dots{display:flex;justify-content:center;gap:8px;margin-top:2px}
.pk-dots button{appearance:none;border:0;padding:0;height:8px;width:8px;border-radius:99px;background:rgba(255,255,255,.22);cursor:pointer;transition:width .5s var(--spring),background .3s}
.pk-dots button.on{width:26px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.4)}
.pk-body{padding:20px 22px 14px}
.pk-body:last-child{display:flex;flex-direction:column;padding-top:4px;padding-bottom:20px}
.pk-head{display:flex;gap:14px;align-items:center}
.pk-head small{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
.pk-head h3{margin:2px 0 0;font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.pk-desc{margin-top:10px;font-size:16.5px;line-height:1.45;color:#8e8e93}
.pk:hover .app{transform:scale(1.08) rotate(-3deg)}

/* gallery: one row, every screenshot shown whole at its own ratio (nothing cropped or hidden) */
.pk-gal{padding:0}
.pk-album{position:relative;margin:6px 22px 18px;display:flex;justify-content:center;transition:opacity .7s .15s,transform .8s .15s var(--spring)}
.pk-stage{display:flex;justify-content:center;align-items:center;max-width:100%}
.pk-slide{display:none;appearance:none;padding:0;margin:0;border:.5px solid rgba(255,255,255,.16);border-radius:18px;overflow:hidden;background:none;cursor:pointer;line-height:0;box-shadow:0 12px 30px rgba(0,0,0,.55)}
.pk-slide.cur{display:block;animation:pkin .5s var(--spring)}
@keyframes pkin{from{opacity:0;transform:scale(.96)}}
/* the frame is exactly the image: whole screenshot, nothing cropped, nothing hidden */
.pk-slide img{display:block;width:auto;height:auto;max-width:100%;max-height:400px;user-select:none;-webkit-user-drag:none;pointer-events:none;
  filter:grayscale(1) contrast(1.05) brightness(.9);transition:filter .45s}
.pk-slide.on img{filter:none}
.pk-slide.on{cursor:zoom-in}
.pk-slide:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pk-nav{position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;border-radius:50%;border:.5px solid rgba(255,255,255,.25);background:rgba(30,30,32,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;display:grid;place-items:center;padding:0;cursor:pointer;z-index:2;transition:transform .35s var(--spring),background .2s}
.pk-nav svg{width:22px;height:22px}
.pk-nav.prev{left:-10px}.pk-nav.next{right:-10px}
.pk-nav:hover{background:rgba(70,70,74,.85)}.pk-nav:active{transform:scale(.88)}
.pk-cnt{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);padding:4px 12px;border-radius:99px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:12.5px;font-weight:600;color:#fff;line-height:1.4;pointer-events:none}

.pk-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.pk-list li{position:relative;padding-inline-start:26px;font-size:15.5px;line-height:1.45;color:#a1a1a6}
.pk-list li::before{content:"";position:absolute;inset-inline-start:2px;top:.5em;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#6a6a6e);box-shadow:0 0 10px rgba(255,255,255,.35)}
.pk-list b{color:var(--tx);font-weight:600}
.pk .tags{margin-top:14px}
.pk-buy{width:100%;justify-content:center;margin-top:4px;box-shadow:0 0 30px rgba(255,255,255,.18)}

/* staggered blur-in for list items once the card is revealed */
.pk-list li{opacity:0;transform:translateY(10px);filter:blur(3px);transition:opacity .6s,transform .7s var(--spring),filter .6s}
.pk.in .pk-list li{opacity:1;transform:none;filter:none}
.pk.in .pk-list li:nth-child(1){transition-delay:.15s}.pk.in .pk-list li:nth-child(2){transition-delay:.21s}.pk.in .pk-list li:nth-child(3){transition-delay:.27s}.pk.in .pk-list li:nth-child(4){transition-delay:.33s}.pk.in .pk-list li:nth-child(5){transition-delay:.39s}.pk.in .pk-list li:nth-child(6){transition-delay:.45s}.pk.in .pk-list li:nth-child(n+7){transition-delay:.5s}
.pk .pk-album{opacity:0;transform:translateY(16px)}
.pk.in .pk-album{opacity:1;transform:none}

/* lightbox */
#lb{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(0,0,0,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s;cursor:zoom-out;padding:env(safe-area-inset-top,0px) 14px env(safe-area-inset-bottom,0px)}
#lb.on{opacity:1;visibility:visible;transition:opacity .35s}
#lb img{max-width:100%;max-height:86vh;border-radius:18px;border:.5px solid rgba(255,255,255,.18);box-shadow:0 30px 80px rgba(0,0,0,.8);transform:scale(.9);transition:transform .55s var(--spring)}
#lb.on img{transform:none}
.lb-arr{position:absolute;top:50%;margin-top:-26px;width:52px;height:52px;border-radius:50%;border:.5px solid rgba(255,255,255,.25);background:rgba(30,30,32,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;z-index:2;transition:transform .35s var(--spring),background .2s}
.lb-arr svg{width:24px;height:24px}
.lb-arr.prev{left:12px}.lb-arr.next{right:12px}
.lb-arr:hover{background:rgba(70,70,74,.85)}.lb-arr:active{transform:scale(.88)}
#lb span{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);left:50%;transform:translateX(-50%);font-size:13px;font-weight:600;color:var(--mu)}

@media (min-width:600px){.pk-body{padding:22px 28px 14px}.pk-album{margin-inline:28px}.pk-slide img{max-height:460px}}
@media (prefers-reduced-motion:reduce){.pk-list li,.pk .pk-album{opacity:1;transform:none;filter:none}}

/* see more / less for long lists */
.pk-list.fold:not(.open) li.x{display:none}
.pk-more{appearance:none;display:block;width:100%;margin-top:12px;padding:10px 16px;border-radius:99px;border:.5px solid var(--line);background:rgba(255,255,255,.07);color:var(--tx);font:600 15px var(--sans);cursor:pointer;text-align:center;transition:transform .35s var(--spring),background .2s}
.pk-more:hover{background:rgba(255,255,255,.12)}
.pk-more:active{transform:scale(.96)}
.pk-more+.tags{margin-bottom:16px}
.pk-buy{flex:none}