/**
 * iDesignYour.site - Modern, Elegant, Smooth Animations & Micro-Interactions
 * Performance-optimized: GPU-accelerated transforms & opacity, 60fps cubic-bezier curves
 */

/* 1. Scroll Progress Bar */
#scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2.5px;
  background: linear-gradient(90deg, #10b981 0%, #34d399 50%, #059669 100%);
  width: 0%;
  z-index: 99999;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.8), 0 0 4px rgba(16, 185, 129, 0.4);
  pointer-events: none;
  transition: width 0.08s ease-out;
}

/* 2. Floating 3D Animation & Ambient Glow Pulse */
@keyframes float3dSmooth {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-12px) rotate(1.5deg);
  }
  66% {
    transform: translateY(-6px) rotate(-1deg);
  }
}

.floating-3d {
  animation: float3dSmooth 7s ease-in-out infinite !important;
  will-change: transform;
}

@keyframes pulseGlowAura {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.95);
    filter: blur(40px);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.08);
    filter: blur(60px);
  }
}

.hero-3d-col .bg-primary\/10,
.hero-glow::before,
.hero-glow::after {
  animation: pulseGlowAura 6s ease-in-out infinite !important;
  will-change: opacity, transform, filter;
}

/* 3. Reveal-On-Scroll System */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger Utilities */
.stagger-1 { transition-delay: 0.07s !important; }
.stagger-2 { transition-delay: 0.14s !important; }
.stagger-3 { transition-delay: 0.21s !important; }
.stagger-4 { transition-delay: 0.28s !important; }
.stagger-5 { transition-delay: 0.35s !important; }
.stagger-6 { transition-delay: 0.42s !important; }

/* 4. Luxury Card Micro-Interactions */
.card-lift {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background-color 0.3s ease !important;
  will-change: transform, box-shadow;
}

.card-lift:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 20px 45px -12px rgba(16, 185, 129, 0.18), 0 0 0 1px rgba(16, 185, 129, 0.25) !important;
  background-color: rgba(16, 185, 129, 0.04) !important;
}

/* 3D icon reaction inside cards */
.card-lift .card-3d-icon,
.card-lift img,
article .card-3d-icon,
article img.w-12 {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease !important;
  will-change: transform, filter;
}

.card-lift:hover .card-3d-icon,
.card-lift:hover img.card-3d-icon,
article:hover .card-3d-icon,
article:hover img.w-12 {
  transform: scale(1.15) translateY(-3px) rotate(4deg) !important;
  filter: drop-shadow(0 12px 24px rgba(16, 185, 129, 0.4)) !important;
}

/* Arrow Glide Animation on Card Hover */
.card-lift svg,
.arrow-link svg,
.btn-primary svg,
.btn-secondary svg {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card-lift:hover svg,
.arrow-link:hover svg,
.btn-primary:hover svg,
.btn-secondary:hover svg {
  transform: translateX(4px) !important;
}

/* 5. Pricing Cards Luxury Hover Elevation */
#pricing-grid-onetime article,
#pricing-grid-monthly article {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
  will-change: transform, box-shadow;
}

#pricing-grid-onetime article:hover,
#pricing-grid-monthly article:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(16, 185, 129, 0.55) !important;
  box-shadow: 0 25px 50px -15px rgba(16, 185, 129, 0.22), 0 0 0 1px rgba(16, 185, 129, 0.3) !important;
}

/* 6. Buttons Shimmer & Tactile Feedback */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background-color 0.2s ease !important;
  will-change: transform, box-shadow;
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: rotate(30deg);
  transition: none;
  pointer-events: none;
}

.btn-primary:hover::after {
  left: 140%;
  transition: left 0.75s ease-in-out;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 30px -5px rgba(16, 185, 129, 0.45) !important;
}

.btn-primary:active {
  transform: translateY(0px) scale(0.98) !important;
}

.btn-secondary {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.2s ease, color 0.2s ease !important;
  will-change: transform, box-shadow;
}

.btn-secondary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 25px -8px rgba(16, 185, 129, 0.25) !important;
  border-color: #10b981 !important;
  color: #10b981 !important;
}

.btn-secondary:active {
  transform: translateY(0px) scale(0.98) !important;
}

/* 7. Sticky Header Dynamic Scrolled Glassmorphism */
.site-header {
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, height 0.3s ease !important;
}

.site-header.scrolled {
  background: rgba(6, 16, 11, 0.9) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border-bottom: 1px solid rgba(16, 185, 129, 0.2) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Nav Link Hover Underline Glow */
nav[aria-label="Primary navigation"] a {
  position: relative;
  padding-bottom: 3px;
  transition: color 0.2s ease;
}

nav[aria-label="Primary navigation"] a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background: #10b981;
  border-radius: 9999px;
  box-shadow: 0 0 8px #10b981;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

nav[aria-label="Primary navigation"] a:hover::after,
nav[aria-label="Primary navigation"] a.text-primary::after {
  width: 100%;
}

/* 8. Smooth FAQ Accordion Expansion */
.faq-item {
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.faq-item:hover {
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.faq-icon {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 9. Accessibility: Respect User Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}