/* ============================================================
   martinthexr.dev — Tran Nguyen Quang Lam
   Dark-tech portfolio. Pure CSS, self-hosted, 0 external requests.
   ============================================================ */

/* ---- Self-hosted fonts (same-origin; falls back to system stack
        if the woff2 files are not present yet — no external request) ---- */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 100 500;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
  font-weight: 600 900;
  font-display: swap;
}

:root {
  --bg:        #0B0D10;
  --bg-2:      #111418;
  --bg-3:      #161A1F;
  --fg:        #E6E8EB;
  --muted:     #8A9099;
  --muted-2:   #5B626B;
  --accent:    #3DD7C6;
  --accent-dim: rgba(61, 215, 198, 0.14);
  --border:    #232830;
  --border-2:  #2C333C;
  --radius:    14px;
  --maxw:      1140px;
  --nav-h:     64px;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a { color:var(--accent); text-decoration:none; }
img, video { max-width:100%; display:block; }

.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---- Skip link: invisible until keyboard focus ---- */
.skip-link {
  position:absolute; top:-48px; left:16px; z-index:200;
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.04em;
  background:var(--accent); color:#04211E; border-radius:0 0 8px 8px;
  padding:10px 16px; transition:top .15s ease;
}
.skip-link:focus { top:0; }

/* ---- Shared section scaffolding ---- */
section { padding:96px 0; position:relative; }
.eyebrow {
  font-family:var(--font-mono);
  color:var(--accent);
  font-weight:400;          /* some eyebrows are <h2> for heading structure — keep them visually identical */
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.section-title {
  font-size:clamp(1.5rem, 3.4vw, 2.15rem);
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:44px;
}

/* ---- Scroll fade-in (subtle) ---- */
.reveal {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(11,13,16,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.nav.scrolled { border-bottom-color:var(--border); }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; }
.nav-brand {
  font-weight:600; font-size:.98rem; color:var(--fg); letter-spacing:-.01em;
  white-space:nowrap;
}
.nav-links { display:flex; align-items:center; gap:30px; }
.nav-links a {
  color:var(--muted); font-size:.92rem; font-weight:500;
  transition:color .2s ease;
}
.nav-links a:hover { color:var(--fg); }
.nav-cta {
  font-family:var(--font-mono); font-size:.82rem;
  color:var(--accent) !important;
  border:1px solid var(--border-2);
  border-radius:999px; padding:8px 16px;
  transition:border-color .2s ease, background .2s ease;
}
.nav-cta:hover { border-color:var(--accent); background:var(--accent-dim); }

.nav-toggle {
  display:none; background:none; border:0; cursor:pointer; padding:6px;
  width:40px; height:40px; align-items:center; justify-content:center;
}
.nav-toggle span {
  display:block; width:22px; height:2px; background:var(--fg); position:relative;
  transition:background .2s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content:""; position:absolute; left:0; width:22px; height:2px; background:var(--fg);
  transition:transform .25s ease;
}
.nav-toggle span::before { top:-7px; }
.nav-toggle span::after { top:7px; }
.nav.open .nav-toggle span { background:transparent; }
.nav.open .nav-toggle span::before { transform:translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span::after  { transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height:100vh; display:flex; align-items:center;
  padding-top:var(--nav-h); padding-bottom:80px;
  position:relative; overflow:hidden;
}
/* hero-bg also carries .media (for placeholder/lazy plumbing); the later
   .media rule would otherwise override position:absolute and pop the video
   into flow. Higher-specificity override keeps it a true full-bleed background. */
.hero .hero-bg {
  position:absolute; inset:0; z-index:0;
  border-radius:0; aspect-ratio:auto;
}
.hero-bg video, .hero-bg .media-ph {
  width:100%; height:100%; object-fit:cover;
}
.hero-bg::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,13,16,.55) 0%, rgba(11,13,16,.82) 60%, var(--bg) 100%),
    radial-gradient(1200px 600px at 70% 15%, rgba(61,215,198,.06), transparent 70%);
}
.hero .wrap { position:relative; z-index:1; }
.hero-eyebrow {
  font-family:var(--font-mono); color:var(--accent);
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:22px;
}
.hero h1 {
  font-size:clamp(2.3rem, 6vw, 4rem);
  font-weight:800; line-height:1.05; letter-spacing:-.02em;
  margin-bottom:18px; max-width:15ch;
}
.hero .role {
  font-size:clamp(1.05rem, 2.4vw, 1.4rem);
  color:var(--fg); font-weight:500; margin-bottom:20px; max-width:30ch;
}
.hero .lead {
  color:var(--muted); font-size:clamp(1rem, 1.6vw, 1.12rem);
  max-width:56ch; margin-bottom:36px;
}
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }

