/* ============================================================
   COLOR VARIABLES — Change colors here to restyle the whole site
   ============================================================ */
:root {
  --bg: #000000;                         /* Page background */
  --surface: rgba(28,28,30,0.72);        /* Card background */
  --surface-solid: #1c1c1e;              /* Solid card background */
  --accent: #2997ff;                     /* Main accent (blue) */
  --accent-hover: #64b5ff;               /* Accent on hover */
  --highlight: #f5f5f7;                  /* Bright text */
  --text: #f5f5f7;                       /* Primary text */
  --text-secondary: #86868b;             /* Secondary text */
  --text-tertiary: #48484a;              /* Dimmed text */
  --border: rgba(255,255,255,0.06);      /* Default borders */
  --border-hover: rgba(255,255,255,0.14);/* Border on hover */
  --glass: rgba(28,28,30,0.6);           /* Glass effect */
  --glass-strong: rgba(28,28,30,0.85);   /* Strong glass effect */
  --blue: #2997ff;                       /* Blue color */
  --green: #30d158;                      /* Green color */
  --gold: #ffd60a;                       /* Gold color */
}


/* ============================================================
   BASE STYLES — General page setup
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   TERMINAL BOOT SCREEN — The hacker-style intro animation
   ============================================================ */
#terminal-screen {
  position: fixed;
  inset: 0;
  z-index: 1010;
  background: #09090b;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
#terminal-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.terminal-window {
  width: 90%;
  max-width: 640px;
  max-height: 80vh;
  background: #111113;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
}

/* Terminal title bar (the macOS-style top bar) */
.terminal-titlebar {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  gap: 8px;
}
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-red { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green { background: #28c840; }
.terminal-titlebar-text {
  flex: 1;
  text-align: center;
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.2);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-right: 42px;
}

/* Terminal content area */
.terminal-container {
  width: 100%;
  max-height: calc(80vh - 44px);
  overflow-y: auto;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: clamp(10px, 1.2vw, 12px);
  color: var(--text-secondary);
  line-height: 2;
  position: relative;
  padding: 24px;
  font-weight: 300;
}
.terminal-container::-webkit-scrollbar { width: 3px; }
.terminal-container::-webkit-scrollbar-track { background: transparent; }
.terminal-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

/* Terminal line animation */
.term-line {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.term-line.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Terminal text colors */
.t-white { color: #f5f5f7; font-weight: 500; }
.t-blue { color: #2997ff; font-weight: 500; }
.t-dim { color: #48484a; }
.t-accent { color: #30d158; }
.t-gold { color: #ffd60a; font-weight: 500; }

/* Skip button */
#skip-btn {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 1020;
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 10px 24px;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 980px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  letter-spacing: -0.01em;
}
#skip-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
}

/* Mobile "tap to skip" hint */
#tap-hint {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1020;
  font-size: 12px;
  color: var(--text-tertiary);
  animation: pulse 3s ease-in-out infinite;
  display: none;
}
@media (max-width: 734px) { #tap-hint { display: block; } }
@keyframes pulse { 0%,100% { opacity: 0.3; } 50% { opacity: 0.7; } }


/* ============================================================
   MAIN SITE — Visible after terminal animation finishes
   ============================================================ */
#main-site {
  display: none;
  position: relative;
  overflow-x: hidden;
}
#main-site.visible { display: block; }

/* Subtle background gradient */
.bg-gradient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 70% 0%, rgba(41,151,255,0.06) 0%, transparent 50%),
              radial-gradient(ellipse at 30% 100%, rgba(167,139,250,0.04) 0%, transparent 50%);
}

/* Scroll reveal animation (sections fade in on scroll) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   HERO SECTION — The big intro with name, role, and stats
   ============================================================ */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 120px 24px 80px;
  position: relative;
  z-index: 3;
  max-width: 800px;
  margin: 0 auto;
}

/* Hero fade-in animation */
.hero > * {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* "Portfolio" label above name */
.hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 24px;
  animation-delay: 0.1s;
}

/* Big name — editorial Instrument Serif with italic accent */
.hero-name {
  font-family: 'Instrument Serif', 'Playfair Display', Georgia, serif;
  font-size: clamp(3.8rem, 11.5vw, 7.4rem);
  font-weight: 400;                /* Instrument Serif ships at 400 only */
  letter-spacing: -0.022em;
  text-align: center;
  line-height: 0.92;
  margin-bottom: 22px;
  animation-delay: 0.2s;
}
.name-accent {
  font-style: italic;              /* Instrument Serif italic is gorgeous */
  font-weight: 400;
  background: linear-gradient(95deg, #2997ff 0%, #64b5ff 55%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-right: 0.04em;           /* italic overflow breathing room */
}

/* Role text with lines on each side */
.hero-role {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
  animation-delay: 0.35s;
}
.hero-role-line { width: 32px; height: 1px; background: var(--text-tertiary); }
.hero-role-text {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Stats row (Years Exp, Certs, GPA, Publication) */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 48px;
  animation-delay: 0.5s;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 36px;
  position: relative;
}
.stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--border);
}
.stat-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
}
.stat-value.blue { color: var(--accent); }
.stat-value.green { color: var(--green); }
.stat-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* Scroll down arrow */
.scroll-indicator {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation-delay: 0.7s;
}
.scroll-arrow {
  width: 20px;
  height: 20px;
  border-right: 1.5px solid var(--text-tertiary);
  border-bottom: 1.5px solid var(--text-tertiary);
  transform: rotate(45deg);
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { opacity: 0.3; transform: rotate(45deg) translateY(0); }
  50% { opacity: 0.8; transform: rotate(45deg) translateY(6px); }
}


