/* ===========================================
   KFX ROOFING - BLUE SMOKE ANIMATIONS
   Keyframes & Motion Effects
   Last Updated: November 29, 2025
   =========================================== */

/* ===========================================
   PARTICLE ANIMATIONS
   =========================================== */

/* Particles falling from center, drifting horizontally, fading out */
@keyframes floatDown {
  0% {
    opacity: 0;
    transform: translateY(-20px) translateX(0);
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) translateX(var(--drift, 50px));
  }
}

/* Alternate particle animation with rotation */
@keyframes floatDownRotate {
  0% {
    opacity: 0;
    transform: translateY(-20px) rotate(0deg);
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(360deg);
  }
}

/* ===========================================
   GLOW ANIMATIONS
   =========================================== */

/* Badge glow pulse */
@keyframes badgeGlow {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(17, 141, 240, 0.2),
      0 8px 32px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow:
      0 0 40px rgba(17, 141, 240, 0.4),
      0 8px 32px rgba(0, 0, 0, 0.4);
  }
}

/* Source glow breathing effect */
@keyframes particlePulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

/* Button glow on hover */
@keyframes buttonGlow {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(17, 141, 240, 0.4);
  }
  50% {
    box-shadow: 0 6px 25px rgba(17, 141, 240, 0.6);
  }
}

/* Icon glow pulse */
@keyframes iconGlow {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(17, 141, 240, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(17, 141, 240, 0.6));
  }
}

/* ===========================================
   BACKGROUND ANIMATIONS
   =========================================== */

/* Ken Burns effect for backgrounds */
@keyframes kenBurns {
  0% {
    transform: scale(1) translateX(0);
  }
  50% {
    transform: scale(1.1) translateX(-2%);
  }
  100% {
    transform: scale(1) translateX(0);
  }
}

/* Drifting smoke effect */
@keyframes driftSmoke {
  0% {
    opacity: 0.3;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    opacity: 0.5;
    transform: translateX(-50%) translateY(-20px) scale(1.1);
  }
  100% {
    opacity: 0.3;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* Gradient pulse / breathing orbs */
@keyframes gradientPulse {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.2);
  }
}

/* Aurora waves effect */
@keyframes auroraWave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ===========================================
   UI ELEMENT ANIMATIONS
   =========================================== */

/* Fade in up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Slide in from left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide in from right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide in from bottom */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale in */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===========================================
   EMERGENCY / ALERT ANIMATIONS
   =========================================== */

/* Emergency button pulse (red) */
@keyframes emergencyPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.7);
  }
}

/* Attention pulse (orange) */
@keyframes attentionPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.6);
  }
}

/* ===========================================
   LOADING ANIMATIONS
   =========================================== */

/* Spinner rotation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Dots loading */
@keyframes dotsLoading {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Skeleton shimmer */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ===========================================
   ANIMATION UTILITY CLASSES
   =========================================== */

/* Apply badge glow animation */
.bs-animate-glow {
  animation: badgeGlow 3s ease-in-out infinite;
}

/* Apply button glow on hover */
.bs-animate-button-glow:hover {
  animation: buttonGlow 1.5s ease-in-out infinite;
}

/* Apply icon glow */
.bs-animate-icon-glow {
  animation: iconGlow 2s ease-in-out infinite;
}

/* Apply fade in up animation */
.bs-animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Apply fade in animation */
.bs-animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

/* Apply slide in animations */
.bs-animate-slide-left {
  animation: slideInLeft 0.5s ease-out forwards;
}

.bs-animate-slide-right {
  animation: slideInRight 0.5s ease-out forwards;
}

.bs-animate-slide-up {
  animation: slideInUp 0.5s ease-out forwards;
}

/* Apply scale in animation */
.bs-animate-scale-in {
  animation: scaleIn 0.4s ease-out forwards;
}

/* Spin animation */
.bs-animate-spin {
  animation: spin 1s linear infinite;
}

/* Shimmer loading effect */
.bs-animate-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ===========================================
   ANIMATION DELAYS
   =========================================== */

.bs-delay-100 { animation-delay: 0.1s; }
.bs-delay-200 { animation-delay: 0.2s; }
.bs-delay-300 { animation-delay: 0.3s; }
.bs-delay-400 { animation-delay: 0.4s; }
.bs-delay-500 { animation-delay: 0.5s; }
.bs-delay-600 { animation-delay: 0.6s; }
.bs-delay-700 { animation-delay: 0.7s; }
.bs-delay-800 { animation-delay: 0.8s; }
.bs-delay-900 { animation-delay: 0.9s; }
.bs-delay-1000 { animation-delay: 1s; }

/* ===========================================
   ANIMATION DURATIONS
   =========================================== */

.bs-duration-fast { animation-duration: 0.2s; }
.bs-duration-normal { animation-duration: 0.4s; }
.bs-duration-slow { animation-duration: 0.6s; }
.bs-duration-slower { animation-duration: 1s; }

/* ===========================================
   REDUCED MOTION
   Respect user preferences for reduced motion
   =========================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .bs-animate-glow,
  .bs-animate-button-glow,
  .bs-animate-icon-glow,
  .bs-animate-shimmer {
    animation: none;
  }
}

/* ===========================================
   END OF BLUE SMOKE ANIMATIONS
   =========================================== */