.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:.95rem; font-weight:600;
  padding:13px 24px; border-radius:999px; cursor:pointer;
  border:1px solid transparent; transition:all .2s ease; white-space:nowrap;
}
.btn-primary { background:var(--accent); color:#04211E; }
.btn-primary:hover { filter:brightness(1.08); transform:translateY(-1px); }
.btn-ghost { border-color:var(--border-2); color:var(--fg); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:start; }
.about-text p { color:var(--muted); font-size:1.05rem; max-width:60ch; }
.about-text p + p { margin-top:18px; }
.about-text strong { color:var(--fg); font-weight:600; }

.stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.stat {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px 20px;
}
.stat .num {
  font-family:var(--font-mono); font-size:1.5rem; font-weight:600;
  color:var(--accent); letter-spacing:-.01em;
}
.stat .lbl { color:var(--muted); font-size:.86rem; margin-top:6px; line-height:1.4; }

/* ============================================================
   SKILLS
   ============================================================ */
.skill-group { margin-bottom:30px; }
.skill-group h3 {
  font-size:1rem; font-weight:600; color:var(--fg); margin-bottom:14px;
}
.chips { display:flex; flex-wrap:wrap; gap:9px; }
.chip {
  font-family:var(--font-mono); font-size:.8rem; color:var(--muted);
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:999px; padding:6px 13px; transition:border-color .2s, color .2s;
}
.chip:hover { border-color:var(--border-2); color:var(--fg); }

/* ============================================================
   FEATURED WORK
   ============================================================ */
.project {
  display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;
  margin-bottom:110px;
  /* deep links (#warehouse-tote-flow …) must clear the fixed nav */
  scroll-margin-top:calc(var(--nav-h) + 28px);
}
.project:last-child { margin-bottom:0; }
.project.reverse .project-media { order:2; }
.project.reverse .project-body  { order:1; }

.project-index {
  font-family:var(--font-mono); color:var(--accent); font-size:.82rem;
  letter-spacing:.1em; margin-bottom:12px;
}
.project-body h3 {
  font-size:clamp(1.35rem, 2.6vw, 1.7rem); font-weight:700;
  letter-spacing:-.01em; margin-bottom:12px; line-height:1.2;
}
.project-tagline {
  color:var(--accent); font-size:1.02rem; font-weight:500; margin-bottom:16px;
}
.project-desc { color:var(--muted); font-size:1rem; margin-bottom:20px; }
.project-tech { display:flex; flex-wrap:wrap; gap:8px; }
.project-tech .chip { font-size:.75rem; padding:5px 11px; }
.badge-interactive {
  display:inline-block; font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  border:1px solid var(--accent); border-radius:999px; padding:3px 10px;
  margin-bottom:14px;
}

/* ---- Media block + labeled placeholder (§D) ---- */
.media {
  position:relative; width:100%; border-radius:var(--radius); overflow:hidden;
  background:var(--bg-2); border:1px solid var(--border);
}
.media[data-ratio="16:9"]  { aspect-ratio:16/9; }
.media[data-ratio="16:10"] { aspect-ratio:16/10; }
.media[data-ratio="1:1"]   { aspect-ratio:1/1; }
.media-el {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s ease;
}
.media.loaded .media-el { opacity:1; }
.media.loaded .media-ph { opacity:0; pointer-events:none; }
.media-ph {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center;
  padding:20px; transition:opacity .4s ease;
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255,255,255,.012) 22px 44px),
    var(--bg-2);
}
.media-ph .ph-label {
  font-family:var(--font-mono); font-size:.85rem; color:var(--muted);
  letter-spacing:.04em;
}
.media-ph .ph-sub {
  font-family:var(--font-mono); font-size:.72rem; color:var(--muted-2);
}
.media-ph .ph-icon {
  width:36px; height:36px; border:1.5px solid var(--border-2); border-radius:9px;
  display:flex; align-items:center; justify-content:center; margin-bottom:4px;
  color:var(--muted-2);
}

/* ============================================================
   PROJECT 1 — PIPELINE VIEWER (4 tabs, §E2)
   ============================================================ */
.pipeline { grid-column:1 / -1; }
.pipeline-head { display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap; margin-bottom:26px; }
.pipeline-head .project-body { max-width:640px; }

