/* ============================================================
   CSS CUSTOM PROPERTIES — DARK & LIGHT THEMES
   ============================================================ */
:root {
  color-scheme: dark;
  --bg-base:        #060c1a;
  --bg-layer:       #0a1225;
  --glass-bg:       rgba(255,255,255,0.032);
  --glass-bg-hover: rgba(255,255,255,0.062);
  --glass-border:   rgba(255,255,255,0.07);
  --glass-border-accent: rgba(99,102,241,0.38);
  --glass-shadow:   0 8px 32px rgba(0,0,0,0.45);
  --glass-inset:    inset 0 1px 0 rgba(255,255,255,0.06);
  --blur:           blur(24px) saturate(160%);
  --text-1:         #f0f4ff;
  --text-2:         #94a3b8;
  --text-3:         #64748b;
  --accent:         #6366f1;
  --accent-2:       #a855f7;
  --accent-3:       #06b6d4;
}

[data-theme="light"] {
  color-scheme: light;
  --bg-base:        #e8f0fe;
  --bg-layer:       #dce8fb;
  --glass-bg:       rgba(255,255,255,0.28);
  --glass-bg-hover: rgba(255,255,255,0.45);
  --glass-border:   rgba(255,255,255,0.6);
  --glass-border-accent: rgba(99,102,241,0.3);
  --glass-shadow:   0 8px 32px rgba(99,102,241,0.08);
  --glass-inset:    inset 0 1px 0 rgba(255,255,255,0.7);
  --text-1:         #0f172a;
  --text-2:         #334155;
  --text-3:         #64748b;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: "Manrope", sans-serif;
  background: var(--bg-base);
  color: var(--text-1);
  overflow-x: hidden;
  transition: background 0.4s ease, color 0.3s ease;
  line-height: 1.65;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ============================================================
   ANIMATED BACKGROUND
   ============================================================ */
.site-bg {
  position: fixed; inset: 0; z-index: -1;
  background: var(--bg-base);
  transition: background 0.4s ease;
  overflow: hidden;
}
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); pointer-events: none; will-change: transform;
  animation: blobDrift linear infinite alternate;
}
.blob-1 { width:55vw; height:55vw; max-width:700px; max-height:700px;
  background: radial-gradient(circle, rgba(99,102,241,.28) 0%, transparent 70%);
  top:-18%; left:-12%; animation-duration:20s; }
.blob-2 { width:45vw; height:45vw; max-width:580px; max-height:580px;
  background: radial-gradient(circle, rgba(168,85,247,.22) 0%, transparent 70%);
  top:22%; right:-10%; animation-duration:26s; animation-delay:-9s; }
.blob-3 { width:38vw; height:38vw; max-width:480px; max-height:480px;
  background: radial-gradient(circle, rgba(6,182,212,.18) 0%, transparent 70%);
  bottom:4%; left:28%; animation-duration:30s; animation-delay:-15s; }
.blob-4 { width:32vw; height:32vw; max-width:400px; max-height:400px;
  background: radial-gradient(circle, rgba(244,114,182,.16) 0%, transparent 70%);
  bottom:28%; right:8%; animation-duration:22s; animation-delay:-6s; }
@keyframes blobDrift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(35px,-28px) scale(1.06); }
  100% { transform: translate(-20px,35px) scale(0.94); }
}
[data-theme="light"] .blob-1 { background: radial-gradient(circle, rgba(99,102,241,.16) 0%, transparent 70%); }
[data-theme="light"] .blob-2 { background: radial-gradient(circle, rgba(168,85,247,.13) 0%, transparent 70%); }
[data-theme="light"] .blob-3 { background: radial-gradient(circle, rgba(6,182,212,.12) 0%, transparent 70%); }
[data-theme="light"] .blob-4 { background: radial-gradient(circle, rgba(244,114,182,.12) 0%, transparent 70%); }

/* ============================================================
   CORE GLASS MIXIN
   ============================================================ */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  transition: background .3s, border-color .3s, box-shadow .3s, transform .3s;
}
.glass:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-accent);
  box-shadow: var(--glass-shadow), 0 0 28px rgba(99,102,241,.18), var(--glass-inset);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.glass-nav {
  background: rgba(6,12,26,.42);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 30px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.04);
  position: sticky; top: 0; z-index: 100;
  transition: all .3s;
}
[data-theme="light"] .glass-nav {
  background: rgba(215,232,255,.52);
  border-bottom-color: rgba(255,255,255,.8);
  box-shadow: 0 4px 30px rgba(99,102,241,.08);
}

