/* ============================================
   GENERAL STYLES & TRANSITIONS
   ============================================ */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body {
  opacity: 0;
  animation: fadeIn 0.5s ease-in forwards;
}

body.loaded {
  opacity: 1;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================
   NAVIGATION STYLES
   ============================================ */
nav {
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

nav.scrolled {
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.95);
}

.active {
  background-color: #2563eb !important;
  color: white !important;
  transform: scale(1.05);
}

/* ============================================
   MOBILE MENU STYLES
   ============================================ */
#mobile-menu {
  right: -16rem;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.95), rgba(139, 92, 246, 0.95));
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3);
}

#mobile-menu.active {
  right: 0 !important;
}

#mobile-menu a {
  transition: all 0.3s ease;
}

#mobile-menu a:hover {
  transform: translateX(-5px);
}

/* ============================================
   DARK MODE STYLES
   ============================================ */
.dark {
  color-scheme: dark;
}

.dark body {
  background-color: #0f172a;
  color: #e2e8f0;
}

.dark nav {
  background-color: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.dark nav.scrolled {
  background-color: rgba(15, 23, 42, 0.98);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.dark h1, .dark h2, .dark h3, .dark h4 {
  color: #f1f5f9;
}

.dark p {
  color: #cbd5e1;
}

.dark .text-gray-600 {
  color: #94a3b8 !important;
}

.dark .text-gray-700 {
  color: #cbd5e1 !important;
}

.dark .bg-white {
  background-color: #1e293b !important;
}

.dark .border-gray-400 {
  border-color: #334155 !important;
}

.dark .bg-gradient-to-t {
  background: linear-gradient(to top, #1e293b, #0f172a) !important;
}

.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

.dark .hover\:bg-\[\#fcf4ff\]:hover {
  background-color: #1e293b !important;
}

.dark input,
.dark textarea {
  background-color: #1e293b !important;
  border: 1px solid #334155;
  color: #e2e8f0 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #64748b;
}

.dark footer {
  background: linear-gradient(to top, #1e293b, #334155) !important;
  border-top: 1px solid #334155;
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
main > div,
.grid > div {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

main > div.animate-in,
.grid > div.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   CARD HOVER EFFECTS
   ============================================ */
.hover\:scale-95:hover {
  transform: scale(0.98) !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3) !important;
}

.dark .hover\:scale-95:hover {
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6) !important;
}

/* ============================================
   BUTTON ENHANCEMENTS
   ============================================ */
button, .bg-blue-600 {
  position: relative;
  overflow: hidden;
}

button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

button:hover::before {
  width: 300px;
  height: 300px;
}

/* ============================================
   SKILL BARS ANIMATION
   ============================================ */
.bg-blue-600.rounded-full {
  animation: progressBar 1.5s ease-out;
  transform-origin: left;
}

@keyframes progressBar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ============================================
   DARK MODE TOGGLE ANIMATION
   ============================================ */
.ri-moon-line, .ri-sun-line {
  transition: transform 0.3s ease, rotate 0.3s ease;
  display: inline-block;
}

.ri-moon-line:hover, .ri-sun-line:hover {
  transform: rotate(20deg) scale(1.2);
}

/* ============================================
   GLASSMORPHISM EFFECTS
   ============================================ */
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass-effect {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.1);
}

/* ============================================
   IMAGE HOVER EFFECTS
   ============================================ */
img {
  transition: transform 0.3s ease, filter 0.3s ease;
}

img:hover {
  transform: scale(1.05);
}

.dark img:not([src*="icon"]):not([src*="logo"]) {
  filter: brightness(0.9);
}

/* ============================================
   LINK HOVER EFFECTS
   ============================================ */
a {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link:not(.active)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #2563eb;
  transition: width 0.3s ease;
}

.nav-link:not(.active):hover::after {
  width: 100%;
}

/* ============================================
   MODERN UNIFIED LOGO STYLING
   ============================================ */
.logo-link {
  display: inline-block;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}

.logo-link:hover {
  transform: translateY(-2px);
}

.logo-text {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 4s ease infinite;
  position: relative;
  display: inline-block;
  padding: 4px 0;
}

/* Animated underline effect */
.logo-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6);
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  border-radius: 2px;
  animation: shimmer 3s linear infinite;
}

.logo-link:hover .logo-text::after {
  transform: scaleX(1);
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Glow effect on hover */
.logo-link:hover .logo-text {
  filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.4));
}