/* ============================================================
   SECTION LAYOUT — Shared styles for all content sections
   ============================================================ */
.content-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}
.section-block {
  padding: 80px 0;
  border-top: 1px solid var(--border);
}
.section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 32px;
}


/* ============================================================
   EXPERIENCE SECTION
   ============================================================ */
.exp-card {
  padding: 32px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.exp-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
  gap: 16px;
  flex-wrap: wrap;
}
.exp-card-company {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.exp-card-date {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 500;
  padding: 5px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 980px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.exp-card-role {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 24px;
  font-style: italic;
}
.exp-card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.exp-card-list li {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  padding-left: 20px;
  position: relative;
  letter-spacing: -0.01em;
}
.exp-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
}

/* Skill tags at the bottom of the experience card */
.exp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.exp-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 6px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 980px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}


/* ============================================================
   CERTIFICATIONS SECTION
   ============================================================ */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cert-card {
  padding: 20px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.cert-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  background: var(--glass-strong);
}
.cert-card-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.cert-card-issuer {
  font-size: 12px;
  color: var(--text-tertiary);
}


/* ============================================================
   EDUCATION SECTION
   ============================================================ */
.edu-card {
  padding: 28px 32px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.edu-card-info { display: flex; flex-direction: column; gap: 4px; }
.edu-card-degree { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.edu-card-school { font-size: 14px; color: var(--text-secondary); }
.edu-card-year { font-size: 13px; color: var(--text-tertiary); }
.edu-card-gpa {
  font-size: 24px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.edu-card-gpa-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}


/* ============================================================
   ACHIEVEMENTS SECTION
   ============================================================ */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.achievement-card {
  padding: 24px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.achievement-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}
.achievement-card-icon { font-size: 28px; margin-bottom: 12px; }
.achievement-card-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; letter-spacing: -0.01em; }
.achievement-card-desc { font-size: 13px; color: var(--text-tertiary); line-height: 1.5; }


/* ============================================================
   CONNECT / LINKS SECTION
   ============================================================ */
.links-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 16px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 20px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-align: center;
}
.link-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  background: var(--glass-strong);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(41,151,255,0.08);
  border: 1px solid rgba(41,151,255,0.1);
  border-radius: 14px;
  transition: all 0.3s;
}
.card-icon svg {
  width: 22px;
  height: 22px;
  fill: var(--accent);
  transition: fill 0.3s;
}
.link-card:hover .card-icon {
  background: rgba(41,151,255,0.12);
  border-color: rgba(41,151,255,0.2);
  transform: scale(1.05);
}
.link-card:hover .card-icon svg { fill: var(--accent-hover); }
.card-name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.card-desc { font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.01em; }


/* ============================================================
   FOOTER
   ============================================================ */
