/* ===== All Projects page + header button ===== */
.horizontal-header-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.all-proj-btn{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:99px;border:1px solid transparent;color:#f4f1ec;font:700 .78rem 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;background:linear-gradient(rgba(7,7,10,.92),rgba(7,7,10,.92)) padding-box,linear-gradient(120deg,#e5132b,#ff3d5a) border-box;transition:box-shadow .3s,translate .3s}
.all-proj-btn i{color:#ff3d5a;transition:translate .3s}
.all-proj-btn:hover{box-shadow:0 0 22px rgba(229, 19, 43,.55);translate:0 -2px}
.all-proj-btn:hover i{translate:4px 0}

.ap{position:fixed;inset:0;z-index:10001;overflow-y:auto;overflow-x:hidden;background:#07070a;color:#f4f1ec;opacity:0;translate:0 24px;transition:opacity .45s,translate .45s cubic-bezier(.2,.8,.2,1)}
.ap[hidden]{display:none}
.ap.open{opacity:1;translate:0 0}
.ap-glow{position:fixed;border-radius:50%;filter:blur(120px);opacity:.12;pointer-events:none}
.ap-g1{width:460px;height:460px;left:-120px;top:-100px;background:#e5132b}
.ap-g2{width:520px;height:520px;right:-140px;bottom:-140px;background:#d9b46a}
.ap-top{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:16px 5vw;background:rgba(7,7,10,.85);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)}
.ap-back{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:99px;border:1px solid transparent;color:#f4f1ec;font:700 .76rem 'JetBrains Mono',monospace;letter-spacing:.1em;cursor:pointer;background:linear-gradient(rgba(7,7,10,.92),rgba(7,7,10,.92)) padding-box,linear-gradient(120deg,#e5132b,#ff3d5a) border-box;transition:.3s}
.ap-back:hover{box-shadow:0 0 22px rgba(229, 19, 43,.45)}.ap-back:hover i{translate:-4px 0}.ap-back i{transition:.3s;color:#ff3d5a}
.ap-count{font:700 .72rem 'JetBrains Mono',monospace;letter-spacing:.2em;color:rgba(244,241,236,.5)}
.ap-inner{position:relative;max-width:1180px;margin:0 auto;padding:46px 5vw 80px}
.ap-tag{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:clamp(0.95rem,1.4vw,1.25rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#f4f1ec;line-height:1.2;margin-bottom:12px}
.ap-tag-prefix{color:#e5132b;font-weight:800;opacity:.95;text-shadow:0 0 14px rgba(229,19,43,.55)}
.ap-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(2.2rem,6vw,4.2rem);line-height:1.2;padding-bottom:10px;margin:0 0 34px;background:linear-gradient(90deg,#f4f1ec,#ffd5dc 55%,#f4f1ec);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ap-lead{max-width:560px;color:#a7a6ad;line-height:1.7;margin-bottom:26px}
.ap-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.ap-chip{padding:8px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#a7a6ad;font:600 .76rem 'JetBrains Mono',monospace;letter-spacing:.08em;cursor:pointer;transition:.25s}
.ap-chip:hover{border-color:#e5132b;color:#f4f1ec}
.ap-chip.on{background:linear-gradient(90deg,#e5132b,#ff3d5a);border-color:transparent;color:#07070a;font-weight:800}
.ap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.ap-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.09);background:linear-gradient(155deg,color-mix(in srgb,var(--c) 13%,#0e0e13),#07070a 70%);transition:border-color .3s,box-shadow .3s,translate .3s;animation:apIn .6s calc(var(--i)*.07s) cubic-bezier(.2,.8,.2,1) backwards}
.ap-card[hidden]{display:none}
.ap-card:hover{border-color:var(--c);translate:0 -6px;box-shadow:0 22px 50px -18px color-mix(in srgb,var(--c) 60%,transparent)}
.ap-card::before{content:"";position:absolute;width:220px;height:220px;right:-90px;top:-100px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 32%,transparent),transparent 65%);pointer-events:none}
.ap-n{position:absolute;right:20px;top:12px;font:800 2.2rem 'JetBrains Mono',monospace;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--c) 45%,transparent)}
.ap-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:1.35rem;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);transition:.35s}
.ap-card:hover .ap-ic{background:var(--c);color:#07070a;rotate:-8deg;scale:1.08}
.ap-name{font:800 1.25rem 'Plus Jakarta Sans',sans-serif;letter-spacing:.02em;margin:4px 0 0}
.ap-sub{font-style:italic;color:var(--c);font-size:.9rem;margin:0}
.ap-body{color:#a7a6ad;font-size:.9rem;line-height:1.65;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ap-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.ap-tags span{font:600 .68rem 'JetBrains Mono',monospace;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.ap-link{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:99px;font:700 .74rem 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#07070a;background:var(--c);transition:.3s}
.ap-link:hover{box-shadow:0 0 24px color-mix(in srgb,var(--c) 70%,transparent);translate:0 -2px}
.ap-link.off{background:transparent;color:#6d6c75;border:1px dashed rgba(255,255,255,.18);cursor:default}.ap-link.off:hover{box-shadow:none;translate:none}
.ap-card>.ap-link:not(.off){margin-top:10px}
@keyframes apIn{from{opacity:0;translate:0 30px}}
@media (max-width:640px){.ap-top{padding:12px 16px}.ap-inner{padding:30px 18px 60px}.ap-grid{grid-template-columns:1fr}.ap-count{display:none}}

/* Selected Projects now has 3 slides: shorten the pinned scroll track to match */
@media (min-width:901px){.horizontal-works-section{height:340vh}}

.ap-card[data-href],.project-slide-card[data-href]{cursor:pointer}
.project-slide-card[data-href]:focus-visible{outline:2px solid #e5132b;outline-offset:4px}

/* official project logos */
.mockup-glow-icon.logo img{display:block;width:96px;height:96px;border-radius:24px;object-fit:cover}
.ap-ic.logo{background:none;padding:0;overflow:hidden}
.ap-ic.logo img{display:block;width:100%;height:100%;border-radius:15px}
.ap-card:hover .ap-ic.logo{background:none;rotate:-6deg;scale:1.08}