/* Dark mode logo styling */
.dark .logo-text {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 50%, #3b82f6 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 4s ease infinite;
}

.dark .logo-text::after {
  background: linear-gradient(90deg, #60a5fa, #93c5fd, #60a5fa);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

.dark .logo-link:hover .logo-text {
  filter: drop-shadow(0 0 16px rgba(96, 165, 250, 0.5));
}

/* Logo link should never have active menu styles */
.logo-link.active {
  background-color: transparent !important;
  transform: none !important;
}

.logo-link:hover.active {
  transform: translateY(-2px) !important;
}

/* Remove focus outline on click */
.logo-link:focus,
.logo-link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure logo link doesn't get menu item styles */
.nav-link.logo-link {
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Responsive logo sizing */
@media (min-width: 1024px) {
  .logo-text {
    font-size: 1.75rem;
  }
}

@media (max-width: 640px) {
  .logo-text {
    font-size: 1.25rem;
    letter-spacing: 0.25px;
  }
}

/* ============================================
   RESPONSIVE ENHANCEMENTS
   ============================================ */
@media (max-width: 768px) {
  main > div {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .grid {
    justify-items: center;
  }
}

/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #3b82f6;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2563eb;
}

.dark ::-webkit-scrollbar-track {
  background: #1e293b;
}

.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* ============================================
   GRADIENT TEXT ENHANCEMENTS
   ============================================ */
.bg-gradient-to-r {
  animation: gradientShift 3s ease infinite;
  background-size: 200% 200%;
}

@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ============================================
   PROJECT CARDS ENHANCEMENTS
   ============================================ */
.rounded-md.border.shadow-lg {
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.rounded-md.border.shadow-lg:hover {
  border-color: #3b82f6;
}

.dark .rounded-md.border.shadow-lg {
  background-color: #1e293b;
  border-color: #334155;
}

.dark .rounded-md.border.shadow-lg:hover {
  border-color: #3b82f6;
}

/* ============================================
   FOOTER ENHANCEMENTS
   ============================================ */
footer img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

footer img:hover {
  filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.5));
}

/* ============================================
   ADDITIONAL DARK MODE FIXES
   ============================================ */
.dark .bg-indigo-200 {
  background: linear-gradient(to top, #1e293b, #0f172a) !important;
}

.dark .text-blue-600 {
  color: #60a5fa !important;
}

.dark .hover\:bg-blue-500:hover {
  background-color: #2563eb !important;
}

.dark .bg-blue-600 {
  background-color: #2563eb !important;
}

.dark .bg-blue-600:hover {
  background-color: #1d4ed8 !important;
}

.dark .bg-black {
  background-color: #1e293b !important;
  border: 1px solid #3b82f6;
}

.dark .bg-black:hover {
  background-color: #334155 !important;
}

.dark .bg-\[#E8F0FE\] {
  background-color: #1e293b !important;
}

.dark .text-black {
  color: #e2e8f0 !important;
}

.dark .border {
  border-color: #334155 !important;
}

/* ============================================
   MOBILE MENU DARK MODE
   ============================================ */
.dark #mobile-menu {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(51, 65, 85, 0.98)) !important;
}

/* ============================================
   CERTIFICATE CARDS DARK MODE
   ============================================ */
.dark .relative.h-\[400px\].w-\[300px\] {
  border: 1px solid #334155;
}

.dark .bg-gradient-to-t.from-gray-900 {
  background: linear-gradient(to top, #0f172a, transparent) !important;
}

.dark .text-white {
  color: #f1f5f9 !important;
}

.dark .text-gray-300 {
  color: #cbd5e1 !important;
}

.dark .bg-white.px-3.py-2 {
  background-color: #3b82f6 !important;
  color: white !important;
}

/* ============================================
   HEADER GRADIENT DARK MODE
   ============================================ */
.dark header .bg-gradient-to-t {
  background: linear-gradient(to top, #1e293b, #0f172a) !important;
}

/* ============================================
   RESPONSIVE IMPROVEMENTS
   ============================================ */
@media (max-width: 640px) {
  .text-2xl {
    font-size: 1.5rem;
  }

  .text-4xl {
    font-size: 2rem;
  }

  .text-5xl {
    font-size: 2.5rem;
  }

  .text-6xl {
    font-size: 3rem;
  }

  /* Fix mobile menu overflow and positioning */
  body {
    overflow-x: hidden;
    position: relative;
  }

  /* Ensure mobile menu is properly positioned */
  #mobile-menu {
    position: fixed !important;
    right: -16rem !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 16rem !important;
    z-index: 50 !important;
  }

  #mobile-menu.active {
    right: 0 !important;
  }

  /* Better mobile padding */
  nav {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Prevent content overflow */
  * {
    max-width: 100vw;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* Better touch targets on mobile */
  button,
  a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Adjust header spacing on mobile */
  header > div {
    padding-top: 5rem;
    padding-bottom: 2rem;
  }

  /* Better skill section layout on mobile */
  #skills .grid {
    gap: 1.5rem !important;
  }

  /* Fix about section cards on mobile */
  #about ul li {
    min-width: 280px;
  }

  /* Better contact form on mobile */
  #contact form {
    width: 100%;
  }

  #contact form input,
  #contact form textarea {
    width: 100%;
    font-size: 16px !important; /* Prevents zoom on iOS */
  }

  /* Adjust footer on mobile */
  footer > div {
    padding: 1rem;
  }

  /* Better project cards on mobile */
  #projects .grid > div {
    margin: 0 auto;
  }

  /* Resume download button mobile optimization */
  a[download] {
    padding: 0.75rem 2rem !important;
    font-size: 1rem !important;
    text-align: center;
    white-space: nowrap;
  }

  a[download]:hover {
    padding: 0.75rem 2rem !important; /* Prevent hover expansion on mobile */
  }

  /* Improve touch targets */
  nav a,
  button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Better mobile spacing */
  main > div {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  /* Mobile-friendly skill bars */
  .bg-white.w-96 {
    width: 100% !important;
    max-width: 100%;
  }

  /* Mobile form improvements */
  input,
  textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
}