.footer-section {
  padding: 60px 0 40px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer-name { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.footer-role { font-size: 13px; color: var(--text-tertiary); margin-bottom: 16px; }
.footer-tagline { font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.08em; text-transform: uppercase; }
.footer-tagline .hl { color: var(--accent); }


/* ============================================================
   RESPONSIVE — Tablet (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .links-row { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   RESPONSIVE — Mobile (max 734px)
   ============================================================ */
@media (max-width: 734px) {
  .hero { padding: 100px 20px 60px; }
  .hero-name { font-size: clamp(2.4rem, 12vw, 3.5rem); }
  .section-block { padding: 50px 0; }
  .content-section { padding: 0 16px; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cert-card { padding: 16px; }
  .achievements-grid { grid-template-columns: 1fr; }
  .links-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .link-card { padding: 20px 12px; }
  .exp-card { padding: 20px; border-radius: 16px; }
  .exp-card-company { font-size: 18px; }
  .exp-card-list li { font-size: 13px; }
  .exp-tags { gap: 6px; }
  .exp-tag { font-size: 10px; padding: 5px 10px; }
  .edu-card { padding: 20px; border-radius: 16px; flex-direction: column; align-items: flex-start; }
  .edu-card-gpa { align-items: flex-start; }
  .hero-stats { gap: 0; flex-wrap: wrap; justify-content: center; }
  .stat { padding: 0 16px; }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { padding-right: 0; }
  .stat-value { font-size: 20px; }
  .stat-label { font-size: 9px; }
  .hero-role { flex-direction: column; gap: 8px; }
  .hero-role-line { width: 24px; }
  .hero-role-text { font-size: 13px; text-align: center; }
  .hero-eyebrow { font-size: 10px; margin-bottom: 20px; }
  .footer-section { padding: 40px 0 30px; }
  .terminal-window { width: 95%; max-height: 85vh; border-radius: 10px; }
  .terminal-container { padding: 16px; font-size: 10px; }
  .terminal-titlebar { padding: 10px 14px; }
  .terminal-dot { width: 8px; height: 8px; }
  #skip-btn { bottom: 24px; right: 24px; font-size: 12px; padding: 8px 20px; }
  .achievement-card { padding: 20px; }
  .achievement-card-icon { font-size: 24px; margin-bottom: 8px; }
}

/* ============================================================
   RESPONSIVE — Small phones (max 380px)
   ============================================================ */
@media (max-width: 380px) {
  .hero-name { font-size: 2.2rem; }
  .hero-stats { flex-wrap: wrap; row-gap: 16px; }
  .stat { padding: 0 14px; }
  .stat-value { font-size: 18px; }
  .cert-grid { grid-template-columns: 1fr 1fr; }
  .links-row { grid-template-columns: 1fr; }
  .exp-card-header { flex-direction: column; gap: 6px; }
}


/* ============================================================
   ATMOSPHERE LAYERS — Background washes, grid, noise, aurora
   ------------------------------------------------------------
   Adds depth to the pure-black page:
     1. body::before  → radial blue/green gradient washes
     2. body::after   → faint grid pattern
     3. .noise        → subtle SVG film grain
     4. .aurora       → soft glow that follows the cursor
   To turn off any layer, comment out its block.
   ============================================================ */

/* 1. Radial gradient washes */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(1100px 760px at 12% -10%, rgba(41,151,255,0.14), transparent 62%),
    radial-gradient(900px 700px at 88% 5%, rgba(48,209,88,0.08), transparent 60%),
    radial-gradient(1400px 900px at 50% 110%, rgba(41,151,255,0.07), transparent 60%),
    linear-gradient(180deg, #000000 0%, #04060B 50%, #000000 100%);
}

/* 2. Faint grid overlay (masked into a soft ellipse) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
}

/* 3. Film-grain noise */
.noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.8'/%3E%3C/svg%3E");
}

/* 4. Aurora — soft cursor-following glow */
.aurora {
  position: fixed;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41,151,255,0.12), transparent 60%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: -1;
  filter: blur(24px);
  will-change: transform;
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  .aurora { display: none; }
}


/* ============================================================
   THEME ENHANCEMENTS
   ------------------------------------------------------------
   Adds three polish details on top of the existing design:
     A. Cursor-lit glow on every card
     B. Hero name decode shimmer (via .decoding class)
     C. Stat count-up (no CSS needed — pure JS)
   ============================================================ */

/* A. Card cursor spotlight — follows the pointer on each card */
.exp-card, .cert-card, .link-card {
  position: relative;
  isolation: isolate;          /* traps ::after z-index:-1 inside card */
}
.exp-card::after,
.cert-card::after,
.link-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 50%),
    rgba(41,151,255,0.18),
    rgba(48,209,88,0.04) 30%,
    transparent 55%
  );
  z-index: -1;
}
.exp-card:hover::after,
.cert-card:hover::after,
.link-card:hover::after {
  opacity: 1;
}

