/* work.html — page-specific styles (extracted from inline) */

.page-hero { padding:10rem 0 5rem; position:relative; overflow:hidden; background:var(--bg); }
    .page-hero .blob--1{width:500px;height:500px;top:-120px;right:-80px;}
    .page-hero .blob--2{width:350px;height:350px;bottom:-50px;left:-60px;animation-delay:-6s;}

    /* FILTER BAR */
    .filter-bar { padding:2.5rem 0; background:var(--bg-alt); border-bottom:1px solid var(--border); }
    .filter-bar__inner { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
    .filter-btn {
      font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em;
      padding:.45rem 1.1rem; border-radius:var(--radius-pill);
      background:var(--surface); border:1px solid var(--border);
      color:var(--text-muted); cursor:pointer; transition:all .25s;
    }
    .filter-btn:hover { border-color:var(--border-strong); color:var(--text); }
    .filter-btn.active {
      background:linear-gradient(135deg,var(--orange),#e06c00);
      border-color:transparent; color:#fff;
      box-shadow:0 0 18px rgba(249,130,25,.3);
    }
    .filter-count {
      margin-left:auto; font-family:var(--font-mono); font-size:.68rem;
      color:var(--text-muted); letter-spacing:.05em;
    }

    /* WORK GRID */
    .work-section { padding:5rem 0 7rem; background:var(--bg); }
    .portfolio-grid {
      display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
    }

    .pcard {
      border-radius:var(--radius-lg); overflow:hidden;
      background:var(--surface); border:1px solid var(--border);
      transition:all .35s cubic-bezier(.22,1,.36,1);
      cursor:pointer; position:relative;
    }
    .pcard:hover { transform:translateY(-6px); border-color:rgba(108,78,243,.3); box-shadow:0 28px 56px rgba(0,0,0,.35); }
    .pcard--featured { grid-column:span 2; }
    .pcard[data-hidden] { display:none; }

    .pcard__thumb {
      position:relative; overflow:hidden;
      height:220px;
    }
    .pcard--featured .pcard__thumb { height:300px; }
    .pcard__bg { position:absolute;inset:0; transition:transform .5s cubic-bezier(.22,1,.36,1); }
    .pcard:hover .pcard__bg { transform:scale(1.05); }

    .pb-1 { background:linear-gradient(135deg,#0a0a1a,#1a0a2e 40%,#0d1a2e); }
    .pb-2 { background:linear-gradient(135deg,#0a1a0a,#1a2e0d 60%,#0a1a1a); }
    .pb-3 { background:linear-gradient(135deg,#1a0a0a,#2e1a0d 50%,#1a0a1a); }
    .pb-4 { background:linear-gradient(135deg,#0d0d20,#200d30 50%,#0d1520); }
    .pb-5 { background:linear-gradient(135deg,#1a1a0a,#2e280d 50%,#1a200a); }
    .pb-6 { background:linear-gradient(135deg,#0a1a1a,#0d2030 50%,#0a0a1a); }
    .pb-7 { background:linear-gradient(135deg,#1e0a0a,#300d1a 50%,#0a0a1e); }
    .pb-8 { background:linear-gradient(135deg,#0a1e1a,#0d301e 50%,#1a1e0a); }
    [data-theme="light"] .pb-1 { background:linear-gradient(135deg,#d0d0f0,#c0b0e8 40%,#b8c8e8); }
    [data-theme="light"] .pb-2 { background:linear-gradient(135deg,#c0e0c0,#d0e0a8 60%,#b8e0d8); }
    [data-theme="light"] .pb-3 { background:linear-gradient(135deg,#e8c0c0,#e8d0a8 50%,#e0b8d8); }
    [data-theme="light"] .pb-4 { background:linear-gradient(135deg,#d0c0f0,#e0c0f0 50%,#c0d8f0); }
    [data-theme="light"] .pb-5 { background:linear-gradient(135deg,#f0e8c0,#e8d890 50%,#e0f0c0); }
    [data-theme="light"] .pb-6 { background:linear-gradient(135deg,#c0e0e8,#a8d0e8 50%,#c0c8e8); }
    [data-theme="light"] .pb-7 { background:linear-gradient(135deg,#f0c0c8,#e8b0c8 50%,#c0b8f0); }
    [data-theme="light"] .pb-8 { background:linear-gradient(135deg,#b8f0e8,#c8f0c0 50%,#e8f0b8); }

    .pcard__deco {
      position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    }
    .dg { display:grid;gap:10px;opacity:.65;transition:opacity .3s; }
    .dg-3x2 { grid-template-columns:repeat(3,70px); grid-template-rows:repeat(2,52px); }
    .dg-4x1 { grid-template-columns:repeat(4,70px); grid-template-rows:64px; }
    .dg-2x2 { grid-template-columns:repeat(2,80px); grid-template-rows:repeat(2,60px); }
    .pcard:hover .dg { opacity:.9; }
    .db { border-radius:9px; transition:transform .4s cubic-bezier(.22,1,.36,1); }
    .pcard:hover .db:nth-child(1) { transform:translateY(-6px); }
    .pcard:hover .db:nth-child(3) { transform:translateY(6px); }
    .db-a { background:linear-gradient(135deg,var(--purple),rgba(108,78,243,.3)); }
    .db-b { background:linear-gradient(135deg,var(--orange),rgba(249,130,25,.3)); }
    .db-c { background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09); }
    .db-d { background:linear-gradient(135deg,#a78bfa,rgba(167,139,250,.25)); }
    .db-e { background:linear-gradient(135deg,#7dd3a8,rgba(125,211,168,.25)); }
    .db-f { background:linear-gradient(135deg,#60a5fa,rgba(96,165,250,.25)); }
    [data-theme="light"] .db-c { background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.1); }

    .pcard__info {
      padding:1.4rem 1.6rem;
      display:flex; justify-content:space-between; align-items:center;
    }
    .pcard__meta { display:flex;flex-direction:column;gap:.25rem; }
    .pcard__cat {
      font-family:var(--font-mono);font-size:.6rem;
      letter-spacing:.12em;text-transform:uppercase;color:var(--orange);
    }
    .pcard__name { font-family:var(--font-display);font-size:1.4rem;letter-spacing:.04em;color:var(--text); }
    .pcard__year { font-family:var(--font-mono);font-size:.6rem;color:var(--text-muted);letter-spacing:.06em; }
    .pcard__arrow {
      width:38px;height:38px;border-radius:50%;
      background:var(--surface);border:1px solid var(--border);
      display:flex;align-items:center;justify-content:center;font-size:.9rem;
      transition:all .3s;
    }
    .pcard:hover .pcard__arrow { background:linear-gradient(135deg,var(--orange),#e06c00);border-color:transparent;transform:rotate(-45deg); }

    /* NO RESULTS */
    .no-results {
      grid-column:1/-1; text-align:center; padding:5rem 0;
      font-family:var(--font-mono);color:var(--text-muted);font-size:.9rem;
      display:none;
    }
    .no-results.visible { display:block; }

    /* STATS BAR */
    .stats-bar { padding:5rem 0; background:var(--bg-alt); border-top:1px solid var(--border); }
    .stats-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:2rem; }
    .stat-item { text-align:center; }
    .stat-item__num {
      font-family:var(--font-display);font-size:3.5rem;line-height:1;
      background:linear-gradient(110deg,var(--orange),var(--purple));
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
      margin-bottom:.5rem;
    }
    .stat-item__label { font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted); }

    @media(max-width:1024px) { .portfolio-grid { grid-template-columns:1fr 1fr; } .pcard--featured { grid-column:span 1; } .stats-grid { grid-template-columns:repeat(3,1fr); gap:2rem; } }
    @media(max-width:640px) { .portfolio-grid { grid-template-columns:1fr; } .stats-grid { grid-template-columns:1fr; } .pcard__thumb { height:180px; } .page-hero { padding:8rem 0 4rem; } }
  
    /* Force nav links visible on desktop */
    @media(min-width:901px) {
      .nav__links { display:flex !important; }
      .nav__hamburger { display:none !important; }
    }

    /* ── Browser mockup screenshots ── */
    .browser-mock { width:100%; height:100%; display:flex; flex-direction:column; background:#0d0d1a; }
    [data-theme="light"] .browser-mock { background:#e8e8f0; }
    .browser-mock__bar {
      flex-shrink:0; height:28px; display:flex; align-items:center; gap:8px;
      padding:0 10px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.07);
    }
    [data-theme="light"] .browser-mock__bar { background:rgba(0,0,0,.05); border-bottom-color:rgba(0,0,0,.08); }
    .browser-mock__dots { display:flex; gap:5px; flex-shrink:0; }
    .browser-mock__dots span { width:8px; height:8px; border-radius:50%; display:block; }
    .browser-mock__dots span:nth-child(1) { background:#ff5f57; }
    .browser-mock__dots span:nth-child(2) { background:#febc2e; }
    .browser-mock__dots span:nth-child(3) { background:#28c840; }
    .browser-mock__urlbar {
      flex:1; height:16px; border-radius:3px; font-family:var(--font-mono); font-size:9px;
      color:var(--text-muted); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
      display:flex; align-items:center; padding:0 6px; overflow:hidden; white-space:nowrap;
      text-overflow:ellipsis; max-width:240px;
    }
    [data-theme="light"] .browser-mock__urlbar { background:rgba(255,255,255,.7); border-color:rgba(0,0,0,.12); }
    .browser-mock__screen {
      flex:1; background-size:cover; background-position:top center; background-repeat:no-repeat;
      transition:transform .5s cubic-bezier(.22,1,.36,1); background-color:var(--surface);
    }
    .pcard:hover .browser-mock__screen { transform:scale(1.04); }
    .pcard--featured:hover .browser-mock__screen { transform:scale(1.02); }
    .browser-mock__screen.loading { background-image:none !important; }
    .browser-mock__screen.loading::after {
      content:''; display:block; width:32px; height:32px; margin:40% auto;
      border:2px solid var(--border); border-top-color:var(--orange);
      border-radius:50%; animation:spin .8s linear infinite;
    }
    @keyframes spin { to { transform:rotate(360deg); } }

/* ============================
   LOADING CARD
============================ */
.pcard--loading {
  pointer-events:none;
  opacity:.6;
}
.pcard--loading .browser-mock__screen {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:180px;
}
.loading-spinner svg {
  animation:lc-spin 1s linear infinite;
  stroke:var(--orange);
  opacity:.7;
}
@keyframes lc-spin { to { transform:rotate(360deg); } }

.urlbar-shimmer,
.text-shimmer {
  display:inline-block;
  height:.65em;
  width:100px;
  border-radius:4px;
  background:linear-gradient(90deg, var(--border) 25%, rgba(249,130,25,.12) 50%, var(--border) 75%);
  background-size:200% 100%;
  animation:shimmer 1.8s ease-in-out infinite;
}
.text-shimmer--wide { width:140px; }

@keyframes shimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}