/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: 'Source Sans 3', system-ui, sans-serif; overflow-x: hidden; }
body { background-color: #0a0a0f; color: #e2e8f0; overflow-x: hidden; }

h1, h2, h3, h4, h5, h6 { font-family: 'Fraunces', Georgia, serif; }
.gradient-text { font-family: 'Fraunces', Georgia, serif; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 3px; }

/* ── Glass card ── */
.glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
}
.glass-hover {
  transition: all 0.3s ease;
}
.glass-hover:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(99,102,241,0.4);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(99,102,241,0.15);
}

/* ── Gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, #818cf8 0%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Gradient border ── */
.gradient-border {
  position: relative;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #6366f1, #34d399);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Noise texture overlay ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ── Ambient glows ── */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.9;
}

/* ── Nav link underline ── */
.nav-link {
  position: relative;
  transition: color 0.2s;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #34d399);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* ── Dropdown solid background ── */
.dropdown-solid {
  background: #13131f;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.more-btn {
  position: relative;
  transition: color 0.2s;
}
.more-btn::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #34d399);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.more-btn.more-active { color: #e2e8f0; }
.more-btn.more-active::after { width: 100%; }

/* ── Timeline ── */
.timeline-item::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #6366f1, transparent);
}

/* ── Skill badge ── */
.skill-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 500;
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.25);
  color: #a5b4fc;
  transition: all 0.2s;
  cursor: default;
}
.skill-badge:hover {
  background: rgba(99,102,241,0.22);
  border-color: rgba(99,102,241,0.5);
  color: #c7d2fe;
  transform: translateY(-2px);
}

/* ── Tech badge (project cards) ── */
.tech-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
  background: rgba(52,211,153,0.1);
  border: 1px solid rgba(52,211,153,0.2);
  color: #6ee7b7;
}

/* ── Btn primary ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 4px 20px rgba(99,102,241,0.35);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(99,102,241,0.5);
  background: linear-gradient(135deg, #818cf8, #6366f1);
}

/* ── Btn outline ── */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  background: transparent;
  color: #a5b4fc;
  border: 1px solid rgba(99,102,241,0.4);
  cursor: pointer;
  transition: all 0.25s;
}
.btn-outline:hover {
  background: rgba(99,102,241,0.1);
  border-color: rgba(99,102,241,0.7);
  color: #c7d2fe;
  transform: translateY(-2px);
}

/* ── Section heading ── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #818cf8;
  margin-bottom: 0.75rem;
}
.section-label::before,
.section-label::after {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #34d399);
  border-radius: 2px;
}
.section-label[data-animated='1']::before,
.section-label[data-animated='1']::after {
  display: none;
}

/* ── Placeholder notice ── */
.placeholder-note {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.3);
  color: #fbbf24;
  border-radius: 4px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* ── Animated profile ring ── */
.profile-ring-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.profile-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #6366f1, #34d399, #818cf8, #6366f1);
  animation: spin-ring 3s linear infinite;
  z-index: 0;
}
.profile-ring::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #0f0f1a;
}
@keyframes spin-ring {
  to { transform: rotate(360deg); }
}

/* ── Mobile menu ── */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
#mobile-menu.open {
  max-height: 500px;
}

/* ── Mobile card limiting (CSS nth-child, no JS screen-check needed) ── */
@media (max-width: 639px) {
  #blog-grid:not(.show-all) article:nth-child(n+4),
  #yt-grid:not(.show-all) article:nth-child(n+4),
  #gh-grid:not(.show-all) article:nth-child(n+4) {
    display: none !important;
  }
}