.pipeline-flow {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.78rem; color:var(--muted-2);
  margin-top:16px;
}
.pipeline-flow .step { color:var(--muted); }
.pipeline-flow .arrow { color:var(--accent); opacity:.6; }

.viewer { border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; background:var(--bg-2); }
.tabs { display:flex; border-bottom:1px solid var(--border); overflow-x:auto; }
.tab {
  flex:1 1 auto; min-width:130px; background:none; border:0; cursor:pointer;
  padding:15px 18px; color:var(--muted); font-family:var(--font-mono);
  font-size:.82rem; letter-spacing:.02em; position:relative;
  transition:color .2s ease; white-space:nowrap;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.tab:hover { color:var(--fg); }
.tab[aria-selected="true"] { color:var(--accent); }
.tab[aria-selected="true"]::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--accent);
}
.tab .tab-num { font-size:.7rem; opacity:.6; }

.tab-panels { position:relative; }
.tab-panel { display:none; }
.tab-panel[aria-hidden="false"] { display:block; }
.panel-caption {
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  flex-wrap:wrap; padding:13px 18px; border-top:1px solid var(--border);
  font-size:.85rem; color:var(--muted);
}
.panel-caption .hint { font-family:var(--font-mono); font-size:.76rem; color:var(--muted-2); }

/* input strip */
.input-strip { display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; background:var(--border); }
.input-strip .media { border-radius:0; border:0; aspect-ratio:4/3; }

/* 3D stage (point cloud / splat / mesh) — poster + Load button, lazy */
.stage { position:relative; aspect-ratio:16/10; background:var(--bg-3); }
.stage-poster {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px;
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255,255,255,.012) 22px 44px),
    radial-gradient(600px 300px at 50% 40%, rgba(61,215,198,.05), transparent 70%),
    var(--bg-3);
}
.stage-poster img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.stage-poster.has-poster img { opacity:1; }
.stage-poster .ph-label { font-family:var(--font-mono); font-size:.82rem; color:var(--muted); }
.load-btn {
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:.85rem; font-weight:500;
  color:var(--accent); background:rgba(11,13,16,.6);
  border:1px solid var(--accent); border-radius:999px; padding:11px 20px; cursor:pointer;
  transition:background .2s ease;
}
.load-btn:hover { background:var(--accent-dim); }
.load-btn svg { width:15px; height:15px; }
.stage-mount { position:absolute; inset:0; width:100%; height:100%; }
.stage-mount canvas, .stage-mount iframe, .stage-mount model-viewer {
  width:100%; height:100%; border:0; display:block; background:var(--bg-3);
}
.stage-note {
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:10px 14px; font-family:var(--font-mono); font-size:.72rem;
  color:var(--muted); background:linear-gradient(0deg, rgba(11,13,16,.85), transparent);
  text-align:center; pointer-events:none;
}

/* ============================================================
   MORE WORK
   ============================================================ */
.morework-list { display:grid; gap:14px; }
.morework-item {
  display:flex; gap:14px; align-items:flex-start;
  background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; color:var(--muted); font-size:.98rem;
  transition:border-color .2s ease;
}
.morework-item:hover { border-color:var(--border-2); }
.morework-item::before {
  content:"›"; color:var(--accent); font-family:var(--font-mono);
  font-size:1.1rem; line-height:1.4; flex-shrink:0;
}
.morework-item strong { color:var(--fg); font-weight:600; }

/* ============================================================
   EXPERIENCE
   ============================================================ */
