/* ============================================================
   AutoGenius - Automotive Animations
   Smooth 60fps mobile hardware-accelerated animations
   ============================================================ */

/* Pulsing engine glow */
@keyframes enginePulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(0, 180, 255, 0.4));
  }
  50% {
    transform: scale(1.02);
    filter: drop-shadow(0 0 25px rgba(0, 180, 255, 0.8));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(0, 180, 255, 0.4));
  }
}

.engine-pulsing {
  animation: enginePulse 3s ease-in-out infinite;
}

/* Piston Stroke Simulation */
@keyframes pistonReciprocate {
  0% { transform: translateY(0); }
  50% { transform: translateY(28px); }
  100% { transform: translateY(0); }
}

.piston-animated {
  animation: pistonReciprocate 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* Tachometer Needle Sweep */
@keyframes needleSweep {
  0% { transform: rotate(-120deg); }
  70% { transform: rotate(80deg); }
  85% { transform: rotate(60deg); }
  100% { transform: rotate(70deg); }
}

.needle-sweep {
  transform-origin: bottom center;
  animation: needleSweep 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Card Entry Stagger */
@keyframes cardSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-card-in {
  animation: cardSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Shimmer Loading State */
@keyframes skeletonShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-loading {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(0, 180, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
}

/* Ripple Click Effect */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 180, 255, 0.4);
  transform: scale(0);
  animation: rippleSpread 0.5s linear;
  pointer-events: none;
}

@keyframes rippleSpread {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Modal Open Fade Scale */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(15px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-enter {
  animation: modalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Badge Glow for High/Critical Severity */
@keyframes criticalBlink {
  0%, 100% {
    box-shadow: 0 0 5px rgba(255, 59, 59, 0.5);
  }
  50% {
    box-shadow: 0 0 16px rgba(255, 59, 59, 0.9);
  }
}

.badge-critical {
  animation: criticalBlink 1.6s infinite ease-in-out;
}