:root{
  --bg: #0a0a0a;
  --bg-2: #0f0f10;
  --text: #f5f5f5;
  --muted: #bdbdbd;
  --card: #0d0d0dcc;
  --border: #1a1a1a;
  --shadow: rgba(0,0,0,0.5);
  --radius: 14px;
  --accent: #ffffff;
}
*{box-sizing:border-box}
html, body {margin:0; padding:0; height:100%}
html {scroll-behavior:smooth}
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100%;
  overflow-x: hidden;
}

/* ambient starfield canvas sits behind content */
#starfield{
  position:fixed; inset:0; z-index:-2;
  background:linear-gradient(#070708, #0b0b0c);
  pointer-events:none;      /* don't trap mouse */
  contain:strict;           /* paint isolate hint */
}

/* Scroll progress bar */
#scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background: linear-gradient(90deg, #fff, #ddd);
  z-index:9999; transition: width .1s linear;
}

.container{max-width:1100px; margin:0 auto; padding: 0 20px}
.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,10,10,.8), rgba(10,10,10,.5));
  border-bottom:1px solid var(--border);
}
.nav {
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.logo{display:flex; align-items:center; gap:.6rem; color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.2px}
.logo-mark{
  font-family: "JetBrains Mono", monospace; font-weight:700;
  padding:.2rem .45rem; border:1px solid var(--border); border-radius:10px;
}

.nav-links{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.nav-links a{
  color:var(--muted); text-decoration:none; padding:.4rem .6rem; border-radius:8px; position:relative
}
.nav-links a::after{
  content:""; position:absolute; left:.6rem; right:.6rem; bottom:3px; height:1px; background:#fff;
  transform:scaleX(0); transform-origin:right; transition:transform .25s ease;
}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{transform:scaleX(1); transform-origin:left}

.hero{
  display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; padding: 6rem 0 3rem;
  align-items:center;
}
.hero .headshot{
  width: 220px; height:220px; border-radius:50%; object-fit:cover;
  border:1px solid var(--border); box-shadow: 0 20px 50px var(--shadow);
}
.hero-text h1{font-size: clamp(2.2rem, 2.5vw + 1.5rem, 3.4rem); margin:0; letter-spacing:.3px}
.accent{border-bottom:2px solid #861919}
.tagline{color:var(--muted); font-size:1.1rem; margin:.8rem 0 1.6rem}

.cta{display:flex; gap:.8rem; flex-wrap:wrap}
.btn{
  display:inline-block; padding:.6rem 1rem; border-radius:12px; text-decoration:none;
  border:1px solid var(--border); color:var(--text); background:transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn:hover{transform: translateY(-2px); box-shadow: 0 12px 30px var(--shadow)}
.btn.primary{background: #ffffff; color:#0a0a0a; border-color:#ffffff}

.section{padding: 3.5rem 0}
.section-title{font-size:1.8rem; margin:0 0 1.2rem; letter-spacing:.2px}

.chip-list{display:flex; flex-wrap:wrap; gap:.6rem; padding:0; list-style:none}
.chip{padding:.45rem .7rem; border-radius:999px; border:1px solid var(--border); background: #101010}

.projects-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.2rem}
.card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; box-shadow: 0 20px 50px var(--shadow);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .3s;
  will-change: transform;
  animation: float 4s ease-in-out infinite;
}
.card:hover{transform: translateY(-6px); box-shadow: 0 30px 70px var(--shadow); border-color:#2a2a2a}
.card .media{aspect-ratio: 16 / 9; background:#000; overflow:hidden}
.card video{width:100%; height:100%; object-fit:cover; display:block; filter: grayscale(100%) contrast(1.05) brightness(.95)}
.card .content{padding:1rem}
.card .content h3{margin:.3rem 0 .6rem}
.card .content p{color:var(--muted)}
.tags{display:flex; gap:.4rem; flex-wrap:wrap; margin:.6rem 0}
.tags span{font-size:.8rem; padding:.25rem .5rem; border:1px solid var(--border); border-radius:999px}
.links{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem}
.btn.small{padding:.4rem .6rem; border-radius:10px; font-size:.9rem}

.timeline{display:grid; gap:1rem; border-left:1px dashed var(--border); padding-left:1rem}
.timeline-item{position:relative}
.timeline-item::before{
  content:""; position:absolute; left:-1.43rem; top:.35rem; width:9px; height:9px; border-radius:50%;
  border:1px solid #fff;
}

.list{list-style: none; padding:0; margin:0}
.list li{margin:.5rem 0}
.list strong{color:#fff}

.socials{display:flex; gap:1rem; list-style:none; padding:0; margin:.6rem 0 0}
.socials a{color:#fff; text-decoration:none; border-bottom:1px solid transparent}
.socials a:hover{border-bottom-color:#fff}

.site-footer{
  border-top:1px solid var(--border); padding: 1rem 0; color: var(--muted);
  background: linear-gradient(0deg, rgba(0,0,0,.15), transparent);
}
.site-footer .container{display:flex; justify-content:space-between; align-items:center}
.back-to-top{
  border:1px solid var(--border); border-radius:10px; padding:.2rem .5rem; color:#ddd; text-decoration:none;
}

.reveal{opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

@media (max-width:900px){
  .hero{grid-template-columns:1fr; text-align:center}
  .hero-media{display:flex; justify-content:center; position:relative}
  .nav-links{display:none}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

@keyframes fadeSlideUp {
  0% { opacity: 0; transform: translateY(20px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.reveal.in {
  animation: fadeSlideUp 0.8s ease-out forwards;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.btn:hover {
  background-image: linear-gradient(90deg, #fff 0%, #ddd 50%, #fff 100%);
  background-size: 200% auto;
  animation: shimmer 1.2s linear infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}