/* ==========================================
   PORTFOLIO STYLES
   Dark minimalist theme with subtle animations
   ========================================== */

/* ==========================================
   LIGHT THEME VARIABLES & STYLES
   ========================================== */
body.light-theme {
	background-color: #fafafa;
	color: #171717;
}

body.light-theme .bg-neutral-950 {
	background-color: #fafafa;
}

body.light-theme .bg-neutral-950\/80 {
	background-color: rgba(250, 250, 250, 0.8);
}

body.light-theme .bg-neutral-900\/50 {
	background-color: rgba(245, 245, 245, 0.5);
}

body.light-theme .text-neutral-100 {
	color: #171717;
}

body.light-theme .text-white {
	color: #0a0a0a;
}

body.light-theme .text-neutral-400 {
	color: #525252;
}

body.light-theme .text-neutral-500 {
	color: #737373;
}

body.light-theme .text-neutral-600 {
	color: #525252;
}

body.light-theme .border-neutral-800\/50,
body.light-theme .border-neutral-800 {
	border-color: rgba(229, 229, 229, 0.8);
}

body.light-theme .border-neutral-700 {
	border-color: #d4d4d4;
}

body.light-theme .hover\:text-white:hover {
	color: #0a0a0a;
}

body.light-theme .hover\:text-neutral-300:hover {
	color: #404040;
}

body.light-theme .bg-white {
	background-color: #171717;
	color: #fafafa;
}

body.light-theme .bg-white:hover {
	background-color: #262626;
}

body.light-theme .text-neutral-900 {
	color: #fafafa;
}

body.light-theme .bg-neutral-800\/50 {
	background-color: rgba(245, 245, 245, 0.8);
}

body.light-theme .hover\:bg-neutral-800\/50:hover {
	background-color: rgba(229, 229, 229, 0.5);
}

body.light-theme .hover\:border-neutral-500:hover {
	border-color: #a3a3a3;
}

/* Light theme for specific components */
body.light-theme .project-card,
body.light-theme .education-card {
	background: rgba(255, 255, 255, 0.8);
	border-color: #e5e5e5;
}

body.light-theme .project-card:hover,
body.light-theme .education-card:hover {
	border-color: #d4d4d4;
}

body.light-theme .tag {
	background: rgba(229, 229, 229, 0.5);
	border-color: #d4d4d4;
	color: #525252;
}

body.light-theme .social-link {
	border-color: #d4d4d4;
	color: #525252;
}

body.light-theme .social-link:hover {
	border-color: #171717;
	color: #171717;
}

body.light-theme .filter-btn {
	border-color: #d4d4d4;
	color: #525252;
}

body.light-theme .filter-btn:hover {
	border-color: #a3a3a3;
	color: #171717;
}

body.light-theme .filter-btn.active {
	background: #171717;
	border-color: #171717;
	color: #fafafa;
}

