/* 
==============================================
SUBTLE HOVER ANIMATIONS
==============================================
*/

/* Navigation links subtle animation */
.nav-links li a {
  position: relative;
  transition: color 0.3s ease;
}

.nav-links li a::after {
  transition: width 0.3s ease, opacity 0.2s ease;
  opacity: 0.7;
}

.nav-links li a:hover::after {
  opacity: 1;
}

/* Service cards subtle lift and shadow */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.service-icon {
  transition: transform 0.3s ease, color 0.3s ease;
}

.service-card:hover .service-icon {
  transform: scale(1.1);
  color: var(--accent);
}

/* Buttons subtle animation */
.cta-button, .secondary-button, .back-button {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.cta-button:hover, .secondary-button:hover, .back-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Tech tags */
.tech-tag {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.tech-tag:hover {
  transform: translateY(-2px) scale(1.05);
}

/* Footer links */
.footer-links li a {
  transition: padding-left 0.3s ease, color 0.3s ease;
}

.footer-links li a:hover {
  padding-left: 5px;
}

/* Social icons subtle pulse effect */
.social-icon {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.social-icon:hover {
  transform: translateY(-2px) scale(1.1);
}

/* Form inputs subtle highlight */
.form-input:focus, .form-textarea:focus {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* Case study cards */
.case-study-item {
  transition: transform 0.3s ease;
}

.case-study-item:hover .case-study-title {
  color: var(--accent);
}

/* Result metrics */
.result-metric {
  transition: transform 0.3s ease;
}

.result-metric:hover {
  transform: translateY(-3px);
}

.result-metric:hover .metric-value {
  color: var(--accent);
}