/* Tablet improvements */
@media (min-width: 641px) and (max-width: 1024px) {
  .bg-white.w-96 {
    width: 100% !important;
    max-width: 350px;
  }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
  /* Better tap targets on touch devices */
  a, button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Disable hover effects on touch */
  .hover\:scale-95:hover,
  .hover\:scale-105:hover,
  .hover\:scale-110:hover {
    transform: none;
  }

  /* Active state instead of hover for touch */
  a:active,
  button:active {
    opacity: 0.7;
  }
}

/* ============================================
   SMOOTH BUTTON TRANSITIONS
   ============================================ */
button {
  cursor: pointer;
  transition: all 0.3s ease;
}

button:active {
  transform: scale(0.95);
}

/* ============================================
   IMPROVED FOCUS STATES
   ============================================ */
button:focus,
a:focus,
input:focus,
textarea:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.dark button:focus,
.dark a:focus,
.dark input:focus,
.dark textarea:focus {
  outline-color: #60a5fa;
}

/* ============================================
   LOADING STATE
   ============================================ */
body:not(.loaded) {
  overflow: hidden;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */
img {
  will-change: transform;
}

.hover\:scale-95,
.hover\:scale-105,
.hover\:scale-110 {
  will-change: transform;
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  nav,
  #mobile-menu,
  #dark-mode-toggle,
  #mobile-menu-toggle {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }
}

/* ============================================
   HOVER EFFECT FOR SOCIAL ICONS
   ============================================ */
.hover\:animate-spin:hover {
  animation: spin 0.5s linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   IMPROVED SHADOW EFFECTS
   ============================================ */
.shadow-lg {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.dark .shadow-lg {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}

/* ============================================
   GRADIENT BACKGROUND ENHANCEMENTS
   ============================================ */
.bg-gradient-to-r.from-rose-800.to-purple-950 {
  background-size: 200% auto;
  animation: gradientFlow 3s ease infinite;
}

@keyframes gradientFlow {
  0%, 100% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
}

/* ============================================
   FORM STATUS MESSAGES
   ============================================ */
#form-status {
  transition: all 0.3s ease;
}

#form-status.bg-green-100 {
  background-color: #dcfce7;
}

#form-status.text-green-800 {
  color: #166534;
}

.dark #form-status.bg-green-100 {
  background-color: #166534;
}

.dark #form-status.text-green-800 {
  color: #dcfce7;
}

/* Spinner animation for submit button */
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}