@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap");

html {
  font-family: "Inconsolata", monospace !important;
}

.fade-in-down {
  animation: fadeInDown 1s;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    /* transform: translateY(-20px); */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-zoom-in {
  animation: fadeZoomIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-zoom-out {
  animation: fadeZoomOut 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeZoomIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeZoomOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.95);
  }
}

.fade-overlay-out {
  animation: fadeOverlayOut 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeOverlayOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.front-card {
  background: rgba(24, 24, 24, 0.7); /* 70% opaque */
  /* Remove transform and transition if not needed */
  /* Remove box-shadow if you want less separation */
}


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

.hero-noise-bg {
  background-color: #121212;
  background-image: url("https://www.transparenttextures.com/patterns/otis-redding.png");
  background-repeat: repeat;
  background-size: auto;
}

.greynoise-logo-img{
  width: 20px;         /* or whatever size you want */
  height: 20px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Leaflet Map Styles */
.leaflet-container {
  background: #121212 !important;
}

.leaflet-popup-content-wrapper {
  background: #2F2F2F !important;
  color: white !important;
  border: 1px solid #404040 !important;
}

.leaflet-popup-tip {
  background: #2F2F2F !important;
  border: 1px solid #404040 !important;
}

.leaflet-control-container {
  z-index: 1000 !important;
}

.leaflet-pane {
  z-index: 400 !important;
}

.leaflet-overlay-pane {
  z-index: 400 !important;
}

.leaflet-marker-pane {
  z-index: 600 !important;
}

.leaflet-popup-pane {
  z-index: 650 !important;
}

.leaflet-tooltip-pane {
  z-index: 650 !important;
}

.leaflet-shadow-pane {
  z-index: 500 !important;
}

.leaflet-tile-pane {
  z-index: 200 !important;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Enhanced background patterns */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
      circle at 25% 25%,
      #1a1a1a 0%,
      transparent 50%
    ),
    radial-gradient(circle at 75% 75%, #1a1a1a 0%, transparent 50%);
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
}

/* Subtle grid pattern */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: -1;
  pointer-events: none;
}

/* Search page specific animations */
@keyframes pulse-heartbeat {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.1);
  }
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-pulse-heartbeat {
  animation: pulse-heartbeat 2s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-fade-in-up {
  animation: fade-in-up 0.5s ease-out 0.1s both;
}

/* Scroll animations for index.html */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation classes for scroll triggers */
.scroll-animate {
  opacity: 0;
  transition: all 0.6s ease-out;
}

.scroll-animate.animate {
  opacity: 1;
}

.fade-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

.slide-left {
  animation: slideInLeft 0.8s ease-out forwards;
}

.slide-right {
  animation: slideInRight 0.8s ease-out forwards;
}

.scale-in {
  animation: scaleIn 0.6s ease-out forwards;
}

.count-up {
  animation: countUp 0.8s ease-out forwards;
}

/* Enhanced card hover effects */
.feature-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(34, 197, 94, 0.2);
}

.tech-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
}

.tech-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

/* Subtle grid pattern background */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: -1;
  pointer-events: none;
}