:root {
  --bg-ink: #0a0a0f;
}

* { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-ink);
  overflow-x: hidden;
}

.bg-ink { background-color: var(--bg-ink); }

.font-display { font-family: 'Space Grotesk', sans-serif; }

/* ---------- gradient text / accents ---------- */
.gradient-text {
  background: linear-gradient(90deg, #8b5cf6, #ec4899, #22d3ee);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 6s linear infinite;
}

@keyframes shine {
  to { background-position: 200% center; }
}

/* ---------- background blobs ---------- */
.blob {
  position: fixed;
  border-radius: 9999px;
  filter: blur(110px);
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}
.blob-1 { width: 32rem; height: 32rem; top: -10rem; left: -10rem; background: #8b5cf6; animation: float1 16s ease-in-out infinite; }
.blob-2 { width: 28rem; height: 28rem; top: 30%; right: -12rem; background: #ec4899; animation: float2 18s ease-in-out infinite; }
.blob-3 { width: 26rem; height: 26rem; bottom: -10rem; left: 20%; background: #22d3ee; animation: float3 20s ease-in-out infinite; }

@keyframes float1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(60px,80px); } }
@keyframes float2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-70px,60px); } }
@keyframes float3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(50px,-60px); } }

/* ---------- cursor glow ---------- */
.cursor-glow {
  position: fixed;
  width: 380px;
  height: 380px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(139,92,246,0.18), transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: opacity .3s;
  will-change: transform;
}

/* ---------- navbar ---------- */
.nav-bar {
  background: rgba(10,10,15,0.6);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-link { position: relative; transition: color .2s; }
.nav-link:hover { color: #fff; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px;
  background: linear-gradient(90deg,#8b5cf6,#ec4899); transition: width .25s;
}
.nav-link:hover::after { width: 100%; }

/* ---------- buttons ---------- */
.btn-gradient {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 1.6rem; border-radius: 9999px; font-weight: 600; font-size: .9rem;
  color: #fff; background: linear-gradient(90deg,#8b5cf6,#ec4899);
  box-shadow: 0 0 24px rgba(139,92,246,0.35);
  transition: transform .2s, box-shadow .2s;
}
.btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 0 32px rgba(236,72,153,0.5); }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 1.6rem; border-radius: 9999px; font-weight: 600; font-size: .9rem;
  color: #e5e7eb; border: 1px solid rgba(255,255,255,0.15);
  transition: border-color .2s, background .2s, transform .2s;
}
.btn-outline:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.04); transform: translateY(-2px); }

/* ---------- pills / badges ---------- */
.pill {
  font-size: .75rem; font-weight: 500; padding: .4rem .9rem; border-radius: 9999px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #cbd5e1;
}
.skill-pill {
  font-size: .8rem; padding: .4rem 1rem; border-radius: 9999px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: #e2e8f0; transition: border-color .2s, color .2s;
}
.skill-pill:hover { border-color: #ec4899; color: #fff; }

/* ---------- glass cards ---------- */
.glass-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.25rem;
  backdrop-filter: blur(12px);
  transition: transform .25s, border-color .25s;
}
.glass-card:hover { transform: translateY(-4px); border-color: rgba(139,92,246,0.4); }

.info-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem;
  padding: 1.25rem;
  transition: transform .25s, border-color .25s;
}
.info-card:hover { transform: translateY(-3px); border-color: rgba(236,72,153,0.4); }

.contact-card {
  display: block;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem;
  padding: 1.5rem 1rem;
  transition: transform .25s, border-color .25s;
}
.contact-card:hover { transform: translateY(-4px); border-color: rgba(34,211,238,0.4); }

/* ---------- section headers ---------- */
.section-tag {
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #ec4899; margin-bottom: .5rem;
}
.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700; color: #f8fafc;
}

/* ---------- hero avatar ---------- */
.avatar-ring {
  width: 280px; height: 280px; border-radius: 9999px;
  background: linear-gradient(135deg,#8b5cf6,#ec4899,#22d3ee);
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
  animation: spin-slow 10s linear infinite;
  box-shadow: 0 0 60px rgba(139,92,246,0.35);
}
.avatar-core {
  width: 100%; height: 100%; border-radius: 9999px;
  background: #0e0e16;
  display: flex; align-items: center; justify-content: center;
  animation: spin-slow-rev 10s linear infinite;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes spin-slow-rev { to { transform: rotate(-360deg); } }

.float-badge {
  position: absolute;
  font-size: .75rem; font-weight: 500;
  padding: .45rem .9rem; border-radius: 9999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; gap: .4rem;
  color: #f1f5f9;
  animation: bob 5s ease-in-out infinite;
}
.badge-1 { top: 4%; left: -2%; animation-delay: 0s; }
.badge-2 { top: 60%; left: -10%; animation-delay: .6s; }
.badge-3 { top: 8%; right: -6%; animation-delay: 1.2s; }
.badge-4 { bottom: 6%; right: -4%; animation-delay: 1.8s; }
.badge-5 { bottom: 26%; left: 50%; animation-delay: 2.4s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- scroll cue ---------- */
.scroll-cue {
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  color: #64748b; animation: bounce-y 2s ease-in-out infinite;
}
@keyframes bounce-y { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* ---------- project cards ---------- */
.project-card {
  border-radius: 1.5rem; overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform .3s, border-color .3s;
}
.project-card:hover { transform: translateY(-6px); border-color: rgba(139,92,246,0.45); }
.project-cover {
  height: 160px; display: flex; align-items: center; justify-content: center;
}
.proj-cover-1 { background: linear-gradient(135deg,#7c3aed,#db2777); }
.proj-cover-2 { background: linear-gradient(135deg,#0891b2,#7c3aed); }

/* ---------- education timeline ---------- */
.timeline-item { position: relative; }
.timeline-dot {
  position: absolute; left: -2.1rem; top: .3rem;
  width: .7rem; height: .7rem; border-radius: 9999px;
  background: linear-gradient(135deg,#8b5cf6,#ec4899);
  box-shadow: 0 0 0 4px rgba(139,92,246,0.15);
}

/* ---------- typewriter ---------- */
.typewriter-cursor { animation: blink 1s step-start infinite; color: #ec4899; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- reveal on scroll ---------- */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.show { opacity: 1; transform: translateY(0); }

@media (max-width: 768px) {
  .float-badge { display: none; }
}