/* B. Hero name decode shimmer — only visible while text is scrambling */
.hero-name.is-decoding,
.hero-name.is-decoding .name-accent {
  text-shadow: 0 0 14px rgba(41,151,255,0.35);
}


/* ============================================================
   iOS UPGRADES
   ------------------------------------------------------------
   Refines the look/feel toward authentic Apple materials:
     C. Vibrancy glass on every card (blur + saturate + top highlight)
     D. Spring-physics hover + tap-scale on cards
     E. iOS pill-style eyebrow labels (.section-label)
     F. Dynamic Island — floating section indicator (#island)
   To roll back any block, delete or comment it out.
   ============================================================ */

/* C + D. Vibrancy glass and spring interactions ---------------- */
.exp-card,
.cert-card,
.link-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 0.5px rgba(255,255,255,0.03),
    0 1px 2px rgba(0,0,0,0.3),
    0 20px 40px -20px rgba(0,0,0,0.55);
  transition:
    transform 0.55s cubic-bezier(.22, 1.2, .36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
.exp-card:hover,
.cert-card:hover,
.link-card:hover {
  transform: translateY(-3px) scale(1.008);
  border-color: rgba(255,255,255,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 1px 2px rgba(0,0,0,0.3),
    0 30px 60px -20px rgba(0,0,0,0.65);
}
.exp-card:active,
.cert-card:active,
.link-card:active {
  transform: translateY(-1px) scale(0.985);
  transition: transform 0.15s ease-out;
}


/* E. Section label pill (iOS chip) ---------------------------- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: rgba(41,151,255,0.12);
  border: 1px solid rgba(41,151,255,0.28);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 1px 2px rgba(0,0,0,0.2);
  margin-bottom: 32px;
}
.section-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(41,151,255,0.85);
}


/* F. Dynamic Island — floating section indicator -------------- */
#island {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 12px 40px -10px rgba(0,0,0,0.7),
    0 0 0 1px rgba(41,151,255,0.08);
  color: var(--text);
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -140%) scale(0.85);
  transition:
    transform 0.7s cubic-bezier(.22, 1.3, .36, 1),
    opacity 0.4s ease;
}
#island.visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
#island .island-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: islandPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
#island .island-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 0.25s ease;
}
#island .island-label.swapping { opacity: 0; }
@keyframes islandPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}
@media (max-width: 560px) {
  #island { display: none; }
}


/* ============================================================
   PROFESSIONAL POLISH
   ------------------------------------------------------------
     G. Scroll progress bar (top)
     H. Toast notification system
     I. Command palette (⌘K / Ctrl+K / /)
     J. Command palette launcher pill (bottom right)
     K. Print stylesheet (for Save as PDF / paper)
   ============================================================ */

/* G. Scroll progress bar ------------------------------------- */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--green));
  box-shadow: 0 0 14px rgba(41,151,255,0.55);
  z-index: 95;
  pointer-events: none;
  transition: width 0.1s linear;
}


/* H. Toast ----------------------------------------------------- */
#toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  z-index: 500;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  background: rgba(22,22,26,0.92);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(48,209,88,0.4);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 24px 60px -10px rgba(0,0,0,0.7);
  opacity: 0;
  transform: translate(-50%, 12px) scale(0.96);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition:
    transform 0.45s cubic-bezier(.22,1.3,.36,1),
    opacity 0.3s ease;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
#toast .toast-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
}


