/* Custom styles to complement Tailwind CSS */

body {
    zoom: 0.80;
}

/* Style for the progress-based VU meter */
progress[value] {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    height: 1rem; /* 16px */
}

progress[value]::-webkit-progress-bar {
    background-color: #e5e7eb; /* gray-200 */
    border-radius: 9999px;
}

progress[value]::-webkit-progress-value {
    background-color: #3b82f6; /* brand-blue-500 */
    border-radius: 9999px;
    transition: width 0.1s ease;
}

progress[value]::-moz-progress-bar {
    background-color: #3b82f6; /* brand-blue-500 */
    border-radius: 9999px;
    transition: width 0.1s ease;
}

.dark progress[value]::-webkit-progress-bar {
    background-color: #374151; /* gray-700 */
}

/* Add a subtle animation to the recording button for better feedback */
.animate-pulse {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .7;
  }
}

/* Styles for the mock visualizer on the homepage */
@keyframes wave {
    0% { height: 20%; }
    50% { height: 100%; }
    100% { height: 20%; }
}

.visualizer-bar {
    animation: wave 2s infinite ease-in-out;
}

/* Stagger the animation start times */
.visualizer-bar:nth-child(2) { animation-delay: 0.2s; }
.visualizer-bar:nth-child(3) { animation-delay: 0.4s; }
.visualizer-bar:nth-child(4) { animation-delay: 0.6s; }
.visualizer-bar:nth-child(5) { animation-delay: 0.8s; }
.visualizer-bar:nth-child(6) { animation-delay: 1.0s; }

/* Styles for FAQ accordion icon transition */
.faq-question .faq-icon {
    transition: transform 0.3s ease;
}

.faq-answer.open + .faq-question .faq-icon {
    transform: rotate(45deg);
}