.nav-logo {
  display: inline-flex; align-items: center; gap: 2px;
  font-family: "Clash Display", "Syne", sans-serif;
  font-size: 1.35rem; font-weight: 700;
  letter-spacing: .04em; padding: 4px 6px; border-radius: 8px;
  background: transparent; border: none;
  transition: all .3s;
}
.nav-logo:hover { opacity: 0.85; transform: scale(1.02); }
.nav-logo-text  { color: var(--text-1); }
.nav-logo-accent { background: linear-gradient(90deg,#818cf8,#c084fc,#f472b6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

.nav-link {
  color: var(--text-2); font-size: .875rem; font-weight: 500;
  padding: 7px 13px; border-radius: 9px;
  border: 1px solid transparent; transition: all .22s;
}
.nav-link:hover, .nav-link.active {
  color: var(--text-1); background: var(--glass-bg);
  border-color: var(--glass-border); backdrop-filter: blur(10px);
}
.nav-link.active { border-color: var(--glass-border-accent); }

/* Icon buttons in nav */
.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
  background: var(--glass-bg); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border); color: var(--text-1);
  transition: all .3s;
}
.icon-btn:hover { background: var(--glass-bg-hover); border-color: var(--glass-border-accent); transform: scale(1.05); }
#theme-icon-moon, #theme-icon-sun { transition: opacity .3s, transform .3s; }

/* ============================================================
   HERO
   ============================================================ */
.hero-section {
  min-height: 100svh; display: flex; align-items: center;
  padding: clamp(5rem,10vh,8rem) 1.5rem clamp(3rem,6vh,5rem);
  position: relative; overflow: hidden;
}

/* Profile ring - clean static elegant */
.profile-ring {
  position: relative; flex-shrink: 0;
  padding: 3px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #a855f7, #06b6d4);
  box-shadow: 0 0 0 1px rgba(99,102,241,0.25), 0 8px 32px rgba(99,102,241,0.3), 0 0 60px rgba(168,85,247,0.15);
}
.profile-ring::before {
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border: 1px dashed rgba(99,102,241,.25);
  animation: ringRotate 12s linear infinite;
}
@keyframes ringRotate { 100%{ transform: rotate(360deg); } }
.profile-ring-inner { background: var(--bg-base); border-radius:50%; padding: 3px; transition: background .4s; }
.profile-ring-inner img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Typing headline */
.hero-title {
  font-family: "Clash Display", "Syne", sans-serif;
  font-size: clamp(2rem,7.5vw,4.8rem);
  font-weight: 700; line-height: 1.05;
  background: linear-gradient(135deg,#60a5fa 0%,#a78bfa 50%,#f472b6 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; min-height: 1.25em;
  letter-spacing: -0.01em;
}
.typing-cursor {
  background: linear-gradient(135deg,#818cf8,#c084fc);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation: blink .7s step-end infinite; font-weight:300;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Role badge */
.role-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--glass-bg); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border); border-radius: 999px;
  padding: 5px 15px; font-size: .72rem; font-weight: 600;
  color: var(--accent); letter-spacing: .1em; text-transform: uppercase;
  transition: all .4s ease;
}

/* Hero buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .88rem;
  padding: .78rem 1.8rem; border-radius: 12px;
  cursor: pointer; border: 1px solid transparent;
  transition: all .3s ease; position: relative; overflow: hidden;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg,rgba(255,255,255,.12),transparent);
  opacity:0; transition:opacity .3s;
}
.btn:hover::after { opacity:1; }
.btn-primary {
  background: linear-gradient(135deg,rgba(99,102,241,.78),rgba(139,92,246,.78));
  backdrop-filter: blur(16px);
  border-color: rgba(129,140,248,.5); color:#fff;
  box-shadow: 0 4px 24px rgba(99,102,241,.42), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 10px 36px rgba(99,102,241,.55); }
.btn-secondary {
  background: var(--glass-bg); backdrop-filter: blur(16px);
  border-color: var(--glass-border); color: var(--text-1);
  box-shadow: var(--glass-shadow);
}
.btn-secondary:hover { background: var(--glass-bg-hover); transform:translateY(-3px); border-color: var(--glass-border-accent); }

/* Stat boxes */
.stat-box {
  background: var(--glass-bg); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border); border-radius: 14px;
  padding: 1rem 1.4rem; text-align: center;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  transition: all .3s;
}
.stat-box:hover { transform:translateY(-4px); border-color: var(--glass-border-accent); }
.stat-num { font-family:"Clash Display","Syne",sans-serif; font-size:1.55rem; font-weight:700; }
.stat-lbl { font-size:.68rem; color:var(--text-3); letter-spacing:.08em; text-transform:uppercase; margin-top:2px; }