body.light-theme .text-gradient {
	background: linear-gradient(135deg, #171717 0%, #525252 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

body.light-theme .page-transition-overlay {
	background: #fafafa;
}

body.light-theme .project-item .timeline-line {
	background: #d4d4d4;
}

body.light-theme .project-date {
	color: #737373;
}

body.light-theme ::-webkit-scrollbar-track {
	background: #fafafa;
}

body.light-theme ::-webkit-scrollbar-thumb {
	background: #d4d4d4;
}

body.light-theme ::-webkit-scrollbar-thumb:hover {
	background: #a3a3a3;
}

body.light-theme .nav-link::after {
	background: #171717;
}

/* Code blocks in why page */
body.light-theme .code-block {
	background: rgba(245, 245, 245, 0.9);
	border-color: #e5e5e5;
}

body.light-theme .code-block pre {
	color: #374151;
}

body.light-theme .code-header {
	background: rgba(229, 229, 229, 0.8);
	border-color: #e5e5e5;
	color: #525252;
}

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
}

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

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

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

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

/* ==========================================
   GRADIENT TEXT
   ========================================== */
.text-gradient {
	background: linear-gradient(135deg, #fff 0%, #a1a1aa 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ==========================================
   NAVIGATION
   ========================================== */
.nav-link {
	position: relative;
}

.nav-link::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 1px;
	background: #fff;
	transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
	width: 100%;
}

/* ==========================================
   SCROLL ANIMATIONS
   ========================================== */
.animate-on-scroll {
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease;
}

.animate-on-scroll.visible {
	opacity: 1;
	transform: translateY(0);
}

.animate-on-scroll.delay-200 {
	transition-delay: 0.2s;
}

.animate-on-scroll.delay-400 {
	transition-delay: 0.4s;
}

/* ==========================================
   PAGE TRANSITIONS
   ========================================== */
.page-transition-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #0a0a0a;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.page-transition-overlay.active {
	opacity: 1;
	pointer-events: all;
}

/* ==========================================
   PROJECTS TIMELINE
   ========================================== */

/* Project Filters */
.project-filters {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.filter-btn {
	padding: 0.5rem 1.25rem;
	background: transparent;
	border: 1px solid #333;
	border-radius: 9999px;
	font-size: 0.875rem;
	color: #a1a1aa;
	cursor: pointer;
	transition: all 0.3s ease;
}

.filter-btn:hover {
	border-color: #525252;
	color: #fff;
}

.filter-btn.active {
	background: #fff;
	border-color: #fff;
	color: #0a0a0a;
}

/* Project item filter transitions */
.project-item {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.project-item.filtered-out {
	opacity: 0;
	transform: scale(0.95);
	height: 0;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
}

.projects-timeline {
	position: relative;
	padding-left: 100px;
}

.project-item {
	position: relative;
	margin-bottom: 3rem;
}

/* Timeline line segments - drawn by JS between items */
.project-item .timeline-line {
	position: absolute;
	left: -46px;
	width: 1px;
	background: #333;
}

.project-item .timeline-line-top {
	top: 0;
	height: calc(50% - 20px);
}

.project-item .timeline-line-bottom {
	bottom: 0;
	height: calc(50% - 20px);
	top: auto;
}

/* First item: no top line */
.project-item:first-child .timeline-line-top {
	display: none;
}

/* Last item: extend bottom line to card bottom */
.project-item:last-child .timeline-line-bottom {
	height: calc(100% - 50% - 20px);
}

/* Date label on the left, positioned on the bar */
.project-date {
	position: absolute;
	left: -70px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.75rem;
	font-weight: 500;
	color: #71717a;
	padding: 6px 0;
	text-align: center;
	white-space: nowrap;
	z-index: 1;
}

.project-content {
	padding-left: 0;
}

.project-card {
	background: rgba(23, 23, 23, 0.5);
	border: 1px solid #262626;
	border-radius: 12px;
	padding: 1.5rem;
	transition:
		border-color 0.3s ease,
		transform 0.3s ease;
}

.project-card:hover {
	border-color: #404040;
	transform: translateX(4px);
}

/* Technology tags */
.tag {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background: rgba(64, 64, 64, 0.3);
	border: 1px solid #333;
	border-radius: 9999px;
	font-size: 0.75rem;
	color: #a1a1aa;
	transition: border-color 0.3s ease;
}

.tag:hover {
	border-color: #525252;
}

/* ==========================================
   EDUCATION CARDS
   ========================================== */
.education-card {
	background: rgba(23, 23, 23, 0.3);
	border: 1px solid #262626;
	border-radius: 12px;
	padding: 1.5rem;
	transition: border-color 0.3s ease;
}

.education-card:hover {
	border-color: #404040;
}

/* ==========================================
   SOCIAL LINKS
   ========================================== */
.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid #333;
	color: #a1a1aa;
	transition: all 0.3s ease;
}

.social-link:hover {
	border-color: #fff;
	color: #fff;
	transform: translateY(-2px);
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */
@media (max-width: 768px) {
	.projects-timeline {
		padding-left: 0;
	}

	.project-item .timeline-line {
		display: none;
	}

	.project-date {
		position: relative;
		left: 0;
		top: 0;
		transform: none;
		margin-bottom: 0.75rem;
		text-align: left;
		background: transparent;
	}
	
	/* Mobile typography adjustments */
	h1 {
		font-size: 2.5rem !important;
		line-height: 1.2;
	}
	
	h2 {
		font-size: 1.75rem !important;
	}
	
	/* Mobile card adjustments */
	.project-card,
	.education-card {
		padding: 1.25rem;
	}
	
	/* Mobile section spacing */
	section {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
	
	/* Hero section mobile */
	#about {
		min-height: auto;
		padding-top: 6rem;
	}
	
	/* Mobile contact form and info */
	#contact .grid {
		gap: 2rem;
	}
}

@media (max-width: 640px) {
	/* Extra small screen adjustments */
	h1 {
		font-size: 2rem !important;
	}
	
	.project-card h3,
	.education-card h3 {
		font-size: 1.125rem;
	}
	
	/* Adjust social links row */
	.social-link {
		width: 44px;
		height: 44px;
	}
	
	/* Button adjustments */
	.filter-btn {
		padding: 0.375rem 1rem;
		font-size: 0.8125rem;
	}
	
	/* Better touch targets */
	.nav-link {
		padding: 0.5rem 0;
	}
}

/* ==========================================
   LOADING ANIMATION (Optional)
   ========================================== */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-in-up {
	animation: fadeInUp 0.6s ease forwards;
}

/* ==========================================
   HOVER EFFECTS
   ========================================== */
.hover-lift {
	transition: transform 0.3s ease;
}

.hover-lift:hover {
	transform: translateY(-4px);
}

/* ==========================================
   MOBILE MENU & THEME TOGGLE
   ========================================== */
/* Ensure icons display correctly */
.sun-icon,
.moon-icon,
.hamburger-icon,
.close-icon {
	display: block;
}

.sun-icon.hidden,
.moon-icon.hidden,
.hamburger-icon.hidden,
.close-icon.hidden {
	display: none !important;
}

/* Theme toggle button */
#theme-toggle,
#theme-toggle-mobile {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Mobile menu button */
#mobile-menu-btn {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Mobile menu */
#mobile-menu {
	display: none;
}

#mobile-menu.show {
	display: block;
}

/* Light theme adjustments for buttons */
body.light-theme #theme-toggle,
body.light-theme #theme-toggle-mobile,
body.light-theme #mobile-menu-btn {
	border-color: #d4d4d4;
}

body.light-theme #theme-toggle:hover,
body.light-theme #theme-toggle-mobile:hover,
body.light-theme #mobile-menu-btn:hover {
	border-color: #a3a3a3;
}

body.light-theme #mobile-menu {
	border-color: rgba(229, 229, 229, 0.5);
}

/* Light theme input fields */
body.light-theme input,
body.light-theme textarea {
	background-color: rgba(245, 245, 245, 0.8);
	border-color: #d4d4d4;
	color: #171717;
}

body.light-theme input::placeholder,
body.light-theme textarea::placeholder {
	color: #a3a3a3;
}

body.light-theme input:focus,
body.light-theme textarea:focus {
	border-color: #a3a3a3;
}