/* ==========================================================================
   gutrdun_vx4 HOMEPAGE DESIGN SYSTEM: MOTION & MICRO-INTERACTIONS
   pages/home/assets/css/home-motion.css
   ========================================================================== */

/* 1. Ambient Background Gradient (Smooth, Hardware-Accelerated) */
.vx-ambient-mesh {
  background: radial-gradient(circle at 20% 20%, rgba(29, 45, 155, 0.25) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 50% 50%, rgba(7, 13, 30, 0.98) 0%, #070d1e 100%);
  background-size: 150% 150%;
  animation: vxMeshFloat 30s ease-in-out infinite alternate;
  will-change: background-position;
}

@keyframes vxMeshFloat {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 50% 100%;
  }
}

/* 2. Micro-Pulse for Phone and Urgent CTAs */
.vx-pulse-glow {
  animation: vxPulseGlow 3s infinite;
}

@keyframes vxPulseGlow {
  0%, 100% {
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
  }
  50% {
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.65);
  }
}

/* 3. Subtle Card Entrance / Hover */
.vx-hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.vx-hover-lift:hover {
  transform: translateY(-4px);
}

/* 4. Accordion Expand Motion */
.vx-accordion-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease-out;
}

.vx-accordion-panel.open {
  max-height: 800px;
  opacity: 1;
}

/* 5. Reduced Motion Accessibility Mode (Preserves interactive feedback & celebrations) */
@media (prefers-reduced-motion: reduce) {
  .vx-ambient-mesh,
  .vx-wave-divider svg path {
    animation: none !important;
  }

  .vx-hover-lift:hover {
    transform: none !important;
  }

  .vx-gallery-item:hover img {
    transform: none !important;
  }
}

/* 6. Animated Undulating Wave Transition */
.vx-wave-divider {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin-top: 3.5rem;
  margin-bottom: -2px;
  background: transparent;
  pointer-events: none;
  z-index: 2;
}

.vx-wave-svg {
  display: block;
  width: 100%;
  height: 70px;
  vertical-align: bottom;
}

.navigation-wrapper {
  box-shadow: none !important;
  border-bottom: none !important;
}

#zero-risk-cta,
#warranties + section,
.vx-home-top-wave-strip + .vx-section-hero,
.vx-section:has(.vx-wave-divider) + .vx-section {
  position: relative;
  margin-top: -1px;
  z-index: 1;
}

.vx-home-top-wave-strip {
  background: #ffffff;
  width: 100%;
  position: relative;
  overflow: hidden;
  line-height: 0;
  z-index: 5;
}

.vx-home-top-wave-strip .vx-wave-divider {
  margin-top: 0;
  margin-bottom: -2px;
}

.vx-home-top-wave-strip .vx-wave-svg {
  margin-top: -24px;
}

@media (max-width: 768px) {
  .vx-wave-svg {
    height: 45px;
  }
  .vx-wave-divider {
    margin-top: 2rem;
  }
  .vx-home-top-wave-strip .vx-wave-svg {
    margin-top: -15px;
  }
}