/* ============================================================
   THEME: LIQUID GLASS
   Apple-inspired dark fluid UI with glassmorphism and
   animated gradient orbs. Swap this file to change theme.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Design tokens ────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:             #07070f;
  --bg-2:           #0d0d1a;

  /* Glass surfaces */
  --glass-bg:           rgba(255, 255, 255, 0.042);
  --glass-bg-hover:     rgba(255, 255, 255, 0.075);
  --glass-border:       rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.16);

  /* Orb palette */
  --orb-1: #5b2efc;
  --orb-2: #1dbff2;
  --orb-3: #fc2e78;
  --orb-4: #2efc8f;

  /* Text */
  --text:         rgba(255, 255, 255, 0.92);
  --text-muted:   rgba(255, 255, 255, 0.70);
  --text-subtle:  rgba(255, 255, 255, 0.38);

  /* Brand accents */
  --accent-purple: #7c5cfc;
  --accent-cyan:   #38d9f5;
  --accent-pink:   #ff5fa0;
  --accent-green:  #2efc8f;

  /* Gradients */
  --grad-hero:          linear-gradient(135deg, #fff 0%, #ddd8ff 25%, #a78bfa 50%, #38bdf8 75%, #fff 100%);
  --grad-purple-cyan:   linear-gradient(135deg, #7c5cfc, #38d9f5);
  --grad-cyan-green:    linear-gradient(135deg, #38d9f5, #2efc8f);
  --grad-pink-purple:   linear-gradient(135deg, #ff5fa0, #7c5cfc);
  --grad-featured-card: linear-gradient(135deg, rgba(124,92,252,0.12), rgba(56,217,245,0.06));

  /* Glows */
  --glow-purple: rgba(124, 92, 252, 0.22);
  --glow-cyan:   rgba(56,  217, 245, 0.22);
  --glow-pink:   rgba(255, 95,  160, 0.22);
  --glow-green:  rgba(46,  252, 143, 0.22);

  /* Cursor position (updated by JS) */
  --cursor-x: 50vw;
  --cursor-y: 50vh;
}

/* ── Global ───────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
}

/* Ambient cursor glow */
body::before {
  content: '';
  position: fixed;
  width: 800px; height: 800px;
  left: calc(var(--cursor-x) - 400px);
  top:  calc(var(--cursor-y) - 400px);
  background: radial-gradient(circle, rgba(124,92,252,0.065) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  transition: left 0.45s ease, top 0.45s ease;
}

/* Subtle dot grid */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

main, nav, .footer { position: relative; z-index: 1; }

/* ── Background orbs ──────────────────────────────────────── */
.bg-canvas {
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none; overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  will-change: transform;
}

.orb-1 { width: 650px; height: 650px; background: var(--orb-1); top: -15%;  left: -8%;   animation: orb1 20s ease-in-out infinite; }
.orb-2 { width: 520px; height: 520px; background: var(--orb-2); top: 25%;   right: -12%; animation: orb2 24s ease-in-out infinite; }
.orb-3 { width: 430px; height: 430px; background: var(--orb-3); bottom: 8%; left: 18%;   animation: orb3 18s ease-in-out infinite; }
.orb-4 { width: 370px; height: 370px; background: var(--orb-4); top: 55%;   right: 28%;  animation: orb4 22s ease-in-out infinite; }

@keyframes orb1 {
  0%, 100% { transform: translate(0,   0)   scale(1);    }
  25%       { transform: translate(6%,  10%) scale(1.08); }
  50%       { transform: translate(-4%, 6%)  scale(0.94); }
  75%       { transform: translate(10%, -6%) scale(1.05); }
}
@keyframes orb2 {
  0%, 100% { transform: translate(0,   0)    scale(1);    }
  33%       { transform: translate(-8%, 5%)   scale(1.1);  }
  66%       { transform: translate(5%,  -10%) scale(0.92); }
}
@keyframes orb3 {
  0%, 100% { transform: translate(0,   0)   scale(1);    }
  20%       { transform: translate(-5%, -8%) scale(0.94); }
  60%       { transform: translate(8%,  5%)  scale(1.1);  }
  80%       { transform: translate(-3%, 3%)  scale(1.02); }
}
@keyframes orb4 {
  0%, 100% { transform: translate(0,  0)    scale(1);    }
  40%       { transform: translate(6%, -6%)  scale(1.08); }
  70%       { transform: translate(-8%, 8%)  scale(0.94); }
}

/* ── Nav ──────────────────────────────────────────────────── */
.nav {
  background: rgba(7, 7, 15, 0.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav--scrolled {
  background: rgba(7, 7, 15, 0.65);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 40px rgba(0,0,0,0.35);
}

.nav-logo {
  font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em;
  background: var(--grad-purple-cyan);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-links a         { color: var(--text-muted); }
.nav-links a:hover,
.nav-links a.active  { color: var(--text); background: rgba(255,255,255,0.07); }
.nav-menu-btn span   { background: var(--text-muted); }

.mobile-nav {
  background: rgba(7, 7, 15, 0.88);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-bottom: 1px solid var(--glass-border);
}
.mobile-nav-link       { color: var(--text-muted); }
.mobile-nav-link:hover { color: var(--text); background: var(--glass-bg); }

/* ── Glass card ───────────────────────────────────────────── */
.glass-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  overflow: hidden;
  transition:
    transform  0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 20px 60px rgba(0,0,0,0.35);
}

/* Iridescent top-edge highlight */
.glass-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent            0%,
    rgba(124, 92,252,0.7) 15%,
    rgba( 56,217,245,0.6) 35%,
    rgba(255, 95,160,0.5) 55%,
    rgba( 46,252,143,0.5) 75%,
    rgba(124, 92,252,0.4) 90%,
    transparent           100%
  );
  z-index: 1; pointer-events: none;
}

/* Light-sweep shimmer on hover */
.glass-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    110deg,
    transparent           35%,
    rgba(255,255,255,0.04) 50%,
    transparent           65%
  );
  transform: translateX(-120%);
  transition: none;
  pointer-events: none;
}
.glass-card:hover::after {
  transform: translateX(120%);
  transition: transform 0.85s ease;
}

.glass-card:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.1) inset,
    0 30px 80px rgba(0,0,0,0.5),
    0 0 50px rgba(124,92,252,0.07);
}

