/* =============================================
   MR. TAN — SHARED STYLESHEET v3.1 (visibility fix)
   ============================================= */

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

:root {
  --bg-base:      #080809;
  --bg-surface:   #0d0d0f;
  --bg-elevated:  #141417;
  --bg-overlay:   #101013;
  --bg-card:      #0f0f12;

  --neon:         #00e639;
  --neon-subtle:  rgba(0,230,57,0.05);
  --cyber:        #38bdf8;
  --cyber-dim:    rgba(56,189,248,0.7);

  --text-primary:   #f5f5f5;
  --text-secondary: #a8a8ac;
  --text-tertiary:  #83838a;
  --text-muted:     #63636a;

  --border:        rgba(255,255,255,0.08);
  --border-accent: rgba(0,230,57,0.18);

  --font-mono: 'Fira Code', 'SF Mono', monospace;
  --font-body: 'Inter', system-ui, sans-serif;

  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.25rem;--sp-6:1.5rem; --sp-8:2rem;   --sp-10:2.5rem;
  --sp-12:3rem;  --sp-16:4rem;  --sp-20:5rem;  --sp-24:6rem;

  --radius-sm:3px; --radius-md:6px; --radius-lg:10px;
  --ease-fast:120ms cubic-bezier(.25,0,.3,1);
  --ease-std: 240ms cubic-bezier(.25,0,.3,1);
  --ease-slow:420ms cubic-bezier(.25,0,.3,1);
}

html { scroll-behavior:smooth; font-size:16px; }
body {
  background:var(--bg-base); color:var(--text-primary);
  font-family:var(--font-body); line-height:1.65;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
::selection { background:rgba(0,230,57,.18); color:var(--text-primary); }

.accent { color:var(--neon); }

.container { max-width:1100px; margin:0 auto; padding:0 var(--sp-10); }
@media(max-width:640px){ .container{ padding:0 var(--sp-6); } }

/* === SCANLINES === */
.scanlines {
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(0,0,0,.022) 3px,rgba(0,0,0,.022) 4px);
  opacity:.55;
}

/* === NAV === */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--sp-10); height:60px;
  background:rgba(8,8,9,.85);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--border);
  transition:border-color var(--ease-std), box-shadow var(--ease-std);
}
.nav.scrolled {
  border-bottom-color:rgba(0,230,57,.09);
  box-shadow:0 1px 0 rgba(0,230,57,.04),0 8px 32px rgba(0,0,0,.35);
}
.nav__logo {
  font-family:var(--font-mono); font-size:.92rem; font-weight:600;
  letter-spacing:.04em; color:var(--text-primary);
  text-decoration:none; display:flex; align-items:center; gap:2px;
}
.nav__logo-bracket { color:var(--neon); font-weight:400; }
.nav__logo-cursor  { color:var(--neon); animation:blink 1.2s step-end infinite; font-weight:300; }

.nav__links { display:flex; list-style:none; gap:var(--sp-8); align-items:center; }
.nav__link {
  font-family:var(--font-mono); font-size:.76rem;
  color:var(--text-secondary); text-decoration:none;
  transition:color var(--ease-fast); letter-spacing:.04em;
  display:flex; align-items:center; gap:2px;
}
.nav__link-prefix { color:var(--neon); opacity:.65; transition:opacity var(--ease-fast); font-size:.68rem; }
.nav__link:hover   { color:var(--text-primary); }
.nav__link:hover .nav__link-prefix { opacity:1; }
.nav__link.active  { color:var(--text-primary); }
.nav__link.active .nav__link-prefix { opacity:1; }

.nav__link--cta {
  border:1px solid rgba(0,230,57,.45); color:var(--neon);
  padding:4px 14px; border-radius:var(--radius-sm);
  font-size:.73rem; letter-spacing:.07em;
  transition:background var(--ease-fast),color var(--ease-fast),box-shadow var(--ease-fast);
}
.nav__link--cta:hover { background:var(--neon); color:var(--bg-base); box-shadow:0 0 18px rgba(0,230,57,.22); }

.nav__hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:var(--sp-1); }
.nav__hamburger span { display:block; width:20px; height:1.5px; background:var(--text-secondary); transition:transform var(--ease-std),opacity var(--ease-std),background var(--ease-fast); }
.nav__hamburger:hover span { background:var(--neon); }
.nav__hamburger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); background:var(--neon); }
.nav__hamburger.open span:nth-child(2){ opacity:0; }
.nav__hamburger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); background:var(--neon); }

@media(max-width:768px){
  .nav{ padding:0 var(--sp-6); }
  .nav__hamburger{ display:flex; }
  .nav__links {
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background:rgba(8,8,9,.97);
    backdrop-filter:blur(24px); border-bottom:1px solid var(--border);
    padding:var(--sp-6) var(--sp-6) var(--sp-8); gap:var(--sp-5);
    transform:translateY(-110%); transition:transform var(--ease-std); pointer-events:none;
  }
  .nav__links.open{ transform:translateY(0); pointer-events:auto; }
}

/* === PAGE WRAPPER === */
.page { padding-top:60px; min-height:100vh; }

/* === SECTION SHARED === */
.section { padding:var(--sp-24) 0; }
.section + .section { border-top:1px solid var(--border); }

.section__header { margin-bottom:var(--sp-12); }
.section__eyebrow {
  display:block; font-family:var(--font-mono); font-size:.68rem;
  color:var(--neon); letter-spacing:.22em; margin-bottom:var(--sp-3); opacity:.8;
}
.section__title {
  font-family:var(--font-mono); font-size:clamp(1.75rem,3.5vw,2.5rem);
  font-weight:700; color:var(--text-primary); letter-spacing:-.03em; line-height:1.1;
}

