body {
  font-family: "Plus Jakarta Sans", sans-serif;
  background-color: #020408;
  color: white;
  scroll-behavior: smooth;
}
.glass {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Lamp Swing */
@keyframes swing {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(6deg);
  }
}
.lamp-swing {
  transform-origin: top center;
  animation: swing 4.5s ease-in-out infinite;
}

/* Pulsing Hint Animation */
@keyframes pulse-hint {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(1) translateX(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateX(10px);
  }
}
.hint-animation {
  animation: pulse-hint 2s ease-in-out infinite;
}

#glow-beam {
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
  background: radial-gradient(
    circle at top,
    rgba(234, 179, 8, 0.15),
    transparent 85%
  );
  filter: blur(50px);
}

.project-card:hover {
  transform: translateY(-8px);
  border-color: rgba(234, 179, 8, 0.3);
}
.toast-visible {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

/* Smooth Transition for Theme Change */
body {
  transition: background-color 0.8s ease, color 0.8s ease;
}

/* --- Light Mode Styles --- */
body.light-mode {
  background-color: #f8fafc; /* Light background */
  color: #0f172a; /* Dark text */
}

/* Update Glass Effect for Light Mode */
body.light-mode .glass {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Override Tailwind hardcoded colors for Light Mode */
body.light-mode .text-white {
  color: #0f172a !important;
}

body.light-mode .text-gray-400,
body.light-mode .text-gray-500 {
  color: #475569 !important;
}

body.light-mode .bg-white\/5 {
  background-color: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

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

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

/* Theme Change Smooth Transition for all elements */
body, .glass, [class*="bg-white"], [class*="text-"], [class*="border-"], i {
  transition: background-color 0.8s ease-in-out, color 0.8s ease-in-out, background 0.8s ease-in-out, border-color 0.8s ease-in-out !important;
}