/* ── Avatar ───────────────────────────────────────────────── */

/* Outer wrapper rotates the gradient ring */
.avatar-wrapper {
  background: conic-gradient(from 0deg, #7c5cfc, #38d9f5, #ff5fa0, #2efc8f, #38d9f5, #7c5cfc);
  animation: ring-spin 6s linear infinite;
  box-shadow: 0 0 32px rgba(124,92,252,0.5), 0 0 64px rgba(56,217,245,0.18);
}

/* Inner div counter-rotates at the same rate → image stays perfectly upright */
.avatar-inner {
  background: var(--bg);
  animation: ring-spin-reverse 6s linear infinite;
}

@keyframes ring-spin         { to { transform: rotate(360deg);  } }
@keyframes ring-spin-reverse { to { transform: rotate(-360deg); } }

/* ── Hero ─────────────────────────────────────────────────── */
.section-hero { z-index: 1; }

.hero-badge {
  background: rgba(124,92,252,0.14);
  border: 1px solid rgba(124,92,252,0.28);
  color: #a78bfa;
  backdrop-filter: blur(10px);
}

.available-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-green);
  flex-shrink: 0;
  animation: pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0   rgba(46,252,143,0.45); }
  50%       { opacity: 0.8; box-shadow: 0 0 0 7px rgba(46,252,143,0); }
}

.hero-name {
  background: var(--grad-hero);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 280% 280%;
  animation:
    hero-reveal 1.1s cubic-bezier(0.34, 1.2, 0.64, 1) 0.2s both,
    grad-shift  7s ease infinite 1.8s;
}

@keyframes hero-reveal {
  from { opacity: 0; transform: translateY(30px) scale(0.94); filter: blur(14px); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0);   }
}
@keyframes grad-shift {
  0%, 100% { background-position: 0%   50%; }
  50%       { background-position: 100% 50%; }
}

.hero-title { color: var(--text-muted); animation: hero-reveal 1s cubic-bezier(0.34,1.2,0.64,1) 0.4s both; }
.hero-bio   { color: var(--text-muted); animation: hero-reveal 1s cubic-bezier(0.34,1.2,0.64,1) 0.6s both; }
.hero-social { animation: hero-reveal 1s ease 0.8s both; }
.hero-cta    { animation: hero-reveal 1s ease 1s   both; }

.scroll-line {
  background: linear-gradient(to bottom, transparent, var(--accent-purple), transparent);
  animation: scroll-breathe 2s ease-in-out infinite;
}
.hero-scroll-hint { color: var(--text-subtle); }
@keyframes scroll-breathe {
  0%, 100% { opacity: 0.28; transform: scaleY(1);    }
  50%       { opacity: 0.8;  transform: scaleY(1.25); }
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
  background: var(--grad-purple-cyan);
  color: #fff;
  box-shadow: 0 0 32px rgba(124,92,252,0.32);
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 55px rgba(124,92,252,0.5);
}

.btn-ghost {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
}
.btn-ghost:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  color: var(--text);
  transform: translateY(-1px);
}

