/*
 * shared.css — design tokens and reusable component styles
 * imported by portfolio.html, about.html, contact.html
 * All component-level rules from index.html that repeat across pages live here.
 */

:root {
  --bg:          #f8f9fa;
  --surface:     #ffffff;
  --border:      #e5e7eb;
  --text-primary:#111827;
  --text-muted:  #6b7280;
  --text-subtle: #9ca3af;
  --accent-left: #7c3aed;
  --accent-right:#0ea5e9;
  --accent-left-soft:  rgba(124,58,237,0.10);
  --accent-right-soft: rgba(14,165,233,0.10);
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:   0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:   0 10px 40px rgba(0,0,0,.12);
  --radius:      12px;
  --nav-h:       72px;
  --font-body:   'Inter', system-ui, sans-serif;
  --font-code:   'Fira Code', 'Courier New', monospace;
  --transition:  0.35s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* NAV */
.nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  height: var(--nav-h);
  background: rgba(248,249,250,0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition);
}
.nav.scrolled { box-shadow: var(--shadow-md); }
.nav__inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav__logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1rem; letter-spacing:-0.02em; color:var(--text-primary); flex-shrink:0; }
.nav__logo-mark { width:40px; height:40px; border-radius:50%; background:var(--text-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.875rem; font-weight:800; letter-spacing:-0.03em; }
.nav__logo span { display:none; }
@media(min-width:480px){ .nav__logo span { display:inline; } }
.nav__links { display:flex; align-items:center; gap:4px; list-style:none; }
.nav__links a { padding:6px 14px; border-radius:6px; font-size:0.9rem; font-weight:500; color:var(--text-muted); transition:color var(--transition), background var(--transition); }
.nav__links a:hover, .nav__links a.active { color:var(--text-primary); background:rgba(0,0,0,0.05); }
.nav__socials { display:flex; align-items:center; gap:2px; }
.nav__socials a { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; color:var(--text-muted); transition:color var(--transition), background var(--transition); }
.nav__socials a:hover { color:var(--text-primary); background:rgba(0,0,0,0.06); }
.nav__socials svg { width:18px; height:18px; fill:currentColor; }
.nav__burger { display:none; flex-direction:column; gap:5px; padding:8px; border-radius:8px; transition:background var(--transition); }
.nav__burger:hover { background:rgba(0,0,0,0.06); }
.nav__burger span { display:block; width:22px; height:2px; background:var(--text-primary); border-radius:2px; transition:transform var(--transition), opacity var(--transition); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav__mobile { position:fixed; top:var(--nav-h); left:0; right:0; background:var(--surface); border-bottom:1px solid var(--border); padding:16px 24px 24px; transform:translateY(-110%); opacity:0; transition:transform var(--transition), opacity var(--transition); z-index:99; box-shadow:var(--shadow-lg); }
.nav__mobile.open { transform:translateY(0); opacity:1; }
.nav__mobile ul { list-style:none; display:flex; flex-direction:column; gap:2px; }
.nav__mobile ul a { display:block; padding:12px 16px; border-radius:8px; font-size:1rem; font-weight:500; color:var(--text-muted); transition:color var(--transition), background var(--transition); }
.nav__mobile ul a:hover { color:var(--text-primary); background:rgba(0,0,0,0.04); }
@media(max-width:768px){ .nav__links,.nav__socials { display:none; } .nav__burger { display:flex; } }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:10px; font-size:0.9rem; font-weight:600; transition:transform var(--transition), box-shadow var(--transition), background var(--transition); letter-spacing:-0.01em; }
.btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--outline { border:1.5px solid var(--text-primary); color:var(--text-primary); background:transparent; }
.btn--outline:hover { background:var(--text-primary); color:var(--surface); }
.btn--primary { background:var(--text-primary); color:var(--surface); border:1.5px solid transparent; }
.btn--primary:hover { background:#1f2937; }
.btn svg { width:16px; height:16px; }

/* PROJECT CARDS */
.project-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition); display:flex; flex-direction:column; }
.project-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; }
.project-card__thumb { position:relative; aspect-ratio:16/10; overflow:hidden; background:#f0f2f5; }
.project-card__window-chrome { position:absolute; top:10px; left:12px; display:flex; gap:5px; z-index:2; }
.project-card__window-chrome span { width:8px; height:8px; border-radius:50%; }
.project-card__window-chrome span:nth-child(1) { background:#ff5f57; }
.project-card__window-chrome span:nth-child(2) { background:#ffbd2e; }
.project-card__window-chrome span:nth-child(3) { background:#28ca41; }
.project-card__thumb-inner { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.project-card__img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition); }
.project-card:hover .project-card__img { transform:scale(1.04); }
.thumb-gradient-1 { background:linear-gradient(135deg,#ede9fe 0%,#ddd6fe 100%); }
.thumb-gradient-2 { background:linear-gradient(135deg,#e0f2fe 0%,#bae6fd 100%); }
.thumb-gradient-3 { background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 100%); }
.project-card__thumb-icon { font-size:3rem; line-height:1; }
.project-card__body { padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.project-card__tag { display:inline-block; font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:3px 9px; border-radius:100px; background:var(--surface); border:1px solid var(--border); color:var(--text-subtle); width:fit-content; }
.project-card__title { font-size:1.05rem; font-weight:700; letter-spacing:-0.02em; color:var(--text-primary); line-height:1.3; }
.project-card__desc { font-size:0.88rem; color:var(--text-muted); line-height:1.6; flex:1; }
.project-card__footer { display:flex; align-items:center; justify-content:space-between; padding-top:14px; margin-top:4px; border-top:1px solid var(--border); }
.project-card__link { font-size:0.82rem; font-weight:600; color:var(--accent-left); display:flex; align-items:center; gap:4px; transition:gap var(--transition); }
.project-card__link:hover { gap:8px; }
.project-card__link svg { width:14px; height:14px; }
.project-card__stack { display:flex; gap:4px; flex-wrap:wrap; }
.project-card__pill { font-size:0.65rem; font-weight:500; padding:2px 7px; border-radius:4px; background:rgba(0,0,0,0.05); color:var(--text-muted); font-family:var(--font-code); }

/* FOOTER */
.footer { padding:40px 0; border-top:1px solid var(--border); background:var(--surface); }
.footer__inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer__copy { font-size:0.82rem; color:var(--text-subtle); }
.footer__copy a { color:var(--text-muted); transition:color var(--transition); }
.footer__copy a:hover { color:var(--text-primary); }
.footer__links { display:flex; gap:20px; list-style:none; }
.footer__links a { font-size:0.82rem; color:var(--text-subtle); transition:color var(--transition); }
.footer__links a:hover { color:var(--text-primary); }

/* SCROLL REVEAL */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:0.05s; }
.reveal-d2 { transition-delay:0.15s; }
.reveal-d3 { transition-delay:0.25s; }