/* ============================================================================
   Apex Vision Systems — Motion Select  v1.0
   Aanvulling op de bestaande avs-motion laag.

   Stuurt BEWUST NIET aan:  .reveal / .visible  ·  .avs-rv / .avs-in
                            hero-rise  ·  details/FAQ  ·  view transitions
   Bevat:  4-stappen stepper · trust-marquee · WhatsApp-puls · formulierstappen

   Alles op transform/opacity (GPU), respecteert prefers-reduced-motion.
   Alle nieuwe klassen zijn geprefixt met .apx- zodat er niets botst.
   ========================================================================= */

:root {
  --apx-ease: cubic-bezier(.22, .61, .36, 1);
  --apx-spring: cubic-bezier(.34, 1.4, .64, 1);
  --apx-gold: var(--gold, #b8923c);
}

/* ============================================================
   2. STEPPER — lijn tekent zich, bollen poppen, vonk loopt door
   ============================================================ */

.apx-steps::before {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.15s var(--apx-ease);
}
.apx-steps.apx-drawn::before { transform: scaleX(1); }

.apx-steps .step::before {
  transform: translateX(-50%) scale(0);
  transition: transform .5s var(--apx-spring);
  transition-delay: calc(var(--apx-i, 0) * .13s + .32s);
}
.apx-steps.apx-drawn .step::before { transform: translateX(-50%) scale(1); }

/* Gouden vonk die één keer over de lijn loopt */
.apx-steps-spark {
  position: absolute; top: 56px; left: 12%; width: 7px; height: 7px;
  margin-top: -3px; border-radius: 50%; background: var(--apx-gold);
  box-shadow: 0 0 14px 3px rgba(184,146,60,.65);
  opacity: 0; pointer-events: none; z-index: 3;
}
.apx-steps.apx-drawn .apx-steps-spark { animation: apx-spark 1.5s .25s var(--apx-ease) forwards; }
@keyframes apx-spark {
  0%   { opacity: 0; transform: translateX(0) scale(.5); }
  12%  { opacity: 1; transform: translateX(0) scale(1); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--apx-spark-x, 70vw)) scale(.5); }
}

/* Icoon in de kaart komt mee omhoog zodra de bol landt */
.apx-steps .step-icon {
  transition: transform .55s var(--apx-spring);
  transition-delay: calc(var(--apx-i, 0) * .13s + .42s);
}
.apx-steps:not(.apx-drawn) .step-icon { transform: translateY(6px) scale(.9); }
.apx-steps .step:hover .step-icon { transform: translateY(-2px) scale(1.06); transition-delay: 0s; }

/* ============================================================
   3. TRUST BAND — doorlopende marquee
   ============================================================ */

.apx-marquee {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.apx-marq-track {
  display: flex; width: max-content; gap: var(--apx-gap, 26px);
  animation: apx-marq var(--apx-dur, 48s) linear infinite;
  will-change: transform;
}
.apx-marquee:hover .apx-marq-track,
.apx-marquee:focus-within .apx-marq-track { animation-play-state: paused; }
.apx-marq-track .trust-items { flex-wrap: nowrap !important; justify-content: flex-start !important; }
@keyframes apx-marq {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - var(--apx-gap, 26px) / 2), 0, 0); }
}
@media (max-width: 760px) { .apx-marq-track { --apx-dur: 30s; } }

/* ============================================================
   4. WHATSAPP / BEL — rustige puls die vanzelf stopt
   ============================================================ */

.apx-ring { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.apx-ring::before, .apx-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid rgba(37, 211, 102, .55); opacity: 0;
}
.apx-pulse .apx-ring::before { animation: apx-ping 2.2s var(--apx-ease) 3; }
.apx-pulse .apx-ring::after  { animation: apx-ping 2.2s .45s var(--apx-ease) 3; }
@keyframes apx-ping {
  0%   { opacity: .85; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.75); }
  100% { opacity: 0;   transform: scale(1.75); }
}
.wa-fab { transition: transform .3s var(--apx-spring), box-shadow .3s var(--apx-ease); }
.apx-pulse.wa-fab { animation: apx-nudge 2.2s var(--apx-ease) 3; }
@keyframes apx-nudge {
  0%, 100% { transform: scale(1); }
  8%       { transform: scale(1.09); }
  16%      { transform: scale(1); }
}

/* Mobiele CTA-balk: gouden veeg over de WhatsApp-knop */
.avs-ctabar .cta-wa { position: relative; overflow: hidden; }
.avs-ctabar .cta-wa.apx-pulse::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(37,211,102,.28) 50%, transparent 80%);
  transform: translateX(-100%); animation: apx-sweep 2.4s var(--apx-ease) 3;
}
@keyframes apx-sweep { to { transform: translateX(100%); } }

/* ============================================================
   6. FORMULIER — richtinggevoelige stapovergang
   ============================================================ */

form[data-apx-dir] .form-step.active { animation: apx-step-fwd .44s var(--apx-ease) both; }
form[data-apx-dir="back"] .form-step.active { animation-name: apx-step-back; }
@keyframes apx-step-fwd  { from { opacity: 0; transform: translateX(26px); } }
@keyframes apx-step-back { from { opacity: 0; transform: translateX(-26px); } }

/* Actieve bol krijgt een zachte gouden halo */
.form-progress .step-dot.active { position: relative; }
.form-progress .step-dot.active::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--apx-gold); opacity: 0;
  animation: apx-ping 2s var(--apx-ease) 2;
}
/* Afgeronde stap: vinkje popt */
.form-progress .step-dot.done { animation: apx-pop .4s var(--apx-spring); }
@keyframes apx-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
/* Balk vult met een lopende glans */
.form-progress .step-bar.filled::after {
  background: linear-gradient(90deg, var(--apx-gold), #e0c274, var(--apx-gold));
  background-size: 200% 100%; animation: apx-shine 1.6s var(--apx-ease);
}
@keyframes apx-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ============================================================
   Reduced motion — alles stil, niets verborgen
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .apx-steps::before, .apx-steps .step::before, .apx-steps .step-icon {
    transform: none !important; transition: none !important;
  }
  .apx-steps .step::before { transform: translateX(-50%) !important; }
  .apx-steps-spark { display: none !important; }
  .apx-marq-track { animation: none !important; }
  .apx-marquee { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .apx-ring { display: none !important; }
  .apx-pulse.wa-fab, .form-progress .step-dot.done,
  .form-progress .step-bar.filled::after, .avs-ctabar .cta-wa.apx-pulse::after { animation: none !important; }
  form[data-apx-dir] .form-step.active { animation: none !important; }
}