/* Custom Styles for 1:1 Replica */

/* Hide scrollbar but keep functionality */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Smooth scroll snap for carousel */
.scroll-snap-x {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.scroll-snap-item {
  scroll-snap-align: start;
}

/* Vinyl disc rotation animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.vinyl-spin {
  animation: spin 8s linear infinite;
}

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

/* FAQ Accordion smooth transition */
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 300ms ease-in-out, opacity 300ms ease-in-out;
}

.accordion-content.open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.accordion-content > div {
  min-height: 0;
  overflow: hidden;
}

/* Audio progress bar custom styling */
input[type="range"].audio-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  outline: none;
  background: #ececec;
}

input[type="range"].audio-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold-accent);
  cursor: pointer;
}

input[type="range"].audio-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold-accent);
  cursor: pointer;
  border: none;
}

/* Modal backdrop blur */
.modal-backdrop {
  backdrop-filter: blur(4px);
}

/* Smooth transitions */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}