/* ── Social links ─────────────────────────────────────────── */
.social-link {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
}
.social-link:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  color: var(--text);
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* ── Section titles ───────────────────────────────────────── */
.section-title { font-size: clamp(2rem, 4vw, 2.8rem); }

#about        .section-title { background: var(--grad-purple-cyan);  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#experience   .section-title { background: var(--grad-cyan-green);   -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#projects     .section-title { background: linear-gradient(135deg, #2efc8f, #38d9f5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#skills       .section-title { background: var(--grad-pink-purple);  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#publications .section-title { background: linear-gradient(135deg, #ff5fa0, #7c5cfc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#certifications .section-title { background: linear-gradient(135deg, #38d9f5, #7c5cfc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#contact      .section-title {
  background: var(--grad-hero); background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: grad-shift 4s ease infinite;
}

.section-subtitle { color: var(--text-muted); }

/* ── About ────────────────────────────────────────────────── */
.about-text     { color: var(--text-muted); }
.stat-value     { background: var(--grad-purple-cyan); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-label     { color: var(--text-subtle); }
.highlight-card h3 { color: var(--text); }
.highlight-card p  { color: var(--text-muted); }

/* ── Timeline ─────────────────────────────────────────────── */
.timeline-section-label { color: var(--text-subtle); border-bottom: 1px solid var(--glass-border); }
.timeline-line          { background: linear-gradient(to bottom, var(--glass-border), transparent); }
.timeline-dot           { background: var(--accent-purple); box-shadow: 0 0 14px var(--glow-purple); }
.timeline-dot--current  { background: var(--accent-green); box-shadow: 0 0 14px var(--glow-green); animation: pulse-dot 2.2s ease-in-out infinite; }
.timeline-dot--edu      { background: var(--accent-cyan); box-shadow: 0 0 14px var(--glow-cyan); }
.timeline-role          { color: var(--text); }
.timeline-company       { color: var(--accent-cyan); }
.timeline-meta          { color: var(--text-subtle); }
.timeline-desc            { color: var(--text-muted); }
.timeline-gpa             { color: var(--accent-green); }
.timeline-highlights li   { color: var(--text-muted); }

/* ── Badges ───────────────────────────────────────────────── */
.badge--current { background: rgba(46,252,143,0.12); border: 1px solid rgba(46,252,143,0.25); color: var(--accent-green); }
.badge--edu     { background: rgba(56,217,245,0.10); border: 1px solid rgba(56,217,245,0.22); color: var(--accent-cyan); }

/* ── Projects ─────────────────────────────────────────────── */
.project-card--featured { background: var(--grad-featured-card); border-color: rgba(124,92,252,0.18); }
.project-featured-badge { background: rgba(124,92,252,0.18); border: 1px solid rgba(124,92,252,0.32); color: #b39dfa; }
.project-name           { color: var(--text); }
.project-stars          { color: #fbbf24; }
.project-desc           { color: var(--text-muted); }
.topic-tag              { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); color: var(--text-muted); }
.project-lang           { color: var(--text-muted); }
.project-link           { color: var(--text-muted); }
.project-link:hover     { color: var(--text); }
.project-link--demo     { color: var(--accent-cyan) !important; }

/* ── Skills ───────────────────────────────────────────────── */
.skill-group h3   { color: var(--text-muted); }
.skill-tag        { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.07); color: var(--text-muted); }
.skill-tag:hover  { background: rgba(124,92,252,0.14); border-color: rgba(124,92,252,0.28); color: #b39dfa; transform: translateY(-1px); }

/* ── Publications ─────────────────────────────────────────── */
.pub-venue  { background: rgba(255,95,160,0.11); border: 1px solid rgba(255,95,160,0.22); color: var(--accent-pink); }
.pub-date   { color: var(--text-subtle); }
.pub-title  { color: var(--text); }
.pub-desc   { color: var(--text-muted); }

/* ── Certifications ───────────────────────────────────────── */
.cert-issuer { color: var(--accent-cyan); }
.cert-name   { color: var(--text); }
.cert-date   { color: var(--text-subtle); }

/* ── Contact ──────────────────────────────────────────────── */
.contact-subtitle { color: var(--text-muted); }
.contact-card     { color: var(--text-muted); }
.contact-card:hover {
  transform: translateY(-5px) scale(1.04);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0,0,0,0.45), 0 0 50px var(--glow-purple);
}

/* ── Footer ───────────────────────────────────────────────── */
.footer { color: var(--text-subtle); border-top: 1px solid var(--glass-border); }

/* ── Text selection ───────────────────────────────────────── */
::selection { background: rgba(124,92,252,0.3); color: #fff; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(124,92,252,0.38); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(124,92,252,0.6); }