/* I. Command palette ----------------------------------------- */
#cmdk {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 18vh 16px 16px;
}
#cmdk.open {
  display: flex;
  animation: cmdkFadeIn 0.2s ease;
}
@keyframes cmdkFadeIn { from { opacity: 0; } to { opacity: 1; } }

.cmdk-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cmdk-panel {
  position: relative;
  width: min(580px, 100%);
  max-height: calc(100vh - 36vh);
  display: flex;
  flex-direction: column;
  background: rgba(22,22,26,0.9);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 40px 100px rgba(0,0,0,0.75),
    0 0 0 1px rgba(41,151,255,0.08);
  overflow: hidden;
  animation: cmdkRise 0.4s cubic-bezier(.22,1.2,.36,1);
}
@keyframes cmdkRise {
  from { transform: translateY(14px) scale(0.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cmdk-search-icon {
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
#cmdk-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
}
#cmdk-input::placeholder { color: var(--text-tertiary); }

kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-secondary);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3);
  line-height: 1.2;
}

.cmdk-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.cmdk-list::-webkit-scrollbar { width: 4px; }
.cmdk-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

.cmdk-group-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  padding: 10px 12px 4px;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  transition: background 0.15s;
}
.cmdk-item.selected {
  background: rgba(41,151,255,0.14);
}
.cmdk-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(41,151,255,0.14);
  border: 1px solid rgba(41,151,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.cmdk-item-label { flex: 1; font-weight: 500; }
.cmdk-item-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: 'JetBrains Mono', monospace;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmdk-empty {
  padding: 28px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}
.cmdk-footer {
  display: flex;
  gap: 18px;
  padding: 10px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.cmdk-footer span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* K. Print stylesheet (when user prints / saves PDF) ---------- */
@media print {
  body::before, body::after,
  .noise, .aurora,
  #terminal-screen, #island, #cmdk,
  #scroll-progress, #toast {
    display: none !important;
  }
  html, body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  #main-site { opacity: 1 !important; }
  .exp-card, .cert-card, .link-card, .stat {
    background: #ffffff !important;
    border: 1px solid #dddddd !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    page-break-inside: avoid;
    color: #000000 !important;
  }
  .hero-name, h1, h2, h3, h4,
  .stat-value, .cert-card-name, .exp-card-role {
    color: #000000 !important;
  }
  .section-label {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: #000000 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .name-accent, .stat-value.blue, .stat-value.green {
    color: #2997ff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  a { color: #2997ff !important; text-decoration: underline; }
  section { page-break-inside: avoid; }
}


/* ============================================================
   L. RADAR INTRO — replaces the old terminal window
   ------------------------------------------------------------
   Structure (inside #terminal-screen):
     .radar-intro         Glass panel frame
       .radar-hud-top     Title + REC indicator row
       .radar-stage       SVG radar (rings, sweep, blips, lock)
       .radar-hud-bot     Coordinates + live clock
       .radar-status      Status message (swaps every ~600ms)
       .radar-progress    Progress bar
       .radar-skip        "Press ESC to skip" hint
   ------------------------------------------------------------
   Note: the old `.terminal-window`, `.terminal-titlebar`,
   `.terminal-container`, `.term-line`, `.t-*` color classes
   above are now unused — safe to delete when you clean up.
   ============================================================ */
.radar-intro {
  width: min(460px, 92%);
  padding: 22px 26px 24px;
  border-radius: 18px;
  background: rgba(10,14,24,0.82);
  border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 40px 120px -20px rgba(0,0,0,0.8),
    0 0 0 1px rgba(41,151,255,0.1);
  position: relative;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.5);
}

/* Top HUD row ------------------------------------------------- */
.radar-hud-top,
.radar-hud-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 9px;
  color: rgba(255,255,255,0.35);
}
.radar-hud-top { margin-bottom: 16px; }
.radar-hud-bot { margin-top: 14px; }
.radar-hud-top .rec {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ff5f57;
  font-weight: 600;
}
.radar-hud-top .rec::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 0 0 8px #ff5f57;
  animation: radarRecPulse 1.3s ease-in-out infinite;
}
@keyframes radarRecPulse {
  0%, 100% { opacity: 1; transform: scale(1);   }
  50%      { opacity: 0.3; transform: scale(0.65); }
}

