/* ═══════════════════════════════════════════════════════
   GLOBAL STYLES - Design Tokens, Nav, Footer, Cursor
═══════════════════════════════════════════════════════ */

:root {
  /* --- MASTER ALPHA: DEEP SLATE & EMERALD --- */
  /* Backgrounds */
  --bg-base: #050505;
  --bg-surface-1: rgba(10, 10, 12, 0.6);
  --bg-surface-2: rgba(20, 20, 24, 0.8);
  
  /* Background legacy aliases for compatibility */
  --bg-1: var(--bg-base);
  --bg-2: var(--bg-surface-1);
  --bg-3: #0B101B;
  --bg-4: #141B2E;
  --bg-5: #1C2440;

  /* Typography Hierarchy */
  --text-primary: var(--ds-text, #DCDFE4);
  --text-secondary: var(--ds-text-subtle, #8993A4); /* Zinc 400 */
  --text-muted: #52525B;    /* Zinc 600 */
  --text-ghost: #3F3F46;

  /* Accents & SRE Signals */
  --accent-emerald: #10B981;
  --accent-cyan: #00E5FF;
  --accent-indigo: #6366F1;
  --accent-indigo-hi: #818CF8;
  
  /* Semantic Telemetry (The Missing 0.2%) */
  --status-incident: #EF4444; /* Red 500 - System Down */
  --status-degraded: #F59E0B; /* Amber 500 - High Latency */

  /* Syntax Palette (Terminal / JSON Flex) */
  --syntax-key: #38BDF8;     /* Sky Blue */
  --syntax-string: #A3E635;  /* Lime Green */
  --syntax-boolean: #F472B6; /* Pink 400 */

  /* Borders & Shadows */
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border: var(--border-subtle);
  --shadow-surface: 0 4px 24px -8px rgba(0, 0, 0, 0.5);

  /* Typography Scale & Tension */
  --font-mono: 'Atlassian Mono', 'JetBrains Mono', monospace;
  --font-sans: 'Hanken Grotesk', 'Atlassian Sans', system-ui, sans-serif;
  --font-body: var(--font-sans);
  --font-display: 'Hanken Grotesk', 'Plus Jakarta Sans', var(--font-sans);

  --font-size-xs:   clamp(0.65rem, 0.61rem + 0.17vw, 0.75rem);
  --font-size-sm:   clamp(0.8rem, 0.76rem + 0.22vw, 0.94rem);
  --font-size-base: clamp(1.0rem, 0.96rem + 0.22vw, 1.13rem);
  --font-size-lg:   clamp(1.25rem, 1.18rem + 0.33vw, 1.44rem);
  --font-size-xl:   clamp(1.56rem, 1.46rem + 0.5vw, 1.88rem);
  --font-size-2xl:  clamp(1.95rem, 1.8rem + 0.76vw, 2.44rem);
  --font-size-3xl:  clamp(2.44rem, 2.21rem + 1.14vw, 3.19rem);
  --font-size-4xl:  clamp(3.05rem, 2.71rem + 1.7vw, 4.19rem);

  /* Design Tokens */
  --radius: 14px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-std: cubic-bezier(0.25, 0.10, 0.25, 1);
}

html.light {
  --bg-base: #FFFFFF;
  --bg-surface-1: #F8FAFC;
  --bg-surface-2: #FFFFFF;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --border-subtle: rgba(0, 0, 0, 0.06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { 
  scroll-padding-top: 80px; 
  overscroll-behavior-y: none; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* scroll-behavior: smooth; -- Disabled for Lenis conflict */
}
body {
  font-family: var(--font-body); 
  font-size: var(--font-size-base);
  background-color: var(--bg-base); 
  color: var(--text-primary);
  line-height: 1.7; 
  letter-spacing: -0.01em;
  overflow-x: hidden; 
  width: 100%;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  position: relative;
}

h1, .hero-title-elite {
  letter-spacing: -0.04em;
  color: var(--text-primary);
  text-shadow: 0 4px 24px rgba(255, 255, 255, 0.1);
}

p {
  color: var(--text-secondary);
  line-height: 1.7;
  letter-spacing: -0.01em;
}

.container { max-width: min(1200px,100%); margin: 0 auto; padding: 0 clamp(20px,4vw,48px); width: 100% }

/* ── Custom Cursor ── */
#cdot, #cursor-dot {
  position:fixed; pointer-events:none; z-index:99999;
  width:5px; height:5px; background:var(--accent-indigo); border-radius:50%;
  transform:translate(-50%,-50%); will-change:transform;
  transition:width 120ms var(--ease), height 120ms var(--ease);
  box-shadow:0 0 8px var(--accent-indigo), 0 0 22px rgba(99,102,241,0.30); mix-blend-mode:screen;
}
html.light #cdot, html.light #cursor-dot { mix-blend-mode:normal }
#cring, #cursor-ring {
  position:fixed; pointer-events:none; z-index:99998;
  width:26px; height:26px; border:1px solid rgba(99,102,241,0.44); border-radius:50%;
  transform:translate(-50%,-50%); will-change:transform;
  transition:width 260ms var(--ease), height 260ms var(--ease); mix-blend-mode:screen;
}
html.light #cring, html.light #cursor-ring { mix-blend-mode:normal; border-color:rgba(67,56,202,0.30) }
@media (hover:none), (pointer:coarse) { #cdot,#cring,#cursor-dot,#cursor-ring{display:none!important} }

/* ── Global Nav ── */
.nav {
  position:fixed; top:0 !important; left:0; right:0; z-index:2000;
  background:rgba(3,5,9,0.50);
  backdrop-filter:blur(40px) saturate(160%) brightness(1.06);
  -webkit-backdrop-filter:blur(40px) saturate(160%) brightness(1.06);
  border-bottom:1px solid var(--border);
  transition:background 0.28s var(--ease-std),border-color 0.28s,box-shadow 0.28s;
  transform: none !important;
}
html.light .nav { background:rgba(247,249,255,0.70) }
.nav.scrolled { 
  background:rgba(3,5,9,0.94); 
  border-bottom-color:rgba(99,102,241,0.08); 
  box-shadow:0 1px 0 rgba(99,102,241,0.05),0 4px 24px rgba(0,0,0,0.55);
  top: 0 !important;
  transform: translateX(-50%) !important;
}
html.light .nav.scrolled { background:rgba(255,255,255,0.98); border-bottom-color:rgba(67,56,202,0.09) }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:60px; gap:16px }

