/* Page styles for portfolio.php — shared tokens live in ../site.css */

/* ═══════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════ */
@keyframes rise    { from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none} }
@keyframes rise-sm { from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none} }
@keyframes fade-in { from{opacity:0}to{opacity:1} }
@keyframes grid-d  { from{transform:translateY(0)}to{transform:translateY(60px)} }
@keyframes scan    { 0%{transform:translateY(-100%)}100%{transform:translateY(100vh)} }
@keyframes breathe {
    0%,100%{opacity:.4;transform:translateX(-50%) scale(1)}
    50%    {opacity:.8;transform:translateX(-50%) scale(1.1)}
}
@keyframes glitch {
    0%,88%,100%{transform:none;opacity:0}
    89%{transform:translateX(-4px);opacity:1}
    90%{transform:translateX(3px);opacity:1}
    91%{transform:none;opacity:0}
    93%{transform:translateX(-2px);opacity:1}
    94%{transform:none;opacity:0}
}
@keyframes pulse {
    0%,100%{box-shadow:0 0 0 0 rgba(191,247,71,.5)}
    50%    {box-shadow:0 0 0 7px rgba(191,247,71,0)}
}
@keyframes cardIn {
    from{opacity:0;transform:translateY(20px)}
    to  {opacity:1;transform:none}
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════ */
.pf-r { opacity:0;transform:translateY(14px);transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease); }
.pf-r.on { opacity:1;transform:none; }

