/*
 * Styles for Vinh — Portfolio (Tailwind CSS Version)
 * - Modern tech-oriented design with Green/Emerald/Lime theme
 * - Enhanced with gradient animations and micro-interactions
 * - Dark/Light mode support
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	--brand-gradient: linear-gradient(135deg, #10b981, #22c55e, #84cc16);
	--easing-spring: cubic-bezier(.2,.8,.2,1);
}

/* Custom Tailwind Config */
@layer base {
	html {
		scroll-behavior: smooth;
		scroll-padding-top: 5rem;
		transition: background-color 0.3s ease, color 0.3s ease;
	}
	
	/* Dark mode (default) */
	html.dark body {
		font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
		background-color: #030712;
		background-image:
			radial-gradient(60rem 40rem at 20% -5%, rgba(16,185,129,.08), transparent 60%),
			radial-gradient(50rem 30rem at 80% 0%, rgba(34,197,94,.12), transparent 50%),
			radial-gradient(50rem 40rem at 50% 110%, rgba(132,204,22,.08), transparent 60%);
		background-attachment: fixed;
		color: #f3f4f6;
	}
	
	/* Light mode */
	html.light body {
		font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
		background-color: #f9fafb;
		background-image:
			radial-gradient(60rem 40rem at 20% -5%, rgba(16,185,129,.05), transparent 60%),
			radial-gradient(50rem 30rem at 80% 0%, rgba(34,197,94,.08), transparent 50%),
			radial-gradient(50rem 40rem at 50% 110%, rgba(132,204,22,.05), transparent 60%);
		background-attachment: fixed;
		color: #111827;
	}
}

/* Light mode overrides */
html.light {
	--brand-gradient: linear-gradient(135deg, #059669, #16a34a, #65a30d);
}

html.light body {
	background-color: #f9fafb;
	color: #111827;
}

html.light .bg-gray-950 {
	background-color: #ffffff !important;
}

html.light .bg-gray-950\/80 {
	background-color: rgba(255, 255, 255, 0.9) !important;
}

html.light .bg-gray-900\/40 {
	background-color: rgba(255, 255, 255, 0.8) !important;
}

html.light .text-gray-100 {
	color: #111827 !important;
}

html.light .text-gray-300 {
	color: #374151 !important;
}

html.light .text-gray-400 {
	color: #6b7280 !important;
}

html.light .border-white\/10 {
	border-color: rgba(0, 0, 0, 0.1) !important;
}

html.light .border-gray-600 {
	border-color: #d1d5db !important;
}

html.light .border-gray-700 {
	border-color: #e5e7eb !important;
}

html.light .bg-gray-800\/50 {
	background-color: rgba(243, 244, 246, 0.8) !important;
}

html.light .nav-main {
	background-color: rgba(255, 255, 255, 0.8) !important;
}

/* Background particles layer */
#tsparticles {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.7;
}

html.light #tsparticles {
	opacity: 0.4;
}

/* Navbar logo with glow */
.navbar-logo {
	filter: drop-shadow(0 2px 8px rgba(16,185,129,.4));
	transition: filter 0.3s var(--easing-spring);
}
.navbar-logo:hover {
	filter: drop-shadow(0 4px 12px rgba(34,197,94,.6));
}

/* Enhanced nav scrolled state */
.nav-main {
	transition: all 0.3s var(--easing-spring);
}
.nav-scrolled {
	backdrop-filter: saturate(160%) blur(12px);
	background-color: rgba(3,7,18, .75) !important;
}

html.light .nav-scrolled {
	background-color: rgba(255, 255, 255, 0.9) !important;
	border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

/* Animated gradient text */
@keyframes gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.animate-gradient {
	background-size: 200% 200%;
	animation: gradient 4s ease infinite;
}

/* Nav links underline effect */
.nav-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, #10b981, #22c55e);
	transition: width 0.3s var(--easing-spring);
}
.nav-link:hover::after {
	width: 100%;
}

/* Project card 3D tilt effect */
.project-card {
	transform-style: preserve-3d;
	transition: transform 0.3s var(--easing-spring);
}

/* Button ripple effect */
.ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	background: rgba(255,255,255,.3);
	animation: ripple 0.6s ease-out;
	pointer-events: none;
}

@keyframes ripple {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

/* Glow effect for buttons and cards */
.glow-effect {
	position: relative;
	overflow: hidden;
}

.glow-effect::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, rgba(6,182,212,.4) 0%, transparent 70%);
	transform: translate(-50%, -50%) scale(0);
	transition: transform 0.6s var(--easing-spring);
	pointer-events: none;
}

.glow-effect:hover::before {
	transform: translate(-50%, -50%) scale(1.5);
}

/* Floating animation for avatar glow */
@keyframes float {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-10px); }
}

/* Loading shimmer effect */
@keyframes shimmer {
	0% { background-position: -1000px 0; }
	100% { background-position: 1000px 0; }
}

.shimmer {
	background: linear-gradient(90deg, 
		rgba(255,255,255,0) 0%, 
		rgba(6,182,212,.1) 50%, 
		rgba(255,255,255,0) 100%);
	background-size: 1000px 100%;
	animation: shimmer 2s infinite;
}

/* Pulse glow animation for timeline dots */
@keyframes pulse-glow {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(6,182,212,.7),
					0 0 0 0 rgba(168,85,247,.5);
	}
	50% {
		box-shadow: 0 0 0 10px rgba(6,182,212,0),
					0 0 0 20px rgba(168,85,247,0);
	}
}

/* Smooth section transitions */
section {
	transition: opacity 0.5s var(--easing-spring);
}

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

::-webkit-scrollbar-track {
	background: #1f2937;
}

html.light ::-webkit-scrollbar-track {
	background: #e5e7eb;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #10b981, #22c55e);
	border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #059669, #16a34a);
}

/* Focus outlines for accessibility */
:focus-visible {
	outline: 3px solid rgba(16,185,129,.6);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Mobile menu slide animation */
@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

#mobile-menu {
	animation: slideDown 0.3s var(--easing-spring);
}

/* Utility classes */
@layer utilities {
	.text-shadow-sm {
		text-shadow: 0 1px 2px rgba(0,0,0,.5);
	}
	
	.text-shadow-lg {
		text-shadow: 0 4px 8px rgba(0,0,0,.6);
	}
	
	.backdrop-blur-heavy {
		backdrop-filter: saturate(160%) blur(20px);
	}
}