/* SpinzVault Custom Styles & Animations */

:root {
  --color-obsidian-950: #0a0a0c;
  --color-obsidian-900: #121216;
  --color-obsidian-800: #1a1a24;
  --color-obsidian-700: #252535;
  --color-neon-purple: #a855f7;
  --color-neon-blue: #3b82f6;
  --color-neon-green: #22c55e;
}

body {
  background-color: var(--color-obsidian-950);
  color: #f3f4f6;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-obsidian-950);
}
::-webkit-scrollbar-thumb {
  background: var(--color-obsidian-700);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-neon-purple);
}

/* Gradients and Glows */
.bg-gradient-obsidian {
  background: linear-gradient(135deg, var(--color-obsidian-900) 0%, var(--color-obsidian-800) 100%);
}

.border-glow-purple {
  border: 1px solid rgba(168, 85, 247, 0.2);
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.1);
  transition: all 0.3s ease;
}
.border-glow-purple:hover {
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.25);
}

.border-glow-blue {
  border: 1px solid rgba(59, 130, 246, 0.2);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.1);
  transition: all 0.3s ease;
}
.border-glow-blue:hover {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.25);
}

.text-gradient {
  background: linear-gradient(135deg, #c084fc 0%, #6366f1 50%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Turntable Rotation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin 6s linear infinite;
}

.animate-spin-paused {
  animation-play-state: paused;
}

/* Scanner Animation */
@keyframes scan {
  0% {
    top: 0%;
  }
  50% {
    top: 100%;
  }
  100% {
    top: 0%;
  }
}

.scanner-laser {
  height: 3px;
  background: linear-gradient(90deg, transparent, #22c55e, transparent);
  box-shadow: 0 0 8px #22c55e, 0 0 15px #22c55e;
  position: absolute;
  left: 0;
  right: 0;
  animation: scan 2.5s linear infinite;
  z-index: 10;
}

/* Pulsing scanner border */
@keyframes pulse-border {
  0%, 100% {
    border-color: rgba(34, 197, 94, 0.3);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.1);
  }
  50% {
    border-color: rgba(34, 197, 94, 0.8);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
  }
}

.scanner-box {
  border: 2px dashed rgba(34, 197, 94, 0.5);
  animation: pulse-border 2s infinite;
}

/* Shimmer/Skeleton loading */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer {
  background: linear-gradient(90deg, #1a1a24 25%, #252535 50%, #1a1a24 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Wear grading slider styling */
input[type="range"]::-webkit-slider-thumb {
  background: var(--color-neon-purple);
  box-shadow: 0 0 10px var(--color-neon-purple);
  cursor: pointer;
  border-radius: 9999px;
  width: 18px;
  height: 18px;
  border: 2px solid white;
}

input[type="range"]::-moz-range-thumb {
  background: var(--color-neon-purple);
  box-shadow: 0 0 10px var(--color-neon-purple);
  cursor: pointer;
  border-radius: 9999px;
  width: 18px;
  height: 18px;
  border: 2px solid white;
}

/* Card Zoom effect */
.hover-zoom {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.hover-zoom:hover {
  transform: translateY(-4px) scale(1.02);
}