/* ==========================================================================
   NOVACHAT - ANIMATIONS, KEYFRAMES & MICRO-INTERACTIONS
   Aesthetic: Cosmic Cyber-Studio, Ultra-Fluid 60fps Motion
   ========================================================================== */

/* Ambient Floating Background Orbs */
@keyframes floatAmbient {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  33% {
    transform: translate(50px, 35px) scale(1.12) rotate(4deg);
  }
  66% {
    transform: translate(-35px, 20px) scale(0.92) rotate(-3deg);
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

/* Starlight Twinkle Effect */
@keyframes starTwinkle {
  0%, 100% {
    opacity: 0.25;
    transform: scale(1);
  }
  50% {
    opacity: 0.65;
    transform: scale(1.05);
  }
}

/* Pulsing Live Dot */
@keyframes pulseDot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 8px #10b981;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.7;
    box-shadow: 0 0 16px #10b981, 0 0 24px rgba(16, 185, 129, 0.4);
  }
}

/* Recording / Live Screen Blinking Indicator */
@keyframes pulseRecording {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 6px #ff2a6d;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.5;
    box-shadow: 0 0 14px #ff2a6d;
  }
}

/* Flame wiggle for Firebase Badge */
@keyframes flameWiggle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.15) rotate(-5deg);
  }
  75% {
    transform: scale(1.08) rotate(4deg);
  }
}

/* Soundwave Equalizer Bars */
@keyframes soundBars {
  0% {
    height: 8px;
    opacity: 0.6;
  }
  50% {
    height: 38px;
    opacity: 1;
  }
  100% {
    height: 14px;
    opacity: 0.8;
  }
}

/* Cosmic Voice Stage Orb Breathing */
@keyframes cosmicOrbPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 50px rgba(0, 242, 254, 0.25), 0 0 100px rgba(157, 78, 221, 0.2);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 70px rgba(0, 242, 254, 0.45), 0 0 130px rgba(157, 78, 221, 0.35);
  }
}

/* Rotating Cosmic Ring */
@keyframes cosmicRingSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Speaking Peer Pulse Wave */
@keyframes speakingPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8), 0 0 15px rgba(16, 185, 129, 0.5);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(16, 185, 129, 0), 0 0 25px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Pulsing Glow Border for Screen Sharing Active Button */
@keyframes pulseGlowBorder {
  0%, 100% {
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
    border-color: rgba(0, 242, 254, 0.6);
  }
  50% {
    box-shadow: 0 0 32px rgba(0, 242, 254, 0.8), inset 0 0 15px rgba(0, 242, 254, 0.25);
    border-color: rgba(0, 242, 254, 1);
  }
}

/* Shimmer Light Reflection Sweep across Hero Buttons */
@keyframes shimmerSweep {
  0% {
    transform: translateX(-150%) skewX(-20deg);
  }
  40%, 100% {
    transform: translateX(250%) skewX(-20deg);
  }
}

/* Slide Down / Fade In */
@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide Up / Fade In */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Chat Message Pop In */
@keyframes fadeInMessage {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Toast Notification Slide In */
@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(40px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Modal Backdrops & Cards */
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalScaleUp {
  from {
    opacity: 0;
    transform: scale(0.93) translateY(14px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Popover Dropdown Fade */
@keyframes popoverFade {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* Flying Reaction Emojis with Natural Wobble */
@keyframes flyUpAndFade {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.5) rotate(0deg);
  }
  15% {
    transform: translateY(-80px) scale(1.35) rotate(-12deg);
  }
  45% {
    transform: translateY(-250px) scale(1.15) rotate(14deg);
  }
  75% {
    opacity: 0.95;
    transform: translateY(-460px) scale(1) rotate(-8deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-680px) scale(0.7) rotate(20deg);
  }
}

/* High-Tech Spinner */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.08);
  border-top-color: #00f2fe;
  border-right-color: #9d4edd;
  border-radius: 50%;
  animation: spin 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* NovaChat Wallpaper Ambient Cinematic Pan & Breath */
@keyframes wallpaperSlowPan {
  0% {
    transform: scale(1.02) translate(0, 0);
  }
  50% {
    transform: scale(1.06) translate(-1.2%, -1%);
  }
  100% {
    transform: scale(1.03) translate(1.2%, 0.8%);
  }
}

/* Micro-interaction: Input Pulse on Randomize / Generate */
@keyframes inputPulseAnim {
  0% {
    transform: scale(1);
    border-color: rgba(0, 242, 254, 0.2);
  }
  40% {
    transform: scale(1.018);
    border-color: #00f2fe;
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.45);
  }
  100% {
    transform: scale(1);
    border-color: rgba(255, 255, 255, 0.12);
  }
}

.input-pulse-anim {
  animation: inputPulseAnim 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}