@import "tailwindcss";

:root {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #000;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
}

#root {
  width: 100%;
  height: 100vh;
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.backdrop-blur-xl {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.backdrop-blur-2xl {
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

/* Scrollbar styling */
.scrollbar-thin::-webkit-scrollbar {
  width: 3px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(100, 200, 255, 0.15);
  border-radius: 2px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 200, 255, 0.3);
}

/* Globe HTML marker animations */
.globe-marker {
  transition: opacity 0.3s ease;
}
.globe-marker:hover {
  z-index: 100 !important;
}
.globe-marker:hover img {
  transform: scale(1.3);
  transition: transform 0.2s ease;
}

.globe-marker-conflict {
  animation: conflictPulse 2s ease-in-out infinite;
}

.globe-marker-launch {
  animation: launchGlow 3s ease-in-out infinite;
}

@keyframes conflictPulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.6; }
}

@keyframes launchGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}