/* Radar stage ------------------------------------------------- */
.radar-stage {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto;
}
.radar-stage svg { width: 100%; height: 100%; display: block; overflow: visible; }

.radar-ring   { fill: none; stroke: rgba(41,151,255,0.22); stroke-width: 1; stroke-dasharray: 2 4; }
.radar-axis   { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
.radar-center { fill: var(--accent); }

/* Rotating sweep beam (a quarter-circle cone) */
.radar-sweep {
  transform-origin: 50% 50%;
  animation: radarSpin 2.8s linear infinite;
}
@keyframes radarSpin {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}

/* Random blips (added via JS) */
.radar-blip {
  fill: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent));
  animation: blipFade 1.8s ease-out forwards;
  transform-origin: center;
}
@keyframes blipFade {
  0%   { opacity: 0;   transform: scale(0.2); }
  15%  { opacity: 1;   transform: scale(1.2); }
  35%  { opacity: 0.8; transform: scale(1);   }
  100% { opacity: 0;   transform: scale(0.4); }
}

/* Locked target — appears after sequence completes */
.radar-lock { opacity: 0; transition: opacity 0.45s ease; }
.radar-intro.locked .radar-lock { opacity: 1; }
.radar-lock-dot {
  fill: #30d158;
  filter: drop-shadow(0 0 10px #30d158);
}
.radar-lock-ring {
  fill: none;
  stroke: #30d158;
  stroke-width: 1.5;
  transform-origin: center;
  animation: lockRingExpand 1.6s ease-out infinite;
}
@keyframes lockRingExpand {
  0%   { r: 5;  opacity: 1;   }
  100% { r: 28; opacity: 0;   }
}

/* Status line ------------------------------------------------- */
.radar-status {
  margin-top: 22px;
  text-align: center;
  font-size: 11px;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  min-height: 16px;
  transition: opacity 0.2s ease;
}
.radar-status.swap { opacity: 0; }
.radar-status .hl { color: var(--accent); }
.radar-status .ok { color: var(--green); }

/* Progress bar ------------------------------------------------ */
.radar-progress {
  margin-top: 12px;
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.radar-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--green));
  box-shadow: 0 0 12px rgba(41,151,255,0.55);
  transition: width 0.5s ease-out;
}

/* Skip hint --------------------------------------------------- */
.radar-skip {
  margin-top: 16px;
  text-align: center;
  font-size: 9px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.radar-skip kbd {
  font-size: 9px;
  padding: 1px 5px;
  margin: 0 2px;
}


/* ============================================================
   RESPONSIVE FIXES — phone / tablet / laptop cross-device
   ------------------------------------------------------------
   This block overrides earlier rules to fix issues where the
   design behaved differently between desktop and mobile:
     • iOS URL bar was clipping the fixed background
     • Radial gradients looked washed out on narrow screens
     • Heavy blur filters killed mobile performance
     • Notched iPhones (X+) had black bars on sides
   Keep this block at the END of the file so it wins the cascade.
   ============================================================ */

/* FIX 1 — solid black fallback so the page is never white, ever */
html {
  background-color: #000;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;  /* stop iOS auto-resizing text */
  text-size-adjust: 100%;
}

/* FIX 2 — safe-area padding for iPhone X+ notched screens */
body {
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* FIX 3 — background gradients: use dynamic viewport height (dvh)
   so iOS doesn't leave a gap when the URL bar collapses.
   Also supply a fallback 100vh for older browsers. */
body::before {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100%;
  background-attachment: scroll;
}
body::after {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100%;
}

/* FIX 4 — hero section height uses dvh (matches iOS visual viewport) */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
}

/* FIX 5 — command palette panel uses dvh (safer modal sizing) */
#cmdk {
  padding-top: max(18vh, env(safe-area-inset-top));
  min-height: 100vh;
  min-height: 100dvh;
}
.cmdk-panel {
  max-height: calc(100vh - 36vh);
  max-height: calc(100dvh - 36dvh);
}


/* ============================================================
   TABLET BREAKPOINT (768px – 1024px)
   Filled a gap between the existing desktop + mobile rules
   ============================================================ */