/* === PAGE HERO (non-home) === */
.page-hero {
  padding:var(--sp-16) 0 var(--sp-12);
  border-bottom:1px solid var(--border);
  background:var(--bg-surface);
  position:relative; overflow:hidden;
}
.page-hero__bg {
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(0,230,57,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(0,230,57,.02) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 100% at center,black 10%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 100% at center,black 10%,transparent 75%);
}
.page-hero__eyebrow {
  font-family:var(--font-mono); font-size:.68rem;
  color:var(--neon); letter-spacing:.22em; opacity:.8;
  display:block; margin-bottom:var(--sp-3);
}
.page-hero__title {
  font-family:var(--font-mono); font-size:clamp(2rem,5vw,3.2rem);
  font-weight:700; color:var(--text-primary); letter-spacing:-.03em; line-height:1.1;
  margin-bottom:var(--sp-4);
}
.page-hero__sub {
  font-size:.92rem; color:var(--text-secondary);
  max-width:480px; line-height:1.75;
}

/* === TAGS === */
.tag {
  display:inline-block; font-family:var(--font-mono); font-size:.65rem;
  color:var(--cyber); background:rgba(56,189,248,.08);
  border:1px solid rgba(56,189,248,.22); padding:2px 9px;
  border-radius:2px; margin:3px 3px 3px 0; letter-spacing:.05em;
}

/* === PROJECT CARDS === */
.project-card {
  position:relative; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-md);
  padding:var(--sp-6); display:flex; flex-direction:column;
  transition:border-color var(--ease-std),transform var(--ease-std),box-shadow var(--ease-std);
  overflow:hidden;
}
.project-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent 5%,rgba(0,230,57,.45) 50%,transparent 95%);
  opacity:0; transition:opacity var(--ease-std);
}
.project-card:hover { border-color:rgba(0,230,57,.18); transform:translateY(-3px); box-shadow:0 16px 48px rgba(0,0,0,.45); }
.project-card:hover::before { opacity:1; }
.project-card--featured { border-color:rgba(0,230,57,.12); background:var(--bg-overlay); }
.project-card--featured::before { opacity:.6; }

.project-card__header { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-5); }
.project-card__number { font-family:var(--font-mono); font-size:.66rem; color:var(--text-muted); letter-spacing:.14em; }
.project-card__status { font-family:var(--font-mono); font-size:.63rem; color:var(--text-tertiary); letter-spacing:.08em; }
.project-card__status--active { color:var(--neon); opacity:.9; }
.project-card__status--indev  { color:#f59e0b; opacity:.95; }
.project-card__status--research{ color:var(--cyber); opacity:.9; }

.project-card__title {
  font-family:var(--font-mono); font-size:.98rem; font-weight:600;
  color:var(--text-primary); margin-bottom:var(--sp-3);
  line-height:1.3; letter-spacing:-.01em;
}
.project-card__desc {
  font-size:.83rem; color:var(--text-secondary);
  line-height:1.75; margin-bottom:var(--sp-5); flex:1;
}
.project-card__tech { margin-bottom:var(--sp-5); }
.project-card__links { display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-top:auto; }

.project-link {
  font-family:var(--font-mono); font-size:.73rem; color:var(--neon);
  text-decoration:none; display:flex; align-items:center; gap:5px;
  opacity:.85; transition:opacity var(--ease-fast),gap var(--ease-fast);
  letter-spacing:.03em;
}
.project-link:hover { opacity:1; gap:9px; }
.link-arrow { transition:transform var(--ease-fast); font-size:.85rem; }
.project-link:hover .link-arrow { transform:translateX(2px); }

.project-card--ghost {
  border-style:dashed; border-color:var(--border);
  min-height:180px; align-items:center; justify-content:center;
}
.project-card--ghost:hover { border-color:rgba(0,230,57,.12); transform:none; box-shadow:none; }
.project-card--ghost::before { display:none; }
.project-card__ghost-content { text-align:center; color:var(--text-tertiary); font-family:var(--font-mono); font-size:.78rem; }
.ghost-icon { display:block; font-size:1.5rem; color:var(--neon); opacity:.35; margin-bottom:var(--sp-3); font-weight:300; }

/* === FOOTER === */
.footer {
  border-top:1px solid var(--border); background:var(--bg-surface);
  padding:var(--sp-8) 0 var(--sp-6);
}
.footer__top {
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--sp-6); margin-bottom:var(--sp-5); flex-wrap:wrap;
}
.footer__logo { font-family:var(--font-mono); font-size:1.5rem; font-weight:700; color:var(--text-primary); letter-spacing:-.03em; margin-bottom:var(--sp-2); }
.footer__tagline { font-family:var(--font-mono); font-size:.72rem; color:var(--text-secondary); letter-spacing:.04em; line-height:1.5; }
.footer__links { display:flex; gap:var(--sp-6); flex-wrap:wrap; align-items:center; }
.footer__social {
  display:flex; align-items:center; gap:7px; font-family:var(--font-mono);
  font-size:.76rem; color:var(--text-secondary); text-decoration:none;
  opacity:.9; transition:color var(--ease-fast),opacity var(--ease-fast); letter-spacing:.04em;
}
.footer__social:hover { color:var(--neon); opacity:1; }
.social-icon { width:15px; height:15px; flex-shrink:0; }
.footer__bottom {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:var(--sp-4); padding-top:var(--sp-6); border-top:1px solid var(--border);
}
.footer__copy, .footer__version { font-family:var(--font-mono); font-size:.68rem; color:var(--text-tertiary); letter-spacing:.08em; }

/* === REVEAL === */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease,transform .5s ease; }
.reveal.revealed { opacity:1; transform:translateY(0); }

/* === BLINK === */
.blink { animation:blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* === REDUCED MOTION === */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}