/* ===================================
   Global Transitions & Hover Effects
   =================================== */

/* Global transition duration */
:root {
  --transition-duration: 0.5s;
  --transition-timing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Universal button transitions */
.btn,
.btn-modern,
.btn-primary-modern,
.btn-secondary-modern,
.btn-hero-primary,
.btn-hero-secondary,
.cta-btn-primary-new,
.cta-btn-secondary-new,
.portfolio-view-all-btn,
.newsletter-btn {
  transition: all var(--transition-duration) var(--transition-timing) !important;
}

/* Button hover effects */
.btn:hover,
.btn-modern:hover,
.btn-primary-modern:hover,
.btn-secondary-modern:hover,
.btn-hero-primary:hover,
.btn-hero-secondary:hover,
.cta-btn-primary-new:hover,
.cta-btn-secondary-new:hover,
.portfolio-view-all-btn:hover,
.newsletter-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(46, 43, 226, 0.3) !important;
}

/* Card transitions */
.card,
.card-modern,
.feature-card,
.portfolio-card-new,
.stats-card {
  transition: all var(--transition-duration) var(--transition-timing) !important;
}

/* Card hover effects */
.card:hover,
.card-modern:hover,
.feature-card:hover,
.portfolio-card-new:hover,
.stats-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Link transitions */
a,
.nav-link,
.nav-link-modern,
.footer-links-new a,
.portfolio-btn {
  transition: all var(--transition-duration) var(--transition-timing) !important;
}

/* Navigation link hover effects */
.nav-link:hover,
.nav-link-modern:hover {
  transform: translateY(-2px) !important;
}

/* Footer link hover effects with bottom line */
.footer-links-new a {
  position: relative !important;
  display: inline-block !important;
}

.footer-links-new a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--primary-color) !important;
  transition: width var(--transition-duration) var(--transition-timing) !important;
}

.footer-links-new a:hover::after {
  width: 100% !important;
}

.footer-links-new a:hover {
  color: var(--primary-color) !important;
  transform: translateX(0) !important;
}

/* Image transitions */
img,
.portfolio-img,
.hero-image {
  transition: all var(--transition-duration) var(--transition-timing) !important;
}

/* Form element transitions */
input,
textarea,
select,
.form-control,
.newsletter-input {
  transition: all var(--transition-duration) var(--transition-timing) !important;
}

/* Form focus effects */
input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.newsletter-input:focus {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(46, 43, 226, 0.2) !important;
}

/* Social link transitions */
.social-link,
.social-link-new {
  transition: all var(--transition-duration) var(--transition-timing) !important;
}

.social-link:hover,
.social-link-new:hover {
  transform: translateY(-4px) scale(1.1) !important;
}

/* Icon transitions */
i,
.fas,
.fab,
.far {
  transition: all var(--transition-duration) var(--transition-timing) !important;
}

/* Theme toggle transitions */
.theme-toggle,
.theme-toggle-icon {
  transition: all var(--transition-duration) var(--transition-timing) !important;
}

/* Background transitions for theme switching */
body,
section,
.hero-section-modern,
.portfolio-section-new,
.cta-section-new,
.footer-new {
  transition: background-color var(--transition-duration) var(--transition-timing),
              color var(--transition-duration) var(--transition-timing) !important;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-duration: 0.1s;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.1s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1s !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* Performance optimizations */
.btn,
.card,
a,
img {
  will-change: transform;
}

.btn:not(:hover),
.card:not(:hover),
a:not(:hover),
img:not(:hover) {
  will-change: auto;
}