/* Animations: keyframes and animation classes */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(252, 92, 101, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 15px rgba(252, 92, 101, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(252, 92, 101, 0);
  }
}
@keyframes uploading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes wave {
  0%, 100% {
    height: 5px;
  }
  50% {
    height: 15px;
  }
}
@keyframes microphoneLoading {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes subtleGlow {
  0% {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 0 6px 20px rgba(252, 92, 101, 0.5), 0 0 0 4px rgba(252, 92, 101, 0.3);
  }
  100% {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}
.btn-record.recording {
  animation: pulse 1s infinite;
}
.btn-record.loading {
  animation: microphoneLoading 0.5s ease-in-out, subtleGlow 0.5s ease-in-out;
  pointer-events: none;
}
.btn-nav.uploading {
  animation: uploading 1s linear infinite;
}
.btn-submit.uploading {
  animation: none;
  opacity: 0.8;
  pointer-events: none;
}
.btn-submit.hidden {
  opacity: 0;
  transform: scale(0.8);
  animation: none;
}
.fade-out {
  animation: fadeOut 0.5s forwards;
  pointer-events: none;
}
.thank-you-container {
  animation: fadeInUp 0.8s ease-out;
}