/* Scroll chevron */
.scroll-hint {
  position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--text-3); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase;
  animation: chevBounce 2s ease-in-out infinite;
}
@keyframes chevBounce { 0%,100%{transform:translateX(-50%) translateY(0)} 55%{transform:translateX(-50%) translateY(7px)} }

/* ============================================================
   SECTIONS
   ============================================================ */
.section-wrap { padding: clamp(3.5rem,7vw,6rem) 0; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 clamp(1rem,4vw,1.5rem); }

.section-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--glass-bg); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border); border-radius: 999px;
  padding: 5px 15px; font-size:.7rem; font-weight:700;
  color:var(--accent); letter-spacing:.1em; text-transform:uppercase; margin-bottom:.9rem;
}
.section-title {
  font-family:"Clash Display","Syne",sans-serif;
  font-size: clamp(1.5rem,4vw,2.2rem);
  font-weight:700; color:var(--text-1);
  letter-spacing: -0.01em;
}
.section-rule {
  width:52px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  margin-top:.6rem;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-card {
  background: var(--glass-bg);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  padding: clamp(1.5rem,4vw,2.5rem) clamp(1.5rem,4vw,3rem);
}
.about-tag {
  display:flex; align-items:center; gap:10px;
  background: var(--glass-bg); backdrop-filter:blur(10px);
  border:1px solid var(--glass-border); border-radius:10px;
  padding:9px 13px; font-size:.82rem;
  transition:all .22s;
}
.about-tag:hover { background:var(--glass-bg-hover); border-color:var(--glass-border-accent); }

/* ============================================================
   SKILLS
   ============================================================ */
.skills-group {
  background: var(--glass-bg); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border); border-radius:18px;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  padding:1.6rem;
}
.group-lbl {
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:1.1rem; padding-bottom:.65rem;
  border-bottom:1px solid var(--glass-border);
}
.skill-card {
  background: var(--glass-bg); backdrop-filter:blur(14px);
  border:1px solid var(--glass-border); border-radius:14px;
  padding:1.2rem .8rem; text-align:center; cursor:default;
  transition:all .3s; position:relative; overflow:hidden;
}
.skill-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(99,102,241,.1),transparent);
  opacity:0; transition:opacity .3s;
}
.skill-card:hover { background:var(--glass-bg-hover); border-color:var(--glass-border-accent); transform:translateY(-6px) scale(1.03); box-shadow:0 14px 30px rgba(99,102,241,.22); }
.skill-card:hover::before { opacity:1; }

/* ============================================================
   PROJECTS
   ============================================================ */
.project-card {
  background: var(--glass-bg); backdrop-filter:var(--blur);
  border:1px solid var(--glass-border); border-radius:18px;
  box-shadow:var(--glass-shadow), var(--glass-inset);
  transition:all .35s; position:relative; overflow:hidden;
}
.project-card::after {
  content:''; position:absolute;
  top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));
  opacity:0; transition:opacity .3s;
}
.project-card:hover { background:var(--glass-bg-hover); border-color:var(--glass-border-accent); transform:translateY(-8px); box-shadow:0 24px 50px rgba(99,102,241,.22); }
.project-card:hover::after { opacity:1; }

.icon-box {
  width:42px; height:42px; border-radius:11px; flex-shrink:0;
  background:var(--glass-bg); backdrop-filter:blur(8px);
  border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center;
  transition:all .3s;
}
.project-card:hover .icon-box { background:rgba(99,102,241,.22); border-color:var(--glass-border-accent); }

