/* Custom Variables */
:root {
  --bg-primary: #020617;
  --bg-secondary: #0f172a;
  --accent-indigo: #6366f1;
  --accent-purple: #a855f7;
  --accent-cyan: #06b6d4;
  --accent-emerald: #10b981;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
}

/* Base Styles */
body {
  scroll-behavior: smooth;
}

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

::-webkit-scrollbar-track {
  background: #0f172a;
}

::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Selection */
::selection {
  background: rgba(99, 102, 241, 0.3);
  color: white;
}

/* Glass Effects */
.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-strong {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Navbar Scrolled State */
#navbar.scrolled {
  background: rgba(2, 6, 23, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 4s ease-in-out infinite;
}

/* Navbar Link Indicator */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

.nav-link:hover::after {
    width: 60%;
}

/* Mobile Menu Animation */
#mobile-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Hamburger Icon Animation */
#mobile-menu-btn.open #line-1 {
    transform: translateY(8px) rotate(45deg);
}
#mobile-menu-btn.open #line-2 {
    opacity: 0;
}
#mobile-menu-btn.open #line-3 {
    transform: translateY(-8px) rotate(-45deg);
}

/* Form Styles */
.form-input:focus {
    border-color: var(--accent-indigo);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* Project Card Hover */
.project-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card:hover {
    transform: translateY(-8px);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.1);
}

.project-image-container img {
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card:hover .project-image-container img {
    transform: scale(1.1);
}

/* Skills Grid */
.skill-bar {
    position: relative;
    overflow: hidden;
}

.skill-progress {
    transition: width 1.5s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

/* Section Transitions */
section {
    position: relative;
    z-index: 1;
}