@media (min-width: 735px) and (max-width: 1024px) {
  .hero { padding: 110px 32px 70px; }
  .hero-name { font-size: clamp(3rem, 10vw, 5rem); }
  .cert-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .links-row  { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .achievements-grid { grid-template-columns: 1fr 1fr; }
  .exp-card { padding: 28px; }
  .section-block { padding: 70px 0; }
  .content-section { padding: 0 32px; }
  .stat { padding: 0 28px; }
}


/* ============================================================
   MOBILE PERFORMANCE — <= 734px
   Reduce heavy GPU work so phones don't stutter
   ============================================================ */
@media (max-width: 734px) {

  /* Weaker background blur on mobile — saves significant battery/GPU */
  .exp-card,
  .cert-card,
  .link-card {
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
  }

  /* Noise layer is imperceptible on small screens — kill it */
  .noise { display: none; }

  /* Aurora is a cursor-follow effect — no cursor on phones */
  .aurora { display: none; }

  /* Dynamic Island cramps the nav on small screens */
  #island { display: none; }

  /* Radar intro scales down on narrow screens */
  .radar-intro { padding: 16px 18px 20px; }
  .radar-stage { width: 220px; height: 220px; }
  .radar-hud-top,
  .radar-hud-bot { font-size: 8px; }
  .radar-status { font-size: 10px; }

  /* Command palette takes over full screen on phones */
  #cmdk { padding-top: 10vh; padding-left: 14px; padding-right: 14px; }
  .cmdk-panel { max-height: calc(100dvh - 12vh); width: 100%; }
  .cmdk-input-wrap { padding: 13px 14px; }
  #cmdk-input { font-size: 16px; } /* 16px prevents iOS from zooming on focus */
  .cmdk-list { max-height: 55vh; }

  /* Section pill labels wrap nicely */
  .section-label {
    font-size: 10px;
    padding: 5px 12px 5px 10px;
  }

  /* Tap targets must be at least 44x44px (Apple HIG + WCAG) */
  a, button, .btn, .link-card, .social, .nav-cta, .btn-primary, .btn-ghost {
    min-height: 44px;
  }

  /* Disable the cursor-follow card spotlight — it relies on hover */
  .exp-card::after,
  .cert-card::after,
  .link-card::after {
    display: none;
  }

  /* Safe-area respect for bottom nav / home indicator on iPhone */
  footer { padding-bottom: calc(3rem + env(safe-area-inset-bottom)); }
}


/* ============================================================
   VERY SMALL PHONES (<= 380px) — iPhone SE, mini, folded foldables
   ============================================================ */
@media (max-width: 380px) {
  .hero { padding: 90px 16px 50px; }
  .hero-name { font-size: clamp(2rem, 11vw, 2.6rem); }
  .hero-tag { font-size: 0.95rem; }
  .radar-stage { width: 190px; height: 190px; }
  .section-label { font-size: 9px; letter-spacing: 0.08em; }
}


/* ============================================================
   TOUCH-ONLY DEVICES — disable hover-only effects reliably
   Some tablets report touch but also a mouse; the (hover: none)
   query is the modern, accurate way to detect "touch-primary".
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .exp-card::after,
  .cert-card::after,
  .link-card::after {
    display: none;
  }
  /* Remove hover transforms that get "stuck" on tap */
  .exp-card:hover,
  .cert-card:hover,
  .link-card:hover {
    transform: none;
  }
  .aurora { display: none; }
}


/* ============================================================
   LANDSCAPE SHORT SCREENS — phones in landscape or short tablets
   Keep the hero from eating the whole viewport and burying content
   ============================================================ */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 80px; padding-bottom: 40px; }
  .radar-stage { width: 180px; height: 180px; }
  .radar-intro { padding: 14px 18px 16px; }
}


/* ============================================================
   HIGH-DENSITY SCREENS (retina / 4K) — sharpen 1px borders
   ============================================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .exp-card,
  .cert-card,
  .link-card,
  .glass {
    border-width: 0.5px;
  }
}


/* ============================================================
   LARGE LAPTOPS / DESKTOPS (1440px+) — gently scale up
   ============================================================ */
@media (min-width: 1440px) {
  .hero-name { font-size: clamp(6rem, 9vw, 8rem); }
  .content-section { max-width: 1320px; }
}