/* Custom Glassmorphism & High-Tech Styling */

@layer base {
  html {
    font-family: 'Plus Jakarta Sans', 'Prompt', sans-serif;
    color-scheme: dark;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #070c18;
}

::-webkit-scrollbar-thumb {
  background: rgba(6, 182, 212, 0.25);
  border-radius: 9999px;
  border: 2px solid #070c18;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, 0.6);
}

/* Glassmorphism Surface Base */
.glass-card {
  background: rgba(11, 20, 38, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(6, 182, 212, 0.18);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  border-color: rgba(34, 211, 238, 0.4);
  box-shadow: 0 12px 40px -10px rgba(6, 182, 212, 0.25);
  transform: translateY(-2px);
}

/* Glass Pill (Buttons, Badges) */
.glass-pill {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Language Switcher Button Styling */
.lang-btn.active-lang {
  background: linear-gradient(135deg, #06b6d4, #14b8a6);
  color: #041017 !important;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
}

/* Sticky Left Sidebar Navigation Link Active State */
.nav-item.active-nav {
  color: #22d3ee;
  background: rgba(6, 182, 212, 0.14);
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: inset 0 0 12px rgba(6, 182, 212, 0.15);
}

.nav-item.active-nav i {
  color: #22d3ee;
  transform: scale(1.15);
}

/* Ambient Glow Spheres */
.glow-sphere {
  position: absolute;
  pointer-events: none;
  filter: blur(120px);
  border-radius: 9999px;
  will-change: transform, opacity;
}

/* Project Filter Active Button */
.proj-filter-btn.active-filter {
  background: rgba(6, 182, 212, 0.25);
  border-color: rgba(34, 211, 238, 0.5);
  color: #22d3ee;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.2);
}

/* Code block highlight */
.code-token-keyword { color: #22d3ee; }
.code-token-string { color: #fde047; }
.code-token-prop { color: #2dd4bf; }
.code-token-bool { color: #4ade80; }

/* Subtle pulse animation */
@keyframes subtlePulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.subtle-pulse {
  animation: subtlePulse 4s infinite ease-in-out;
}