/* Custom CSS for things Tailwind doesn't cover easily */

/* Ensure smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Slider Input Styling */
/* We want the range input to be invisible but clickable/draggable over the whole area */
#slider-input {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

#slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 0;
}

#slider-input::-moz-range-thumb {
  width: 0;
  height: 0;
  border: none;
}

/* Handle rotation for vertical arrows in slider handle */
#slider-handle svg {
  transform: rotate(90deg);
}

/* Pulse Animation for WhatsApp Button */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.pulse {
  animation: pulse 2s infinite;
}

/* Scroll Animation Classes */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}