:root {
  --gold: #d5b35b;
  --text: #e9eef6;
  --muted: #9da7b8;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  background: #02040c;
  min-height: 100vh;
  overflow-x: hidden;
}
.bg-gradient,.bg-noise,.bg-vignette,.bg-spotlight { position: fixed; inset: 0; pointer-events: none; }
.bg-gradient { background: radial-gradient(circle at 20% 30%, #0f2a52 0%, #050812 45%, #02040c 100%); animation: drift 32s ease-in-out infinite alternate; }
.bg-noise { opacity: .04; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 3px 3px; }
.bg-vignette { box-shadow: inset 0 0 180px rgba(0,0,0,.72); }
.bg-spotlight { background: radial-gradient(circle at var(--x, 50%) var(--y, 40%), rgba(213,179,91,.11), transparent 35%); opacity: 0; transition: opacity 260ms var(--ease); }
body.focus-mode .bg-spotlight { opacity: 1; }
.top-nav { position: sticky; top: 0; z-index: 9; display:flex; justify-content:space-between; align-items:center; padding: 16px 28px; background: rgba(3,6,16,.72); backdrop-filter: blur(10px); }
.category-tabs { display:flex; gap:10px; }
.tab { border:1px solid rgba(213,179,91,.25); padding:10px 14px; border-radius:999px; color:var(--muted); transition: all 240ms var(--ease); }
.tab.active,.tab:hover { color:var(--text); border-color:var(--gold); box-shadow: 0 0 24px rgba(213,179,91,.18); transform: scale(1.05); }
main { padding: 24px 28px 80px; }
.featured { min-height: 220px; border:1px solid rgba(213,179,91,.28); border-radius:18px; padding:26px; background: linear-gradient(135deg, rgba(20,32,58,.75), rgba(6,8,14,.4)); margin-bottom: 28px; transition: all 320ms var(--ease); }
.project-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:18px; }
.project-card { opacity: 1; transition: opacity 280ms var(--ease), transform 280ms var(--ease), filter 280ms var(--ease); transform-style: preserve-3d; }
.card-media { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.poster,.preview { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display:block; }
.preview { position:absolute; inset:0; opacity:0; transform: scale(1.02); transition: opacity 400ms ease-out; }
.overlay { position:absolute; inset:0; background: linear-gradient(to top, rgba(1,4,10,.85), rgba(1,4,10,.1) 50%, transparent), radial-gradient(circle at 70% 25%, rgba(213,179,91,.12), transparent 40%); box-shadow: inset 0 0 40px rgba(255,255,255,.06); }
.card-meta h3 { margin:10px 0 4px; }
.card-meta p { margin:0; color:var(--muted); }
.project-card.active { transform: perspective(900px) scale(1.06) rotateY(4deg); z-index: 5; }
.project-card.active .card-media { box-shadow: 0 26px 60px rgba(0,0,0,.58), 0 0 28px rgba(213,179,91,.28); outline: 1px solid rgba(213,179,91,.8); }
.focus-mode .project-card:not(.active) { opacity: .72; }
.btn { border-radius: 10px; border:1px solid rgba(213,179,91,.45); background: rgba(213,179,91,.12); color: var(--text); padding: 10px 16px; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.btn:hover { transform: scale(1.02); box-shadow: 0 0 16px rgba(213,179,91,.2); }
.btn:active { transform: scale(.99) translateY(1px); }
.hidden { display:none; }
.detail-hero { min-height: 260px; border-radius: 16px; border:1px solid rgba(213,179,91,.25); background-size: cover; background-position:center; margin:16px 0; }
.detail-body { display:grid; grid-template-columns: 2fr 1fr; gap:18px; }
.up-next .mini { border:1px solid rgba(255,255,255,.08); padding:10px; margin-bottom:8px; border-radius:10px; transition: all 220ms var(--ease); }
.up-next .mini:hover { border-color: rgba(213,179,91,.5); transform: scale(1.02); background: rgba(213,179,91,.08); }
.reveal { opacity:0; transform: translateY(14px); animation: reveal 600ms var(--ease) forwards; }
@keyframes drift { from { filter: hue-rotate(0deg); transform: scale(1); } to { filter: hue-rotate(12deg); transform: scale(1.02);} }
@keyframes reveal { to { opacity:1; transform: none; } }