/* ── Experience read-more (mobile only via CSS) ── */
@media (max-width: 639px) {
  .exp-ul-wrap {
    position: relative;
    max-height: 140px;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .exp-ul-wrap.expanded {
    max-height: 1200px;
  }
  .exp-ul-wrap:not(.expanded)::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 48px;
    background: linear-gradient(to bottom, transparent, #0f172a);
    display: inline-block;
  }
}

/* ── Skill panel badge collapse (mobile only) ── */
@media (max-width: 639px) {
  .skill-tags {
    position: relative;
    max-height: 76px;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .skill-tags.expanded {
    max-height: 600px;
  }
  .skill-tags:not(.expanded)::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 32px;
    background: linear-gradient(to bottom, transparent, #1e293b);
    pointer-events: none;
  }
  .skill-read-more { display: inline-block; }
}
@media (min-width: 640px) {
  .skill-read-more { display: none !important; }
  .exp-read-more  { display: none !important; }
  .show-more-wrap { display: none !important; }
}

/* ── Tighter section spacing on mobile ── */
@media (max-width: 639px) {
  section[id]:not(#home) {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}
@media (max-width: 639px) {
  .about-bio-wrap {
    position: relative;
    max-height: 100px;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .about-bio-wrap.expanded {
    max-height: 1200px;
  }
  .about-bio-wrap:not(.expanded)::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 48px;
    background: linear-gradient(to bottom, transparent, #0f0f1a); display: inline-block; }
}
@media (min-width: 640px) {
  .about-read-more { display: none !important; }
}

/* ── Hero entrance animations ── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-animate {
  animation: fadeSlideUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-d1 { animation-delay: 0.05s; }
.hero-d2 { animation-delay: 0.18s; }
.hero-d3 { animation-delay: 0.30s; }
.hero-d4 { animation-delay: 0.42s; }
.hero-d5 { animation-delay: 0.54s; }
.hero-d6 { animation-delay: 0.64s; }
.hero-d7 { animation-delay: 0.74s; }
.hero-d8 { animation-delay: 0.84s; }
.hero-d9 { animation-delay: 0.94s; }

/* ── Typewriter cursor (border-right on element, no layout shift) ── */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.typing-active::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.8em;
  background: #818cf8;
  border-radius: 2px;
  margin-left: 3px;
  vertical-align: middle;
  animation: blink-cursor 0.75s step-end infinite;
}
.typing-cursor {
  display: none;
}

/* ── Floating glow orbs ── */
@keyframes float-slow {
  0%, 100% { transform: translateY(0px) scale(1); }
  50%       { transform: translateY(-22px) scale(1.04); }
}
@keyframes float-medium {
  0%, 100% { transform: translateY(0px) scale(1); }
  50%       { transform: translateY(16px) scale(0.96); }
}
.float-1 { animation: float-slow 8s ease-in-out infinite; }
.float-2 { animation: float-medium 10s ease-in-out infinite 1s; }
.float-3 { animation: float-slow 12s ease-in-out infinite 3s; }

/* ── Animated gradient text (hero name) ── */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-text-anim {
  background: linear-gradient(270deg, #818cf8, #34d399, #a78bfa, #818cf8);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 5s ease infinite;
}

/* ── Skill badge pop-in ── */
@keyframes badge-pop {
  from { opacity: 0; transform: scale(0.75) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.badge-pop {
  opacity: 0;
  animation: badge-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Scroll-reveal for section elements ── */
.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Counter stat pulse ── */
@keyframes stat-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.stat-popped { animation: stat-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ── Smooth underline for section labels ── */
.section-label-line {
  display: inline-block;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #34d399);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  vertical-align: middle;
  margin-right: 0.5rem;
}
.section-label-line.expanded { width: 1.5rem; }

/* ════════════════════════════════════════════
   LIGHT MODE
════════════════════════════════════════════ */
html[data-theme="light"] body {
  background-color: #f8fafc;
  color: #1e293b;
}
html[data-theme="light"] body::before { opacity: 0.12; }

/* Section backgrounds */
html[data-theme="light"] .bg-surface-900 { background-color: #f8fafc !important; }
html[data-theme="light"] .bg-surface-800 { background-color: #f1f5f9 !important; }
html[data-theme="light"] .bg-surface-700 { background-color: #e8edf5 !important; }

/* Scrollbar */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9; }

/* Glass */
html[data-theme="light"] .glass {
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(99,102,241,0.14) !important;
}
html[data-theme="light"] .glass-hover:hover {
  background: rgba(255,255,255,0.97) !important;
  border-color: rgba(99,102,241,0.35) !important;
  box-shadow: 0 20px 40px rgba(99,102,241,0.1) !important;
}

/* Nav */
html[data-theme="light"] header .glass {
  background: rgba(248,250,252,0.95) !important;
  border-color: rgba(0,0,0,0.07) !important;
}
html[data-theme="light"] .nav-link,
html[data-theme="light"] .more-btn { color: #475569; }
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active,
html[data-theme="light"] .more-btn.more-active { color: #1e293b !important; }
html[data-theme="light"] #theme-toggle { color: #475569; }
html[data-theme="light"] #theme-toggle:hover { color: #1e293b; background: rgba(0,0,0,0.05); }

/* Dropdown */
html[data-theme="light"] .dropdown-solid {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
}
html[data-theme="light"] #more-dropdown a { color: #475569; }
html[data-theme="light"] #more-dropdown a:hover { background: rgba(99,102,241,0.07); color: #1e293b; }

/* Mobile menu */
html[data-theme="light"] #mobile-menu a { color: #475569; }
html[data-theme="light"] #mobile-menu a:hover { background: rgba(99,102,241,0.06); color: #1e293b; }

/* Text overrides */
html[data-theme="light"] .text-white { color: #0f172a !important; }
html[data-theme="light"] .text-slate-200 { color: #1e293b !important; }
html[data-theme="light"] .text-slate-300 { color: #334155 !important; }
html[data-theme="light"] .text-slate-400 { color: #475569 !important; }
html[data-theme="light"] .text-slate-500,
html[data-theme="light"] .text-slate-600 { color: #64748b !important; }

/* Borders */
html[data-theme="light"] .border-surface-800 { border-color: #e2e8f0 !important; }

/* Profile ring */
html[data-theme="light"] .profile-ring::after { background: #f1f5f9; }

/* Glow orbs — soften in light */
html[data-theme="light"] .glow-orb { opacity: 0.25; }

/* Skill badges */
html[data-theme="light"] .skill-badge {
  background: rgba(99,102,241,0.08) !important;
  border-color: rgba(99,102,241,0.22) !important;
  color: #4338ca !important;
}
html[data-theme="light"] .skill-badge:hover {
  background: rgba(99,102,241,0.15) !important;
}
html[data-theme="light"] .tech-badge {
  background: rgba(16,185,129,0.08) !important;
  border-color: rgba(16,185,129,0.25) !important;
  color: #047857 !important;
}

/* Buttons */
html[data-theme="light"] .btn-primary { box-shadow: 0 4px 20px rgba(99,102,241,0.25); }
html[data-theme="light"] .btn-outline {
  color: #4f46e5;
  border-color: rgba(99,102,241,0.35);
}
html[data-theme="light"] .btn-outline:hover {
  background: rgba(99,102,241,0.08);
  color: #3730a3;
}

/* Fade overlays — match light bg */
html[data-theme="light"] .exp-ul-wrap:not(.expanded)::after {
  background: linear-gradient(to bottom, transparent, #f8fafc);
}
html[data-theme="light"] .skill-tags:not(.expanded)::after {
  background: linear-gradient(to bottom, transparent, #f8fafc);
}
html[data-theme="light"] .about-bio-wrap:not(.expanded)::after {
  background: linear-gradient(to bottom, transparent, #f8fafc);
}

/* Typewriter cursor */
html[data-theme="light"] .typing-active::after { background: #6366f1; }

/* Section label lines */
html[data-theme="light"] .section-label-line {
  background: linear-gradient(90deg, #6366f1, #10b981);
}

/* Navbar scroll bg */
html[data-theme="light"] #navbar .glass[style] {
  background-color: rgba(248,250,252,0.97) !important;
}

/* ── Section Wave Dividers ── */
.section-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 2;
  pointer-events: none;
}
.section-wave svg { display: block; width: 100%; height: 50px; }
.wave-fill-800 { fill: #0f0f1a; }
.wave-fill-900 { fill: #0a0a0f; }
html[data-theme="light"] .wave-fill-800 { fill: #f1f5f9; }
html[data-theme="light"] .wave-fill-900 { fill: #f8fafc; }

/* ── Back-to-top progress ring ── */
#back-to-top {
  position: fixed !important;
  background: rgba(10, 10, 20, 0.88);
  border: 1px solid rgba(99, 102, 241, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(99, 102, 241, 0.15);
  backdrop-filter: blur(8px);
}
#back-to-top:hover {
  border-color: rgba(99, 102, 241, 0.6);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.3);
}
.progress-ring { transform: rotate(-90deg); }
.progress-ring-bar {
  stroke-dasharray: 113.097;
  stroke-dashoffset: 113.097;
  transition: stroke-dashoffset 0.15s linear;
}
html[data-theme="light"] #back-to-top {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(99, 102, 241, 0.3);
  color: #4f46e5;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 12px rgba(99, 102, 241, 0.1);
}
html[data-theme="light"] .progress-ring-bar { stroke: #4f46e5; }