/* ===== Projects section: professional cards, filter and motion ===== */
#projects{--pc:#4d8dff}
#projects .cards{gap:1.75rem;counter-reset:pj}
#projects .cards.one{grid-template-columns:minmax(0,560px)!important;justify-content:center}

/* Filter: segmented control with a sliding indicator */
.pj-filter{position:relative;display:flex;gap:.25rem;width:max-content;max-width:100%;margin:0 auto 2.2rem;padding:.35rem;background:var(--card);border:1px solid var(--line);border-radius:999px;overflow-x:auto;scrollbar-width:none}
.pj-filter::-webkit-scrollbar{display:none}
.pj-filter button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1.1rem;border:0;border-radius:999px;background:none;color:var(--tx2);font:600 .88rem/1 var(--bf);white-space:nowrap;cursor:pointer;transition:color .3s}
.pj-filter button:hover{color:var(--tx)}
.pj-filter button.on{color:#fff}
.pj-filter button:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.pj-n{display:inline-grid;place-items:center;min-width:1.35rem;height:1.35rem;padding:0 .35rem;border-radius:999px;background:rgba(127,127,127,.18);font-size:.72rem;font-weight:700;transition:background .3s}
.pj-filter button.on .pj-n{background:rgba(255,255,255,.22)}
.pj-ind{position:absolute;z-index:0;top:.35rem;bottom:.35rem;left:0;width:0;border-radius:999px;background:linear-gradient(135deg,var(--ac),var(--ac2));box-shadow:0 6px 18px rgba(31,107,255,.35);transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1)}

/* Card */
#projects .pj{--pc:#4d8dff;position:relative;isolation:isolate;counter-increment:pj;border-radius:22px;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .35s}
#projects .pj[data-type="app"]{--pc:#a78bfa}
#projects .pj[data-type="mobile"]{--pc:#2dbf8a}
#projects .pj[hidden]{display:none}
#projects .pj.pj-pre{opacity:0;transform:translateY(38px) scale(.985)}
#projects .pj.pj-out{opacity:0;transform:translateY(14px) scale(.97);transition:opacity .22s ease,transform .22s ease}
#projects .pj:hover{transform:translateY(-8px);border-color:var(--pc);box-shadow:0 26px 60px -18px color-mix(in srgb,var(--pc) 55%,transparent),0 2px 0 rgba(255,255,255,.04) inset}
#projects .pj:focus-visible{outline:2px solid var(--pc);outline-offset:4px}
#projects .pj::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),var(--pc),transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
#projects .pj::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--pc) 14%,transparent),transparent 55%)}
#projects .pj:hover::before,#projects .pj:hover::after{opacity:1}

/* Stage: preview image, index number, open arrow */
#projects .pj-stage{position:relative;padding:1.3rem 1.3rem 0;background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 16%,transparent),transparent 88%);border-radius:22px 22px 0 0}
#projects .pj-stage::before{content:counter(pj,decimal-leading-zero);position:absolute;z-index:3;bottom:.9rem;left:2rem;padding:.2rem .6rem;border:1px solid var(--line);border-radius:999px;background:rgba(5,8,22,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:600 .72rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
#projects .pj[role="link"] .pj-stage::after{content:"\2197";position:absolute;z-index:3;top:1.8rem;right:2rem;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--pc);color:#fff;font-size:1.15rem;opacity:0;transform:translate(-8px,8px) scale(.8);transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1);box-shadow:0 8px 22px color-mix(in srgb,var(--pc) 50%,transparent)}
#projects .pj[role="link"]:hover .pj-stage::after{opacity:1;transform:none}
#projects .pj-frame{position:relative;border-radius:12px 12px 0 0;box-shadow:0 14px 34px -14px rgba(0,0,0,.55)}
#projects .pj-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 45%,rgba(5,8,22,.5));opacity:0;transition:opacity .4s}
#projects .pj:hover .pj-frame::after{opacity:1}
#projects .pj-frame .mock-img{transition:transform .9s cubic-bezier(.2,.7,.2,1);transform-origin:50% 0}
#projects .pj:hover .pj-frame .mock-img{transform:scale(1.06)}

/* Body */
#projects .pj-body{padding:1.5rem 1.6rem 1.6rem}
#projects .pj-cat{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;margin-bottom:.8rem;padding:.28rem .75rem;border-radius:999px;background:color-mix(in srgb,var(--pc) 14%,transparent);color:var(--pc);font-size:.76rem;font-weight:700;letter-spacing:.03em}
#projects .pj-cat::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 25%,transparent)}
body.light #projects .pj-cat{color:color-mix(in srgb,var(--pc) 78%,#000)}
#projects .pj h3{margin-bottom:.6rem;font-size:1.32rem;letter-spacing:-.01em}
#projects .pj-body>p{font-size:.94rem;line-height:1.7}
#projects .pj-chips{margin:1.15rem 0 1.3rem}
#projects .pj-chips li{padding:.28rem .75rem;background:rgba(127,127,127,.08);transition:border-color .3s,color .3s}
#projects .pj:hover .pj-chips li{border-color:color-mix(in srgb,var(--pc) 45%,var(--line))}
#projects .pj-go{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line);color:var(--pc);font-size:.9rem}
body.light #projects .pj-go{color:color-mix(in srgb,var(--pc) 78%,#000)}
#projects .pj-go svg{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
#projects .pj:hover .pj-go svg{transform:translate(4px,-4px)}

@media(hover:none){#projects .pj:hover{transform:none;box-shadow:none}#projects .pj:hover .pj-frame .mock-img{transform:none}#projects .pj[role="link"] .pj-stage::after{opacity:1;transform:none}}
@media(max-width:560px){#projects .pj-stage{padding:1.1rem 1.1rem 0}#projects .pj-stage::before{bottom:.8rem;left:1.7rem}#projects .pj[role="link"] .pj-stage::after{top:1.5rem;right:1.7rem}#projects .pj-body{padding:1.3rem 1.25rem 1.4rem}.pj-filter{margin-bottom:1.6rem}}
@media(prefers-reduced-motion:reduce){#projects .pj,#projects .pj *,.pj-ind{transition:none!important}#projects .pj.pj-pre{opacity:1;transform:none}}
@media(max-width:480px){.pj-filter{gap:.1rem;padding:.3rem}.pj-filter button{gap:.3rem;padding:.5rem .62rem;font-size:.8rem}.pj-n{min-width:1.15rem;height:1.15rem;font-size:.66rem}.pj-ind{top:.3rem;bottom:.3rem}}
@media(max-width:480px){.pj-filter{width:100%;justify-content:space-between}.pj-filter button{flex:1 1 auto;justify-content:center;padding:.5rem .35rem;font-size:.78rem}}