/* Aurora Background Mesh Animation */
.aurora-bg {
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(ellipse at 20% 40%, rgba(124, 58, 237, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(236, 72, 153, 0.06) 0%, transparent 50%);
  background-size: 200% 200%;
  animation: auroraShift 25s ease infinite alternate;
  pointer-events: none;
  z-index: 1;
  transform: translateZ(0);
}

@keyframes auroraShift {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%;
  }
  33% {
    background-position: 100% 50%, 0% 100%, 0% 0%;
  }
  66% {
    background-position: 50% 100%, 50% 0%, 100% 50%;
  }
  100% {
    background-position: 0% 0%, 100% 0%, 50% 100%;
  }
}

/* Splash Screen SVG logo drawing */
@keyframes logoDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.logo-path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: logoDraw 2s ease forwards;
}

.logo-triangle {
  opacity: 0;
  transform: scale(0.5);
  transform-origin: 50px 50px;
  animation: scaleFadeIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s forwards;
}

@keyframes scaleFadeIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Page transitions / blur dissolve */
.fade-in-blur {
  animation: fadeInBlur 600ms var(--spring-gentle) forwards;
}

@keyframes fadeInBlur {
  from {
    opacity: 0;
    filter: blur(15px);
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

/* Splash screen fade out */
.fade-out-blur {
  animation: fadeOutBlur 500ms var(--ease-standard) forwards;
}

@keyframes fadeOutBlur {
  from {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
  to {
    opacity: 0;
    filter: blur(15px);
    transform: scale(0.95);
  }
}

/* Chat bubble entrance animations */
.msg-container {
  display: flex;
  width: 100%;
  animation: messageSlideIn 300ms var(--spring-bounce) forwards;
  opacity: 0;
  transform: translateY(15px);
}

@keyframes messageSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Shake Animation for Login errors */
.shake-error {
  animation: shake 400ms ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* Pulse animation for record ring */
@keyframes pulseGlowRing {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.pulsing-record {
  animation: pulseGlowRing 1.5s infinite;
}

/* Progress bar sweeps */
@keyframes progressSweep {
  from { background-position: 0% 0%; }
  to { background-position: 100% 100%; }
}

/* Skeleton Loading fade */
@keyframes pulseOpacity {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.pulse-loading {
  animation: pulseOpacity 1.5s ease-in-out infinite;
}