.nav-logo { font-family:var(--font-mono); font-size:0.78rem; font-weight:500; color:var(--accent-indigo); display:flex; align-items:center; letter-spacing:0.02em; white-space:nowrap; flex-shrink:0 }
.nu {color:#818CF8} html.light .nu {color:var(--accent-indigo)}
.na {color:var(--accent-amber)} .nh {color:var(--accent-cyan)} .nc {color:var(--text-muted)}
.np {color:#7DD3FC} html.light .np {color:#1D4ED8}
.ns {color:var(--accent-red);font-weight:800;animation:blink 1.4s step-end infinite}
.nav-logo-cur {display:inline-block;width:7px;height:14px;background:var(--accent-indigo);margin-left:2px;animation:cblink 1s step-end infinite;vertical-align:text-bottom;box-shadow:0 0 7px var(--accent-indigo)}
@keyframes blink  { 0%,100%{opacity:1} 50%{opacity:0.15} }
@keyframes cblink { 0%,100%{opacity:1} 50%{opacity:0}    }

.nav-links { display:flex; align-items:center; gap:1px }
.nav-links a { font-family:var(--font-body); font-size:0.8125rem; font-weight:500; color:var(--text-muted); padding:5px 10px; border-radius:6px; transition:color var(--d-micro) var(--ease),background var(--d-micro) var(--ease) }
.nav-links a:hover { color:var(--accent-indigo-hi); background:var(--accent-indigo-lo) }
.nav-links a.active { color:var(--accent-indigo-hi) }
.nav-cta { background:var(--accent-indigo-lo)!important; color:var(--accent-indigo-hi)!important; padding:5px 11px!important; border-radius:7px!important; font-family:var(--font-body)!important; font-weight:600!important; font-size:0.75rem!important; border:1px solid var(--accent-indigo-bd)!important; transition: transform var(--d-micro) var(--ease), opacity var(--d-micro) var(--ease), background-color var(--d-micro) var(--ease), border-color var(--d-micro) var(--ease), box-shadow var(--d-micro) var(--ease), color var(--d-micro) var(--ease) !important; white-space:nowrap!important; display:inline-flex; align-items:center; gap:5px }
.nav-cta:hover { background:var(--accent-indigo-md)!important; border-color:var(--accent-indigo-bh)!important; box-shadow:var(--glow)!important; transform:translateY(-1px)!important }

.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; background:var(--border); border:1px solid var(--border-hover); border-radius:7px; color:var(--text-muted); font-size:0.8rem; flex-shrink:0; transition: transform var(--d-card) var(--ease) }
@media (pointer:fine) { .theme-toggle { cursor: none, opacity var(--d-card) var(--ease) }
@media (pointer:fine) { .theme-toggle { cursor: none, background-color var(--d-card) var(--ease) }
@media (pointer:fine) { .theme-toggle { cursor: none, border-color var(--d-card) var(--ease) }
@media (pointer:fine) { .theme-toggle { cursor: none, box-shadow var(--d-card) var(--ease) }
@media (pointer:fine) { .theme-toggle { cursor: none, color var(--d-card) var(--ease) }
@media (pointer:fine) { .theme-toggle { cursor: none; } }
.theme-toggle:hover { background:var(--accent-indigo-lo); border-color:var(--accent-indigo-bd); color:var(--accent-indigo-hi); box-shadow:var(--glow) }
.theme-toggle .ti-sun  { display:none } .theme-toggle .ti-moon { display:block }
html.light .theme-toggle .ti-sun  { display:block } html.light .theme-toggle .ti-moon { display:none }

.nav-mob-wrapper { display:none; align-items:center; gap:8px }
.mob-btn { background:none; border:1px solid var(--border-hover); font-size:0.9rem; color:var(--accent-indigo); padding:7px 8px; border-radius:6px; transition:border-color var(--d-micro) }
@media (pointer:fine) { .mob-btn { cursor: none; } }
.mob-btn:hover { border-color:var(--accent-indigo-bd) }
.mob-menu { display:none; position:fixed; top:60px; left:0; right:0; background:rgba(3,5,9,0.97); backdrop-filter:blur(24px); border-bottom:1px solid var(--border-hover); padding:8px 28px 16px; z-index:1999 }
html.light .mob-menu { background:rgba(255,255,255,0.97) }
.mob-menu.open { display:block }
.mob-menu a { display:block; padding:12px 0; color:var(--text-secondary); font-family:var(--font-body); font-size:0.9375rem; border-bottom:1px solid var(--border); transition:color var(--d-micro) }
.mob-menu a:hover { color:var(--accent-indigo-hi) }
.mob-menu a::before { content:'→ '; color:var(--accent-indigo) }

@media (min-width:1100px) { .nav-links{display:flex!important} .nav-mob-wrapper{display:none!important} }
@media (max-width:1099px) { .nav-links{display:none!important} .nav-mob-wrapper{display:flex!important;align-items:center;gap:8px} }

/* ── Global Scrollbar ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--bg-5); border-radius: 4px; border: 2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-indigo-bd); }

/* ── Skip Link ── */
.skip { position:absolute; top:-100px; left:16px; z-index:99999; background:var(--accent-indigo); color:#fff; padding:10px 22px; border-radius:8px; font-weight:700; transition:top 0.2s }
.skip:focus { top:0 }

/* ── Footer ── */
.footer {
  padding: 40px 0; border-top: 1px solid var(--border);
  background: var(--bg-1); color: var(--text-muted);
  text-align: center; font-size: 0.8125rem; font-family: var(--font-mono); line-height: 1.6;
}
.footer p { margin-bottom: 8px }
.footer a { color: var(--accent-indigo-hi); transition: color 0.2s }
.footer a:hover { color: var(--accent-indigo) }

/* ── Animations (AOS) ── */
.aos { opacity: 0; transform: translateY(24px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); will-change: opacity, transform; }
.aos.on { opacity: 1; transform: translateY(0); }

/* Button Base */
.btn {
  display:inline-flex; align-items:center; gap:7px; padding:10px 20px; border-radius:8px;
  font-family:var(--font-body); font-weight:600; font-size:0.8125rem;
  border:none; transition: transform 0.2s var(--ease), opacity 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease); will-change:transform;
  box-shadow:var(--card-spec);
}
@media (pointer:fine) { .btn { cursor: none; } }
.btn:hover  { transform:scale(1.03) translateY(-1px) }
.btn:active { transform:scale(1.00)!important }

/* ─── NATIVE CROSS-DOCUMENT VIEW TRANSITIONS (SPA FEEL) ─── */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 0.4s ease-in both fade-out;
}

::view-transition-new(root) {
  animation: 0.5s ease-out both fade-in;
}

@keyframes fade-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(1.02); }
}

@keyframes fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}


/* ─── § MATHEMATICAL TYPOGRAPHY SYSTEM ────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.03em; /* Silicon Valley Look */
  font-weight: 800;
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }

p { font-size: var(--font-size-base); color: var(--text-secondary); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }

/* ─── § ARCHITECTURAL ELEVATION ───────────────────────────────────────── */
.glass-card, .proj, .sk, .bento-card, .cert, .obs-metric, .tl-card, .feat-proj, .comm-card, .article-card {
  background: var(--bg-surface-1) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-surface) !important;
  border-radius: var(--radius);
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.4s var(--ease) !important;
  position: relative;
  overflow: hidden; /* Clips the spotlight */
}

