/* CSS Animations for Charlie Voice Assistant */

@keyframes float-glow {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
    box-shadow: 0 0 10px currentColor;
  }
  50% {
    transform: translateY(-16px) rotate(3deg);
    box-shadow: 0 0 20px currentColor;
  }
}

@keyframes breathing-light-1 {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

@keyframes breathing-light-2 {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.15) rotate(2deg);
  }
}

@keyframes breathing-light-3 {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(1) translateX(-50%);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2) translateX(-50%);
  }
}

@keyframes breathing-spotlight {
  0%,
  100% {
    opacity: 0.1;
    transform: translateX(-50%) translateY(-50%) scale(1);
  }
  50% {
    opacity: 0.3;
    transform: translateX(-50%) translateY(-50%) scale(1.3);
  }
}

@keyframes breathing-button {
  0%,
  100% {
    box-shadow:
      0 0 30px rgba(6, 182, 212, 0.5),
      0 0 60px rgba(59, 130, 246, 0.3);
  }
  50% {
    box-shadow:
      0 0 50px rgba(6, 182, 212, 0.8),
      0 0 100px rgba(59, 130, 246, 0.5);
  }
}

@keyframes breathing-glow-outer {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

@keyframes breathing-button-small {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(6, 182, 212, 0.4),
      0 0 40px rgba(59, 130, 246, 0.2);
  }
  50% {
    box-shadow:
      0 0 30px rgba(6, 182, 212, 0.6),
      0 0 60px rgba(59, 130, 246, 0.4);
  }
}

@keyframes breathing-glow-small {
  0%,
  100% {
    opacity: 0.1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.1);
  }
}

@keyframes wave-pulse {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@keyframes rotating-gradient {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Apply breathing animations */
.breathing-light-1 {
  animation: breathing-light-1 4s ease-in-out infinite;
}
.breathing-light-2 {
  animation: breathing-light-2 5s ease-in-out infinite 1s;
}
.breathing-light-3 {
  animation: breathing-light-3 6s ease-in-out infinite 2s;
}
.breathing-spotlight {
  animation: breathing-spotlight 7s ease-in-out infinite;
}
.breathing-button {
  animation: breathing-button 3s ease-in-out infinite;
}
.breathing-glow-outer {
  animation: breathing-glow-outer 2.5s ease-in-out infinite;
}
.breathing-button-small {
  animation: breathing-button-small 4s ease-in-out infinite;
}
.breathing-glow-small {
  animation: breathing-glow-small 3s ease-in-out infinite;
}

.call-active .call-active-wave {
  opacity: 1 !important;
  animation: wave-pulse 1.8s ease-out infinite !important;
}

.call-active #call-btn {
  opacity: 0 !important;
  transform: scale(0.8) !important;
  pointer-events: none !important;
}

.call-active #call-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #06b6d4,
    #3b82f6,
    #8b5cf6,
    #22c55e,
    #06b6d4
  );
  animation: rotating-gradient 2s linear infinite;
  z-index: -1;
  opacity: 0.9;
}

/* Dark Status states */
#status {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#status.status-connecting {
  background: rgba(251, 191, 36, 0.3) !important;
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 8px 32px rgba(251, 191, 36, 0.2) !important;
}

#status.status-live {
  background: rgba(34, 197, 94, 0.3) !important;
  color: #22c55e !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
  box-shadow: 0 8px 32px rgba(34, 197, 94, 0.2) !important;
}

#status.status-ended {
  background: rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 8px 32px rgba(239, 68, 68, 0.2) !important;
}

/* Enhanced clickability and hover effects */
#call-btn {
  position: relative !important;
  z-index: 50 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none !important;
}

#call-btn * {
  pointer-events: none !important;
}

#call-btn:hover {
  transform: scale(1.12) !important;
  box-shadow:
    0 0 60px rgba(6, 182, 212, 0.7),
    0 0 120px rgba(59, 130, 246, 0.5) !important;
}

#call-btn:active {
  transform: scale(1.08) !important;
  box-shadow:
    0 0 40px rgba(6, 182, 212, 0.9),
    0 0 80px rgba(59, 130, 246, 0.7) !important;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .breathing-light-1,
  .breathing-light-2,
  .breathing-light-3,
  .breathing-spotlight,
  .breathing-button,
  .breathing-glow-outer,
  .breathing-button-small,
  .breathing-glow-small {
    animation: none !important;
  }
}

/* General styling */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.no-underline {
  text-decoration: none;
}

.no-underline:hover {
  text-decoration: none;
}

/* Custom gradient for radial backgrounds */
.bg-gradient-radial {
  background: radial-gradient(circle, var(--tw-gradient-stops));
}