/* Essential Styles Only - Most styling is in Tailwind classes */

/* View transitions */
.view {
  transition: opacity 300ms ease, transform 300ms ease;
}

.view.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.98);
}

/* Voice indicator states */
#voiceIndicator {
  transform: translateY(20px) scale(0.95);
}

#voiceIndicator:not(.opacity-0) {
  opacity: 1 !important;
  transform: translateY(0) scale(1);
}

#voiceIndicator.speaking .bg-slate-900 {
  background-color: rgb(239 68 68) !important;
}

#voiceIndicator.processing .bg-slate-900 {
  background-color: rgb(245 158 11) !important;
}

#voiceIndicator.speaking .pulse-ring {
  animation: pulse-ring 1.5s ease-out infinite;
}

/* Status overlay transitions */
#statusOverlay:not(.hidden) {
  animation: slideDown 300ms ease-out;
}

#statusOverlay.success .bg-slate-900 {
  background-color: rgb(16 185 129) !important;
}

#statusOverlay.error .bg-slate-900 {
  background-color: rgb(239 68 68) !important;
}

/* Share modal transitions */
#shareModal:not(.hidden) {
  animation: fadeIn 200ms ease-out;
}

#shareModal:not(.hidden) .relative {
  animation: slideUp 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Landing page fade in */
.animate-fade-in {
  animation: fadeInUp 800ms ease-out;
}

/* Animations */
@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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