/* cursor glow */

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.pf-hero {
    background:var(--bg-base);
    padding:130px 0 70px;
    position:relative;overflow:hidden;
}
.pf-hero::before {
    content:'';position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(191,247,71,.022) 1px,transparent 1px),
        linear-gradient(90deg,rgba(191,247,71,.022) 1px,transparent 1px);
    background-size:56px 56px;
    animation:grid-d 22s linear infinite;
}
.pf-hero::after {
    content:'';position:absolute;left:0;right:0;top:0;height:40px;
    background:linear-gradient(to bottom,transparent,rgba(191,247,71,.014),transparent);
    animation:scan 9s linear infinite;pointer-events:none;z-index:1;
}
.pf-hero-glow {
    position:absolute;top:-80px;left:50%;transform:translateX(-50%);
    width:720px;height:720px;
    background:radial-gradient(ellipse,rgba(191,247,71,.06) 0%,transparent 65%);
    animation:breathe 8s ease-in-out infinite;pointer-events:none;
}
.pf-hero-inner { position:relative;z-index:2; }
.pf-eyebrow {
    display:inline-flex;align-items:center;gap:10px;
    background:rgba(191,247,71,.06);border:1px solid rgba(191,247,71,.22);
    border-radius:8px;padding:9px 16px;margin-bottom:26px;
    font-family:'Bricolage Grotesque',sans-serif;font-size:12px;color:#BFF747;

}
.pf-eyebrow::before { content:'$ ';color:rgba(191,247,71,.4);font-family:monospace;font-size:14px; }
.pf-live { display:inline-block;width:7px;height:7px;border-radius:50%;background:#BFF747;animation:pulse 2s ease infinite; }
.pf-hero h1 {
    font-family:'Big Shoulders Display',sans-serif;
    font-size:clamp(46px,7vw,94px);font-weight:900;
    color:#fff;line-height:.95;margin:0 0 20px;

}
.pf-hero h1 em { font-style:normal;color:var(--accent); }
.pf-glitch { position:relative;display:inline-block; }
.pf-glitch::after {
    content:attr(data-t);position:absolute;left:3px;top:0;
    color:rgba(191,247,71,.28);
    clip-path:polygon(0 20%,100% 20%,100% 44%,0 44%);
    animation:glitch 10s 2s infinite;pointer-events:none;
}
.pf-hero-sub {
    font-size:15px;color:#888;line-height:1.85;max-width:520px;

    transition:opacity .4s,transform .4s var(--ease);
}
.pf-hero-sub strong { color:#ccc;font-weight:600; }
.pf-stats {
    display:flex;align-items:center;gap:1px;
    background:rgba(193,193,193,.08);border-radius:14px;overflow:hidden;

}
.pf-stat { flex:1;background:var(--bg2);padding:20px 16px;text-align:center;transition:background .3s; }
.pf-stat:hover { background:rgba(191,247,71,.05); }
.pf-stat-val {
    font-family:'Big Shoulders Display',sans-serif;font-size:30px;font-weight:800;
    color:#BFF747;display:block;line-height:1;margin-bottom:4px;
    transition:all .4s var(--ease);
}
.pf-stat-lbl {
    font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--text-dim);font-family:'Bricolage Grotesque',sans-serif;
    transition:all .3s;
}

/* ═══════════════════════════════════════════
   FILTER TOOLBAR
═══════════════════════════════════════════ */
.pf-toolbar {
    background:rgba(6,6,6,.95);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--bdr2);
    padding:14px 0;position:sticky;top:0;z-index:200;
}
.pf-toolbar-inner { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.pf-filters { display:flex;gap:6px;flex-wrap:wrap;flex:1; }
.pf-filter {
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(193,193,193,.05);border:1px solid rgba(193,193,193,.1);
    border-radius:8px;padding:9px 14px;cursor:pointer;
    font-family:'Bricolage Grotesque',sans-serif;font-size:11px;
    font-weight:700;letter-spacing:.7px;text-transform:uppercase;
    color:var(--text-dim);text-decoration:none;transition:all .3s;white-space:nowrap;
    user-select:none;
}
.pf-filter i { font-size:11px; }
.pf-filter-cnt {
    font-size:10px;background:rgba(255,255,255,.05);
    border-radius:100px;padding:1px 7px;min-width:20px;text-align:center;
}
.pf-filter:hover { border-color:var(--acc-bdr);color:#BFF747;background:var(--acc-dim); }
.pf-filter.active {
    color:#060606;background:#BFF747;
    border-color:#BFF747;box-shadow:0 4px 18px rgba(191,247,71,.28);
}
.pf-filter.active .pf-filter-cnt { background:rgba(0,0,0,.15);color:#060606; }
.pf-count { font-size:12px;color:var(--text-dim);font-family:'Bricolage Grotesque',sans-serif;white-space:nowrap; }
.pf-count span { color:#BFF747;font-weight:700; }

/* ═══════════════════════════════════════════
   PROJECTS SECTION
═══════════════════════════════════════════ */
.pf-section { background:var(--bg3);padding:50px 0 90px; }

/* ── category pill colours ── */
.pf-cat {
    font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
    border-radius:100px;padding:4px 12px;font-family:'Bricolage Grotesque',sans-serif;
    display:inline-flex;align-items:center;gap:5px;
}
.pf-cat.htb     { color:#BFF747;background:rgba(191,247,71,.1);border:1px solid rgba(191,247,71,.2); }
.pf-cat.ctf     { color:#ffb86c;background:rgba(255,184,108,.08);border:1px solid rgba(255,184,108,.2); }
.pf-cat.web     { color:#a8d8ff;background:rgba(100,180,255,.08);border:1px solid rgba(100,180,255,.2); }
.pf-cat.vapt    { color:#ff79c6;background:rgba(255,121,198,.08);border:1px solid rgba(255,121,198,.2); }
.pf-cat.network { color:#8be9fd;background:rgba(139,233,253,.08);border:1px solid rgba(139,233,253,.2); }
.pf-cat.osint   { color:#ffb86c;background:rgba(255,184,108,.08);border:1px solid rgba(255,184,108,.2); }
.pf-cat.python  { color:#ff79c6;background:rgba(255,121,198,.08);border:1px solid rgba(255,121,198,.2); }

/* ── difficulty badges ── */
.diff-easy   { background:rgba(63,185,80,.15);color:#3fb950;border:1px solid rgba(63,185,80,.3); }
.diff-medium { background:rgba(255,165,0,.15);color:#ffa500;border:1px solid rgba(255,165,0,.3); }
.diff-hard   { background:rgba(255,80,80,.15);color:#ff5050;border:1px solid rgba(255,80,80,.3); }
.diff-def    { background:rgba(191,247,71,.08);color:#BFF747;border:1px solid rgba(191,247,71,.2); }

.pf-year {
    font-size:11px;color:var(--text-dim);font-family:'Bricolage Grotesque',sans-serif;
    display:flex;align-items:center;gap:5px;
}
.pf-year i { font-size:10px;color:var(--text-dim); }

/* ═══════════════════════════════════════════
   UNIFIED CARD GRID — all cards same size
   741 × 448 px aspect ratio = 741/448 ≈ 1.655
═══════════════════════════════════════════ */
.pf-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

/* Every card is the same — no "featured" exception in layout */
.pf-card {
    background:rgba(193,193,193,.03);
    border:1px solid rgba(193,193,193,.09);
    border-radius:18px;overflow:hidden;
    display:flex;flex-direction:column;
    text-decoration:none;
    transition:border-color .4s,background .4s,transform .5s var(--ease),box-shadow .4s;
    /* JS filter: hidden state */
    animation:none;
}
.pf-card.card-visible {
    animation:cardIn .45s var(--ease) both;
}
.pf-card.card-hidden {
    display:none !important;
}
/* prevent flash before JS runs — hide non-matching cards instantly */
.pf-card { opacity:0; }
.pf-card.card-visible { opacity:1; }
.pf-card:hover {
    border-color:rgba(191,247,71,.25);background:rgba(191,247,71,.02);
    transform:translateY(-6px);box-shadow:0 18px 44px rgba(0,0,0,.45);
}

/* ── THUMBNAIL — rock-solid fixed size, nothing can change it ── */
.pf-card-thumb {
    position:relative;
    /* padding-top trick: 240/741 * 100 ≈ 32.4% keeps 741×240 ratio */
    /* But we want a flat fixed px height that matches across all screen sizes */
    height:0;
    padding-top:240px;     /* fixed pixel height via padding-top so flex never squashes it */
    overflow:hidden;
    background:#111;
    flex-shrink:0;
}
/* Every child inside thumb is absolutely positioned — nothing affects the height */
.pf-card-thumb img,
.pf-card-ph,
.pf-card-overlay,
.pf-card-number,
.pf-card-diff,
.pf-card-feat-badge {
    position:absolute;
}
.pf-card-thumb img {
    top:0;left:0;
    width:100%;height:100%;
    object-fit:cover;object-position:center;
    transition:transform .7s var(--ease);
    filter:brightness(.72) saturate(.9);
}
.pf-card:hover .pf-card-thumb img { transform:scale(1.08); }
.pf-card-overlay {
    inset:0;
    background:linear-gradient(to top,rgba(6,6,6,.65) 0%,transparent 60%);
}
.pf-card-ph {
    top:0;left:0;
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,rgba(191,247,71,.06) 0%,rgba(6,6,6,0) 100%);
}
.pf-card-ph i {
    font-size:56px;color:rgba(191,247,71,.14);
    transition:transform .5s var(--ease),color .4s;
}
.pf-card:hover .pf-card-ph i { transform:scale(1.1);color:rgba(191,247,71,.22); }
.pf-card-number {
    top:14px;right:14px;
    font-family:'Big Shoulders Display',sans-serif;font-size:11px;font-weight:800;
    color:rgba(191,247,71,.5);letter-spacing:1px;
    z-index:2;
}
.pf-card-diff {
    top:14px;left:14px;
    font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
    border-radius:100px;padding:3px 10px;backdrop-filter:blur(4px);
    z-index:2;
}
/* Featured badge on first visible card */
.pf-card-feat-badge {
    bottom:14px;left:14px;
    background:#BFF747;color:#060606;font-size:9px;font-weight:700;
    letter-spacing:2px;text-transform:uppercase;font-family:'Bricolage Grotesque',sans-serif;
    border-radius:100px;padding:4px 12px;
    z-index:2;
}

.pf-card-content { padding:20px 22px 22px;display:flex;flex-direction:column;flex:1; }
.pf-card-meta { display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap; }
.pf-card-title {
    font-family:'Big Shoulders Display',sans-serif;font-size:19px;font-weight:800;
    color:#fff;line-height:1.2;margin-bottom:8px;transition:color .3s;
}
.pf-card:hover .pf-card-title { color:#BFF747; }
.pf-card-desc { font-size:13px;color:var(--text-dim);line-height:1.65;margin-bottom:14px;flex:1; }
.pf-card-tech { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px; }
.pf-card-tag {
    background:rgba(193,193,193,.06);border:1px solid rgba(193,193,193,.1);
    border-radius:5px;padding:3px 8px;
    font-family:'Bricolage Grotesque',sans-serif;font-size:9.5px;font-weight:700;
    letter-spacing:.5px;text-transform:uppercase;color:var(--text-dim);transition:all .3s;
}
.pf-card:hover .pf-card-tag { color:#BFF747;border-color:var(--acc-bdr);background:var(--acc-dim); }
.pf-card-footer {
    display:flex;align-items:center;justify-content:space-between;
    padding-top:14px;border-top:1px solid rgba(193,193,193,.07);margin-top:auto;
}
.pf-card-stat-val {
    font-family:'Big Shoulders Display',sans-serif;font-size:18px;font-weight:800;
    color:#BFF747;line-height:1;
}
.pf-card-stat-lbl {
    font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
    color:var(--text-dim);font-family:'Bricolage Grotesque',sans-serif;
}
.pf-card-arrow {
    display:flex;align-items:center;gap:5px;
    font-family:'Bricolage Grotesque',sans-serif;font-size:10px;font-weight:700;
    letter-spacing:.4px;text-transform:uppercase;color:rgba(193,193,193,.25);
    transition:color .3s,gap .3s var(--ease);
}
.pf-card-arrow i { font-size:9px;transition:transform .3s var(--ease); }
.pf-card:hover .pf-card-arrow { color:#BFF747;gap:8px; }
.pf-card:hover .pf-card-arrow i { transform:translateX(3px); }

/* ── EMPTY STATE ── */
.pf-empty {
    display:none;
    grid-column:1/-1;
    text-align:center;padding:80px 20px;
}
.pf-empty.show { display:block; }
.pf-empty i { font-size:44px;color:rgba(191,247,71,.16);display:block;margin-bottom:16px; }
.pf-empty h4 { font-family:'Big Shoulders Display',sans-serif;font-size:26px;font-weight:800;color:var(--text-dim);margin-bottom:8px; }
.pf-empty p  { font-size:13px;color:#333;font-family:'Bricolage Grotesque',sans-serif; }

/* ── CTA BANNER ── */
.pf-cta {
    margin-top:50px;
    background:rgba(191,247,71,.025);border:1.5px solid rgba(191,247,71,.16);
    border-radius:22px;padding:44px 44px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    flex-wrap:wrap;position:relative;overflow:hidden;
    transition:border-color .5s,box-shadow .5s;
}
.pf-cta::before {
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,#BFF747,transparent);
}
.pf-cta:hover { border-color:rgba(191,247,71,.3);box-shadow:0 0 80px rgba(191,247,71,.05); }
.pf-cta-label {
    font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
    color:#BFF747;font-family:'Bricolage Grotesque',sans-serif;margin-bottom:8px;display:block;
}
.pf-cta h3 {
    font-family:'Big Shoulders Display',sans-serif;font-size:clamp(26px,4vw,44px);
    font-weight:900;color:#fff;line-height:1.0;margin-bottom:10px;
}
.pf-cta h3 span { color:#BFF747; }
.pf-cta p { font-size:14px;color:var(--text-dim);line-height:1.75;max-width:480px; }
.pf-cta-btns { display:flex;gap:12px;flex-wrap:wrap;align-items:center; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width:991px) {
    .pf-grid { grid-template-columns:repeat(2,1fr); }
    .pf-cta { padding:32px 28px; }
}
@media (max-width:767px) {
    .pf-hero { padding:110px 0 50px; }
    .pf-hero h1 { font-size:clamp(38px,11vw,56px); }
    .pf-hero-sub { font-size:14px;line-height:1.75; }
    .pf-eyebrow { font-size:10.5px;padding:7px 12px;margin-bottom:20px; }
    .pf-stats { margin-top:30px; }
    .pf-stat-val { font-size:24px; }
    .pf-toolbar { padding:12px 0; }
    .pf-toolbar-inner { gap:8px; }
    .pf-filters { display:grid;grid-template-columns:repeat(4,1fr);gap:5px; }
    .pf-filter { justify-content:center;padding:8px 6px;font-size:10px;letter-spacing:.4px; }
    .pf-filter-cnt { display:none; }
    .pf-count { width:100%;text-align:center; }
    .pf-grid { grid-template-columns:1fr;gap:12px; }
    .pf-card-thumb { padding-top:200px; }
    .pf-card-content { padding:16px 16px 18px; }
    .pf-card-title { font-size:17px; }
    .pf-cta { padding:26px 20px;flex-direction:column;align-items:flex-start;gap:20px; }
    .pf-cta h3 { font-size:clamp(22px,8vw,32px); }
    .pf-cta-btns { width:100%;flex-direction:column;gap:10px; }
    .pf-cta-btns .theme-btn { width:100%;display:flex;justify-content:center;padding:18px 30px;font-size:14px; }
}
@media (max-width:575px) {
    .pf-hero { padding:96px 0 40px; }
    .pf-hero h1 { font-size:clamp(34px,11vw,48px); }
    .pf-filters { grid-template-columns:repeat(2,1fr); }
    .pf-filters .pf-filter:first-child { grid-column:1/-1; }
    .pf-stats { display:grid;grid-template-columns:1fr 1fr;gap:1px; }
    .pf-stat-val { font-size:22px; }
    .pf-stat { padding:16px 10px; }
    .pf-card-thumb { padding-top:180px; }
    .pf-card-title { font-size:16px; }
}
@media (hover:none) {
    .pf-card:hover { transform:none;box-shadow:none; }
}
@media (max-width:1024px) {
    .mouse-cursor,.cursor-inner,.cursor-outer { display:none !important; }
    *,*::before,*::after { cursor:auto !important; }
    a,button,label,[role="button"] { cursor:pointer !important; }
}