/* ─── § THE 1% SPOTLIGHT EFFECT ─── */
.glass-card::before, .proj::before, .sk::before, .bento-card::before, 
.cert::before, .obs-metric::before, .tl-card::before, .feat-proj::before, 
.comm-card::before, .article-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(
    600px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), 
    rgba(255, 255, 255, 0.08), 
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none; /* Interaction Guard */
  z-index: 1;
}

html.light .glass-card::before, html.light .proj::before, html.light .sk::before {
  background: radial-gradient(
    600px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), 
    rgba(99, 102, 241, 0.06), 
    transparent 40%
  );
}

.glass-card:hover::before, .proj:hover::before, .sk:hover::before, .bento-card:hover::before,
.cert:hover::before, .obs-metric:hover::before, .tl-card:hover::before, .feat-proj:hover::before,
.comm-card:hover::before, .article-card:hover::before {
  opacity: 1;
}

/* Ensure content sits above the spotlight */
.glass-card > *, .proj > *, .sk > *, .bento-card > *, .cert > *, .obs-metric > *, .tl-card > *, .feat-proj > * {
    position: relative;
    z-index: 2;
}

.glass-card:hover, .proj:hover, .sk:hover, .bento-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-indigo-bd) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
}

/* ─── § RESPONSIVE HARDENING (Tier-0) ────────────────────────────────── */
@media (max-width: 768px) {
  /* Enforce single-column collapse for all bento and project grids */
  .grid, .bento-grid, .proj-grid, .focus-cards-grid, .skills-matrix, .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Fluid Typography for massive headings */
  h1, .hero-title-elite {
    font-size: clamp(2.2rem, 10vw, 3.2rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.04em !important;
  }

  h2 { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; }
  
  /* Prevent horizontal overflow on long technical strings */
  .line2 {
    font-size: 0.9em;
    word-break: break-word;
  }

  .container {
    padding: 0 20px !important;
  }
}

/* Fix for iOS viewport height issues */
@supports (-webkit-touch-callout: none) {
  .hero, body {
    min-height: -webkit-fill-available;
  }
}