/*
 * Modern 2026 styling for spot if AI
 */

/* Inter Variable Font */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format('woff2');
}

/* Space Grotesk Variable Font */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/SpaceGrotesk-Variable.woff2") format('woff2');
}

/* Headings use Space Grotesk */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

html {
  background-color: #050505;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Selection color */
::selection {
  background-color: rgba(168, 85, 247, 0.3);
}

/* Hide browser's native search clear button */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Subtle glow effect for cards */
.glow-card {
  box-shadow: 0 0 50px -12px rgba(168, 85, 247, 0.15);
}

/* Animated gradient text */
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

/* Marquee text slide effect on hover/touch */
.marquee-container {
  overflow: hidden;
  position: relative;
}

.marquee-text {
  display: inline-block;
  white-space: nowrap;
  transition: transform 0.3s ease-out;
}

/* On card hover, slide text that overflows */
.marquee-card:hover .marquee-text,
.marquee-card:focus-within .marquee-text {
  animation: marquee-slide 3s linear infinite;
  animation-delay: 0.2s;
}

@keyframes marquee-slide {
  0%, 10% { transform: translateX(0); }
  45%, 55% { transform: translateX(var(--marquee-offset, 0)); }
  90%, 100% { transform: translateX(0); }
}