.timeline { position:relative; border-left:1px solid var(--border); margin-left:8px; }
.tl-item { position:relative; padding:0 0 44px 32px; }
.tl-item:last-child { padding-bottom:0; }
.tl-item::before {
  content:""; position:absolute; left:-5px; top:6px; width:9px; height:9px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--bg);
}
.tl-period {
  font-family:var(--font-mono); font-size:.8rem; color:var(--accent);
  letter-spacing:.03em; margin-bottom:6px;
}
.tl-role { font-size:1.1rem; font-weight:600; color:var(--fg); }
.tl-org { color:var(--muted); font-size:.95rem; margin:3px 0 10px; }
.tl-desc { color:var(--muted); font-size:.96rem; max-width:64ch; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { text-align:center; }
.contact .lead { color:var(--muted); font-size:1.1rem; max-width:52ch;
  margin:0 auto 34px; }
.contact-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.contact-actions .btn { min-width:0; }
.contact-link {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:.9rem; color:var(--fg);
  border:1px solid var(--border-2); border-radius:999px; padding:12px 20px;
  transition:border-color .2s ease, color .2s ease;
}
.contact-link:hover { border-color:var(--accent); color:var(--accent); }
.contact-link svg { width:16px; height:16px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top:1px solid var(--border); padding:40px 0 60px; text-align:center;
}
.footer .copy { color:var(--muted); font-size:.9rem; }
.footer .disclaimer {
  color:var(--muted-2); font-size:.78rem; max-width:60ch; margin:12px auto 0;
  line-height:1.6;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  section { padding:72px 0; }
  .about-grid { grid-template-columns:1fr; gap:36px; }
  .project { grid-template-columns:1fr; gap:26px; margin-bottom:72px; }
  .project.reverse .project-media { order:1; }
  .project.reverse .project-body  { order:2; }
  .project-media { order:1; }
  .project-body  { order:2; }

  .nav-links {
    position:fixed; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg-2); border-bottom:1px solid var(--border);
    padding:8px 0; transform:translateY(-140%); transition:transform .28s ease;
    max-height:calc(100vh - var(--nav-h)); overflow:auto;
  }
  .nav.open .nav-links { transform:translateY(0); }
  .nav-links a { padding:14px 24px; font-size:1rem; }
  .nav-links .nav-cta { margin:10px 24px; text-align:center; justify-content:center; }
  .nav-toggle { display:flex; }
}

@media (max-width: 560px) {
  .wrap { padding:0 18px; }
  .stats { grid-template-columns:1fr; }
  .input-strip { grid-template-columns:1fr; }
  .hero-actions .btn, .contact-actions .btn { flex:1 1 auto; justify-content:center; }
  .tab { min-width:auto; padding:13px 10px; font-size:.75rem; }
  .tab .tab-label { display:none; }
  .tab .tab-num { font-size:.8rem; opacity:1; }
}

/* ============================================================
   WORK INDEX · PROJECT ACTIONS · PAGE UTILS
   (added for deep-linking + per-project pages)
   ============================================================ */

/* ---- Jump list at the top of Featured Work ---- */
.work-index {
  display:flex; flex-wrap:wrap; gap:8px;
  margin:-24px 0 56px;
}
.work-index a {
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em;
  color:var(--muted); border:1px solid var(--border); border-radius:4px;
  padding:6px 11px; transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.work-index a:hover, .work-index a:focus-visible {
  color:var(--accent); border-color:var(--accent); background:var(--bg-2);
}

/* ---- Per-project actions (details link + copy link) ---- */
.project-actions {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:22px;
}
.project-link {
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em;
  color:var(--accent); border:1px solid var(--accent); border-radius:4px;
  padding:7px 13px; transition:background .2s ease, color .2s ease;
}
.project-link:hover, .project-link:focus-visible { background:var(--accent); color:var(--bg); }
.copy-link {
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em;
  color:var(--muted); background:none; border:1px solid var(--border);
  border-radius:4px; padding:7px 13px; cursor:pointer;
  transition:color .2s ease, border-color .2s ease;
}
.copy-link:hover, .copy-link:focus-visible { color:var(--fg); border-color:var(--border-2); }
.copy-link.done { color:var(--accent); border-color:var(--accent); }

/* ---- Fixed page controls (motion toggle + back to top) ---- */
.utils {
  position:fixed; right:18px; bottom:18px; z-index:90;
  display:flex; flex-direction:column; gap:8px;
}
.util-btn {
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:8px; cursor:pointer;
  background:rgba(11,13,16,.72);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:var(--muted); transition:color .2s ease, border-color .2s ease, opacity .3s ease;
}
.util-btn:hover, .util-btn:focus-visible { color:var(--accent); border-color:var(--accent); }
.util-btn svg { width:17px; height:17px; }
/* motion toggle swaps its icon based on state */
#motion-toggle .i-play  { display:none; }
#motion-toggle[aria-pressed="true"] .i-pause { display:none; }
#motion-toggle[aria-pressed="true"] .i-play  { display:block; }
/* back-to-top fades in once the user has scrolled */
.utils a.util-btn { opacity:0; pointer-events:none; }
.utils.scrolled a.util-btn { opacity:1; pointer-events:auto; }

@media (max-width: 720px) {
  .utils { right:12px; bottom:12px; }
  .work-index { margin:-14px 0 40px; }
}
@media print {
  .utils, .work-index, .project-actions, .nav { display:none !important; }
}