body {
  background-color: #0f1113;
  color: #94a3b8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #0f1113;
}
::-webkit-scrollbar-thumb {
  background: #2d3338;
  border-radius: 3px;
}

.glass-card {
  background: rgba(22, 25, 28, 0.6);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease-out;
}

.project-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow:
    0 0 20px rgba(99, 102, 241, 0.15),
    0 0 40px rgba(99, 102, 241, 0.05);
  background: rgba(30, 35, 45, 0.8);
}

.fade-element {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
  will-change: opacity, transform;
}

.fade-element.visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-100 {
  transition-delay: 100ms;
}
.delay-200 {
  transition-delay: 200ms;
}
.delay-300 {
  transition-delay: 300ms;
}

/* Map Animations */
@keyframes map-zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
.animate-map-zoom {
  animation: map-zoom 40s ease-in-out infinite alternate;
}

/* --- High-Contrast Dark Map Fix --- */
.leaflet-container {
  background: #ffffff !important;
}

.dark-map-wrapper {
  filter: invert(100%) hue-rotate(180deg) brightness(500%) contrast(110%)
    grayscale(100%);
}

/* --- Icon Marquee Animations --- */
.hover-pause:hover {
  animation-play-state: paused;
}
.animate-marquee {
  animation: marquee 15s linear infinite;
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-25%);
  } /* Loops exactly 1/4 of the track */
}

/* --- Typewriter Cursor (Hidden but kept for safety) --- */
.typing-cursor::after {
  content: "|";
  color: #818cf8;
  animation: blink 1s step-end infinite;
  margin-left: 2px;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}