/* ============================================================
   QuickFix Home Services — Animations
   ============================================================ */

/* 1. Emergency banner pulse */
@keyframes emergencyPulse {
  0%, 100% { box-shadow: 0 2px 0 rgba(214,40,40,0); }
  50%       { box-shadow: 0 4px 16px rgba(214,40,40,0.5); }
}

/* 2. Phone icon wiggle */
@keyframes phoneWiggle {
  0%, 80%, 100% { transform: rotate(0deg); }
  85%            { transform: rotate(-18deg); }
  90%            { transform: rotate(18deg); }
  95%            { transform: rotate(-10deg); }
}

.phone-wiggle {
  display: inline-block;
  animation: phoneWiggle 4s ease infinite;
}

/* 3. Status dot blink */
@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--color-success);
  border-radius: var(--radius-full);
  animation: statusBlink 1.4s ease infinite;
  flex-shrink: 0;
}

/* 4. Reviews auto-scroll */
@keyframes reviewsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.reviews-track {
  display: flex;
  gap: var(--space-6);
  animation: reviewsScroll 32s linear infinite;
  width: max-content;
}

.reviews-track:hover {
  animation-play-state: paused;
}

/* 5. Fade up on scroll */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
}

.reveal.visible {
  animation: fadeUp 400ms ease forwards;
}

/* 6. Button emergency pulse */
@keyframes btnEmergencyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214,40,40,0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(214,40,40,0); }
}

/* 7. Spin for loading */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 8. Bounce in */
@keyframes bounceIn {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

/* 9. Form success check */
@keyframes checkDraw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

/* 10. Slide down mobile menu */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 11. Bar pulse for emergency */
@keyframes barPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.85; }
}

/* Stagger delays for grid items */
.reveal:nth-child(1) { animation-delay: 0ms; }
.reveal:nth-child(2) { animation-delay: 60ms; }
.reveal:nth-child(3) { animation-delay: 120ms; }
.reveal:nth-child(4) { animation-delay: 180ms; }
.reveal:nth-child(5) { animation-delay: 240ms; }
.reveal:nth-child(6) { animation-delay: 300ms; }