/* Cinematic Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #12121a;
}

::-webkit-scrollbar-thumb {
  background: #323240;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4a4a5e;
}

/* Custom Animations */
.animate-fade-in {
  animation: fadeIn 0.4s ease-out;
}

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

.animate-slide-in {
  animation: slideIn 0.3s ease-out;
}

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

/* Shimmer effect for loading */
.shimmer-bg {
  background: linear-gradient(90deg, #1a1a25 25%, #252532 50%, #1a1a25 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
}

/* Shot card hover effects */
.shot-card {
  transition: all 0.3s ease;
}

.shot-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px -10px rgba(212, 168, 83, 0.15);
}

/* Range slider styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: #252532;
  border-radius: 2px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #d4a853;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Scene card expanded state */
.scene-expanded {
  border-color: rgba(212, 168, 83, 0.3);
}

/* Generating pulse ring */
.pulse-ring {
  position: relative;
}

.pulse-ring::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid #d4a853;
  animation: pulseRing 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}

@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.05); opacity: 0; }
}

/* Typography refinements */
.font-mono {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* Mobile optimizations */
@media (max-width: 1024px) {
  .nav-item {
    padding: 0.75rem 1rem;
  }
}

/* Glass effect enhancement */
.glass-panel {
  background: rgba(26, 26, 37, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Loading bar stripe animation */
.stripe-animated {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: stripeMove 1s linear infinite;
}

@keyframes stripeMove {
  0% { background-position: 0 0; }
  100% { background-position: 1rem 0; }
}

/* Active navigation state */
.active-nav {
  background: rgba(212, 168, 83, 0.1);
  color: #d4a853;
  border: 1px solid rgba(212, 168, 83, 0.2);
}

.active-nav svg {
  color: #d4a853;
}