@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --color-accent: #caff04; /* Neon yellow/green */
  --color-dark: #050505;
  --color-darker: #000000;
  --color-light: #f5f5f5;
  --color-muted: #a3a3a3;
}

body {
  background-color: var(--color-dark);
  color: var(--color-light);
  font-family: var(--font-sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-display);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-darker);
}
::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* Hide scrollbar for horizontal scrolling containers */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Marquee Animation */
.marquee-content {
  display: flex;
  animation: scroll 30s linear infinite;
  width: max-content;
}

.marquee-content.reverse {
  animation: scroll-reverse 30s linear infinite;
}

/* Pause on hover */
.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 1rem)); } /* -50% of the total width minus half the gap */
}

@keyframes scroll-reverse {
  0% { transform: translateX(calc(-50% - 1rem)); }
  100% { transform: translateX(0); }
}

/* Product Reveal Animation */
.product-inner {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card.active .product-inner {
  opacity: 1;
  transform: translateY(0);
}

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

/* Video Carousel States */
.video-card {
  will-change: transform, opacity, filter;
}

.state-active {
  z-index: 30;
  transform: translateX(0) scale(1);
  opacity: 1;
  filter: blur(0px);
}

.state-next {
  z-index: 20;
  transform: translateX(35%) scale(0.85);
  opacity: 0.5;
  filter: blur(3px);
  cursor: pointer;
}

.state-prev {
  z-index: 20;
  transform: translateX(-35%) scale(0.85);
  opacity: 0.5;
  filter: blur(3px);
  cursor: pointer;
}

@media (max-width: 768px) {
  .state-next {
    transform: translateX(15%) scale(0.85);
  }
  .state-prev {
    transform: translateX(-15%) scale(0.85);
  }
}

.state-next:hover, .state-prev:hover {
  opacity: 0.8;
  filter: blur(1px);
}