/**
 * V3.1 Enhancements - FINAL VERSION
 * Progressive enhancements for v3 theme
 */

/* 1. Frosted Glass Navigation */
body nav,
header nav {
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

/* 2. Better Easing Curves */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 3. Image Hover Effects */
.service-image img,
.about-image img,
img[src*="uploads"],
img[src*="images"] {
  filter: saturate(0.85) !important;
  transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.service-image:hover img,
.about-image:hover img,
img[src*="uploads"]:hover,
img[src*="images"]:hover {
  filter: saturate(1.1) !important;
  transform: scale(1.05) !important;
}

/* 4. Card Hover - Lift and Shadow */
.service-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.service-card:hover {
  transform: translateY(-15px) scale(1.02) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25) !important;
}

/* 5. Process Step Hover */
.process-step {
  transform-style: preserve-3d !important;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.process-step:hover {
  transform: translateY(-12px) rotateX(3deg) !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2) !important;
}

/* 6. Intersection Observer Fade-In */
.fade-in-on-scroll {
  opacity: 0 !important;
  transform: translateY(40px) !important;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.9s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fade-in-on-scroll.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger animation for multiple items */
.fade-in-on-scroll:nth-child(1).visible { transition-delay: 0s !important; }
.fade-in-on-scroll:nth-child(2).visible { transition-delay: 0.15s !important; }
.fade-in-on-scroll:nth-child(3).visible { transition-delay: 0.3s !important; }
.fade-in-on-scroll:nth-child(4).visible { transition-delay: 0.45s !important; }

/* 7. Enhanced Button Interactions */
.cta-button,
.btn-primary,
.hero-cta,
button[type="submit"],
a[href*="contact"] {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 8. Smooth Scroll */
html {
  scroll-behavior: smooth !important;
}

/* 9. Nav Link Underline Animation */
nav a {
  position: relative !important;
  display: inline-block !important;
}

nav a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -3px !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--v3-accent, #d4a574) !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

nav a:hover::after {
  width: 100% !important;
  left: 0 !important;
}

/* 10. Enhanced Focus States (accessibility) */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #d4a574 !important;
  outline-offset: 4px !important;
  border-radius: 4px !important;
}

/* 11. Nav Shadow on Scroll */
nav.scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .fade-in-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}