/* Tags */
.tag {
  display:inline-block; font-size:.67rem; font-weight:600;
  padding:3px 11px; border-radius:999px;
  backdrop-filter:blur(8px); border:1px solid transparent;
}
.tag-blue   { background:rgba(59,130,246,.14); color:#60a5fa; border-color:rgba(59,130,246,.3); }
.tag-yellow { background:rgba(234,179,8,.14);  color:#fbbf24; border-color:rgba(234,179,8,.3); }
.tag-pink   { background:rgba(236,72,153,.14); color:#f472b6; border-color:rgba(236,72,153,.3); }
.tag-green  { background:rgba(34,197,94,.14);  color:#4ade80; border-color:rgba(34,197,94,.3); }
.tag-purple { background:rgba(168,85,247,.14); color:#c084fc; border-color:rgba(168,85,247,.3); }
.tag-orange { background:rgba(249,115,22,.14); color:#fb923c; border-color:rgba(249,115,22,.3); }

/* Project action buttons */
.proj-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  font-size:.78rem; font-weight:600; padding:.52rem 1rem; border-radius:9px;
  cursor:pointer; transition:all .25s;
  background:var(--glass-bg); backdrop-filter:blur(10px);
  border:1px solid var(--glass-border); color:var(--text-1);
}
.proj-btn:hover { background:var(--glass-bg-hover); border-color:var(--glass-border-accent); }
.proj-btn-accent {
  background:linear-gradient(135deg,rgba(99,102,241,.72),rgba(139,92,246,.72));
  border-color:rgba(129,140,248,.45); color:#1e1d1d;
  box-shadow:0 4px 16px rgba(99,102,241,.32);
}
.proj-btn-accent:hover { box-shadow:0 8px 26px rgba(99,102,241,.52); transform:translateY(-2px); }

/* ============================================================
   CERTIFICATES
   ============================================================ */
.cert-card {
  background:var(--glass-bg); backdrop-filter:var(--blur);
  border:1px solid var(--glass-border); border-radius:18px;
  overflow:hidden; cursor:pointer;
  box-shadow:var(--glass-shadow), var(--glass-inset);
  transition:all .3s;
}
.cert-card:hover { background:var(--glass-bg-hover); border-color:var(--glass-border-accent); transform:translateY(-6px); box-shadow:0 20px 42px rgba(99,102,241,.2); }
.cert-badge {
  display:inline-block; font-size:.63rem; font-weight:600;
  padding:3px 10px; border-radius:999px; backdrop-filter:blur(8px);
}
.cert-badge-blue   { background:rgba(59,130,246,.14); color:#60a5fa; border:1px solid rgba(59,130,246,.3); }
.cert-badge-orange { background:rgba(249,115,22,.14);  color:#fb923c; border:1px solid rgba(249,115,22,.3); }
.cert-badge-red    { background:rgba(239,68,68,.14);   color:#f87171; border:1px solid rgba(239,68,68,.3); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-card {
  background:var(--glass-bg); backdrop-filter:var(--blur);
  border:1px solid var(--glass-border); border-radius:18px;
  box-shadow:var(--glass-shadow), var(--glass-inset);
  padding:clamp(1.8rem,4vw,3rem) clamp(1.5rem,4vw,2.5rem);
}
.contact-row {
  display:flex; align-items:center;
  background:var(--glass-bg); backdrop-filter:blur(10px);
  border:1px solid var(--glass-border); border-radius:12px;
  padding:13px 17px; color:var(--text-1); font-size:.88rem;
  transition:all .25s;
}
.contact-row:hover { background:var(--glass-bg-hover); border-color:var(--glass-border-accent); transform:translateX(5px); box-shadow:0 4px 20px rgba(99,102,241,.14); }

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  padding:1rem; z-index:200;
  opacity:0; transition:opacity .3s;
}
.modal-overlay.open { opacity:1; }
.glass-modal {
  background:rgba(8,14,30,.88);
  backdrop-filter:blur(34px) saturate(180%);
  border:1px solid rgba(255,255,255,.13);
  border-radius:20px;
  box-shadow:0 32px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  transform:scale(.95) translateY(16px);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.modal-overlay.open .glass-modal { transform:scale(1) translateY(0); }
[data-theme="light"] .glass-modal { background:rgba(215,232,255,.88); border-color:rgba(255,255,255,.75); }

/* ============================================================
   FOOTER
   ============================================================ */
.glass-footer {
  background:rgba(6,12,26,.55); backdrop-filter:blur(20px);
  border-top:1px solid var(--glass-border);
  transition:background .4s;
}
[data-theme="light"] .glass-footer { background:rgba(210,228,255,.5); }

/* ============================================================
   SCROLL-REVEAL
   ============================================================ */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* Stagger children */
.stagger > * { opacity:0; transform:translateY(24px); transition:opacity .5s ease, transform .5s ease; }
.stagger.visible > *:nth-child(1) { transition-delay:.05s; }
.stagger.visible > *:nth-child(2) { transition-delay:.12s; }
.stagger.visible > *:nth-child(3) { transition-delay:.19s; }
.stagger.visible > *:nth-child(4) { transition-delay:.26s; }
.stagger.visible > *:nth-child(5) { transition-delay:.33s; }
.stagger.visible > *:nth-child(6) { transition-delay:.40s; }
.stagger.visible > * { opacity:1; transform:translateY(0); }

/* ============================================================
   LIGHT THEME TEXT OVERRIDES (for tailwind classes)
   ============================================================ */
[data-theme="light"] .text-white { color: var(--text-1) !important; }
[data-theme="light"] .text-slate-300 { color: var(--text-2) !important; }
[data-theme="light"] .text-slate-400 { color: var(--text-2) !important; }
[data-theme="light"] .text-slate-500 { color: var(--text-3) !important; }
[data-theme="light"] .hero-title { background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#db2777 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(99,102,241,.4); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(99,102,241,.7); }

/* ============================================================
   RESPONSIVE FIXES
   ============================================================ */
@media (max-width:768px) {
  .hero-section { padding:5rem 1rem 3rem; }
  .hero-title { font-size:clamp(1.8rem,10vw,3.5rem); }
  .about-card { padding:1.4rem; }
  .contact-card { padding:1.8rem 1.2rem; }
}
@media (max-width:480px) {
  .stat-box { padding:.8rem 1rem; }
  .stat-num { font-size:1.3rem; }
}

/* ============================================================
   PREMIUM EXTRA ANIMATIONS & EFFECTS
   ============================================================ */

/* Magnetic hover shimmer on cards */
@keyframes shimmerSlide {
  0%   { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(200%) skewX(-12deg); }
}
.project-card::before, .cert-card::before {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  transform: translateX(-100%) skewX(-12deg);
  transition: none;
}
.project-card:hover::before, .cert-card:hover::before {
  animation: shimmerSlide 0.7s ease forwards;
}

/* Floating particle dots in hero */
.hero-section::before {
  content:'';
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(99,102,241,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 14%, rgba(168,85,247,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 68%, rgba(6,182,212,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 55%, rgba(244,114,182,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 12% 78%, rgba(99,102,241,0.2) 0%, transparent 100%),
    radial-gradient(2px 2px at 60% 38%, rgba(168,85,247,0.2) 0%, transparent 100%);
  animation: particleDrift 18s ease-in-out infinite alternate;
}
@keyframes particleDrift {
  0%   { opacity: 0.6; transform: translate(0,0); }
  100% { opacity: 1;   transform: translate(8px, -12px); }
}

/* Skill card icon pulse on hover */
.skill-card:hover i { animation: iconPop 0.4s cubic-bezier(.34,1.56,.64,1); }
@keyframes iconPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3) rotate(-5deg); }
  100% { transform: scale(1.1); }
}

/* Contact row slide glow */
.contact-row::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(to bottom, var(--accent), var(--accent-2));
  border-radius:3px; opacity:0; transform:scaleY(0);
  transition: opacity .25s, transform .25s;
}
.contact-row { position:relative; overflow:hidden; }
.contact-row:hover::before { opacity:1; transform:scaleY(1); }

/* Scroll hint pulse */
.scroll-hint i { animation: chevBounce 2s ease-in-out infinite, scrollGlow 3s ease-in-out infinite; }
@keyframes scrollGlow {
  0%,100% { color: var(--text-3); }
  50%      { color: var(--accent); }
}

/* Nav logo letter shimmer on hover */
.nav-logo:hover .nav-logo-accent {
  animation: logoShimmer 0.6s ease;
}
@keyframes logoShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.nav-logo-accent { background-size: 200% auto; }

/* Gradient border glow on skill-card hover */
.skill-card:hover {
  box-shadow: 0 14px 30px rgba(99,102,241,.22), 0 0 0 1px rgba(99,102,241,0.3);
}

/* Smooth entrance for stat-num counting feel */
.stat-box { transition: all .4s cubic-bezier(.34,1.56,.64,1); }
.stat-box:hover { transform:translateY(-6px) scale(1.04); }

/* Role badge animated border */
.role-badge {
  position: relative;
  background: rgba(255,255,255,0.028);
}
.role-badge::before {
  content:''; position:absolute; inset:-1px; border-radius:999px; z-index:-1;
  background: linear-gradient(90deg,#6366f1,#a855f7,#06b6d4,#6366f1);
  background-size: 300% 100%;
  animation: badgeBorder 4s linear infinite;
  opacity: 0.5;
}
@keyframes badgeBorder {
  0%   { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}

/* Cursor trail glow on buttons */
.btn-primary { position: relative; overflow:hidden; }
.btn-primary::before {
  content:''; position:absolute; inset:-2px; z-index:-1;
  background:linear-gradient(135deg,#6366f1,#a855f7,#06b6d4);
  border-radius:inherit; opacity:0;
  transition: opacity .3s;
}
.btn-primary:hover::before { opacity:0.6; }

/* Section eyebrow shimmer */
.section-eyebrow {
  transition: all .3s;
}
.section-eyebrow:hover {
  border-color: var(--glass-border-accent);
  box-shadow: 0 0 12px rgba(99,102,241,.2);
}