/* styles.css (extracted from inline version) */
:root {
  --bg-color: #0a0a0a;
  --primary-color: #ffffff;
  --secondary-color: #a0a0a0;
  --accent-color: #007cf0;
  --card-bg: rgba(255,255,255,0.05);
  --card-border: rgba(255,255,255,0.1);
  --shadow-color: rgba(0,124,240,0.35);
}

html.light {
  --bg-color: #f7f9fb;
  --primary-color: #111827;
  --secondary-color: #4b5563;
  --accent-color: #0056b3;
  --card-bg: #fff;
  --card-border: rgba(0,0,0,0.08);
  --shadow-color: rgba(0,86,179,0.18);
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg-color);
  color: var(--primary-color);
  margin: 0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a { color: inherit; text-decoration: none; }

.container { max-width: 1100px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }

.glass-card {
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 1rem;
  border: 1px solid var(--card-border);
  transition: transform .28s ease, box-shadow .28s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

.glass-card:hover { transform: translateY(-6px); box-shadow: 0 18px 50px var(--shadow-color); }

.animated-gradient {
  background: linear-gradient(90deg, var(--accent-color) 0%, var(--primary-color) 40%, var(--accent-color) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradMove 5s ease infinite;
}

@keyframes gradMove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* Add these near .project-card / .project-inner rules */
.project-card { perspective: 1200px; cursor: pointer; }
.project-inner { transition: transform .6s ease; transform-style: preserve-3d; position:relative; }
.project-front, .project-back { backface-visibility: hidden; position: absolute; inset:0; border-radius:1rem; overflow:hidden; }
.project-back { transform: rotateY(180deg); }
/* state when flipped */
.project-card.is-flipped .project-inner { transform: rotateY(180deg); }

/* ensure keyboard focus visible */
.project-card:focus { outline: 3px solid rgba(0,124,240,0.25); }


.rounded-full-crop { width: 220px; height: 220px; border-radius: 9999px; overflow: hidden; border: 4px solid var(--accent-color); }
.rounded-full-crop img { width: 100%; height: 100%; object-fit: cover; display: block; }

.chat-bubble { max-width: 80%; padding: 10px 14px; border-radius: 12px; margin-bottom: 8px; }
.chat-bubble.user { background: var(--accent-color); color: #fff; align-self: flex-end; }
.chat-bubble.ai { background: var(--card-bg); color: var(--primary-color); align-self: flex-start; }

.loader-wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-color); z-index: 9999; transition: opacity .35s ease; }
.loader { border: 3px solid var(--card-border); border-top: 3px solid var(--accent-color); border-radius: 50%; width: 48px; height: 48px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.reveal { opacity: 0; transform: translateY(20px); transition: all .6s cubic-bezier(.18,.9,.32,1); will-change: transform, opacity; }
.reveal.visible { opacity: 1; transform: translateY(0); }

.particles-bg { pointer-events: none; z-index: 0; position: fixed; inset: 0; }

.text-accent { color: var(--accent-color) !important; }

.page { display: none; }
.page.active { display: block; }

.nav-desktop .nav-link { color: #d1d5db; font-weight: 500; }
.nav-desktop .nav-link:hover { color: #fff; }

/* Additional skill icon styling for consistency */
.fas.fa-chart-bar::before { content: "📊"; }
.fas.fa-chart-pie::before { content: "📈"; }

/* Enhanced timeline styling */
.experience-metric {
  color: var(--accent-color);
  font-weight: 600;
  font-size: 0.9rem;
}

.experience-highlight {
  background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

@media (max-width: 768px) {
  .rounded-full-crop { width: 160px; height: 160px; }
}