/* ========================================
   PG AUTO - ANIMATIONS & INTERACTIONS
   Scroll-in, hover effects, micro-interactions
   ======================================== */

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.94);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes wiggle {
  0%,
  7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%,
  100% {
    transform: rotateZ(0);
  }
}

@keyframes glowRed {
  0% {
    box-shadow: 0 0 18px rgba(255, 42, 42, 0.25);
  }
  50% {
    box-shadow: 0 0 38px rgba(255, 90, 0, 0.35);
  }
  100% {
    box-shadow: 0 0 18px rgba(255, 42, 42, 0.25);
  }
}

@keyframes floatUp {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-18px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes electricPulseRed {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 42, 42, 0.55);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 42, 42, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 42, 42, 0);
  }
}

/* ========================================
   SCROLL-IN ANIMATIONS (IntersectionObserver adds .animate-in)
   ======================================== */

.animate-in {
  animation: slideInUp 0.8s ease-out forwards;
}

.service-card,
.stat-item,
.blog-card,
.contact-item,
.tire-brands,
.emergency-callout {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-card.animate-in,
.stat-item.animate-in,
.blog-card.animate-in,
.contact-item.animate-in,
.tire-brands.animate-in,
.emergency-callout.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.stat-item.animate-in {
  animation: bounceIn 0.6s ease-out;
}

/* Hero subtle float */
.hero-image {
  animation: floatUp 4s ease-in-out infinite;
}

/* Buttons pulse on click */
.cta-primary:active,
.service-btn.emergency:active,
.sticky-phone a:active {
  animation: electricPulseRed 0.6s ease;
}

/* Hover glow utilities */
.hover-glow:hover {
  animation: glowRed 2s ease-in-out infinite;
}

/* Notifications */
.notification {
  animation: slideInRight 0.3s ease-out;
}

/* ========================================
   Reduced motion
   ======================================== */

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