/* Custom Stylesheet for Quantum HWID (Light Blue Theme) */

/* Subtle background grid overlay */
.grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-size: 64px 64px;
  background-image: 
    linear-gradient(to right, rgba(0, 210, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 210, 255, 0.04) 1px, transparent 1px);
  z-index: 1;
}

/* Custom scrollbar for reviews panel */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(28, 24, 18, 0.2);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #2e271d;
  border-radius: 2px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #00d2ff;
}

/* Scanline overlay for viewport */
.scanline-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.15) 50%
  );
  background-size: 100% 4px;
  pointer-events: none;
  opacity: 0.35;
}

/* Light Blue drop shadow highlight for characters */
.character-glow {
  filter: drop-shadow(0 0 35px rgba(0, 210, 255, 0.16)) brightness(0.85) contrast(1.05);
  transform: scale(1.4);
  transform-origin: bottom;
  pointer-events: auto; /* Enable mouse hover events even inside a pointer-events-none container */
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Premium bouncy cubic-bezier */
}

.character-glow:hover {
  filter: drop-shadow(0 0 65px rgba(0, 210, 255, 0.45)) brightness(1.05) contrast(1.1);
  transform: scale(1.48) translateY(-12px);
  cursor: pointer;
}

/* Floating animation for product box image */
@keyframes float {
  0% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-12px) scale(1.03);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}
.float-animation {
  animation: float 5s ease-in-out infinite;
}

/* Pulse Glow animation for CTA elements */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(0, 210, 255, 0.55);
  }
}
.pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* Infinite scrolling marquee animations */
.marquee-container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.marquee-container::before,
.marquee-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  z-index: 2;
  pointer-events: none;
}

.marquee-container::before {
  left: 0;
  background: linear-gradient(to right, #120f0a 0%, transparent 100%);
}

.marquee-container::after {
  right: 0;
  background: linear-gradient(to left, #120f0a 0%, transparent 100%);
}

.marquee-row {
  display: flex;
  width: max-content;
  gap: 1.5rem;
}

.animate-marquee-left {
  animation: marquee-left 35s linear infinite;
}

.animate-marquee-right {
  animation: marquee-right 35s linear infinite;
}

.marquee-row:hover {
  animation-play-state: paused;
}

@keyframes marquee-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marquee-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}