/* =============================================================================
   Energie Install — ux-enhance.css   (self-contained UX-laag)
   Hoort bij assets/js/ux-enhance.js. Bewerkt geen bestaande CSS; gebruikt
   eigen, ge-namespacete classes (.ux-*) zodat het NOOIT botst met het
   bestaande reveal-/count-systeem in style.css + energielabel.css.

   Huisstijl-groen accenten (var(--green) #1E9A68, fallback #0f7a43).
   GPU-vriendelijk: alleen transform + opacity geanimeerd. Mobiel-veilig:
   geen horizontale overflow (geen negatieve translateX/scale > 1 op block-laag).
   prefers-reduced-motion: alle ux-animaties uit (JS doet dan ook niets).
============================================================================= */

:root {
  --ux-green:        var(--green, #0f7a43);
  --ux-green-d:      var(--green-d, #0b2417);
  --ux-ease:         cubic-bezier(.2, .75, .25, 1);
  --ux-ease-lift:    cubic-bezier(.2, .7, .2, 1);
  --ux-reveal-dist:  22px;
  --ux-reveal-dur:   .68s;
  --ux-d:            0ms; /* stagger-delay, per element gezet door JS */
}

/* ---- 1. SCROLL-REVEAL ------------------------------------------------------
   Startstatus: licht naar onderen verschoven + transparant. In-beeld (.ux-in)
   -> naar nulpositie. translateY (geen X) houdt het overflow-vrij. */
.ux-reveal {
  opacity: 0;
  transform: translate3d(0, var(--ux-reveal-dist), 0);
  transition:
    opacity   var(--ux-reveal-dur) var(--ux-ease) var(--ux-d),
    transform var(--ux-reveal-dur) var(--ux-ease) var(--ux-d);
  will-change: opacity, transform;
}
.ux-reveal.ux-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* na de reveal: will-change weer vrijgeven (perf) */
.ux-reveal.ux-in {
  will-change: auto;
}

/* Grote secties iets subtieler verschuiven (voorkomt 'springerig' gevoel) */
section.ux-reveal {
  --ux-reveal-dist: 16px;
}

/* ---- 2. COUNT-UP -----------------------------------------------------------
   De waarde-animatie zit in JS (textContent). Hier alleen een nette weergave:
   tabulaire cijfers zodat het tellen niet 'wiebelt' in breedte. */
[data-ux-count] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- 3. HOVER-LIFT (alleen .ux-lift; style.css regelt .dienst/.aud/etc.) ---
   Zachte lift + groene schaduwgloed. Pointer-only zodat het op touch niet
   'plakt'. GPU: transform + box-shadow. */
.ux-lift {
  transition:
    transform   .26s var(--ux-ease-lift),
    box-shadow  .26s var(--ux-ease-lift);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .ux-lift:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 14px 32px rgba(15, 122, 67, .16);
  }
  /* Knoppen liften iets minder + krijgen een fijnere schaduw */
  .btn.ux-lift:hover,
  button.btn.ux-lift:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 10px 22px rgba(15, 122, 67, .22);
  }
}
/* Toetsenbord-focus krijgt dezelfde lift (toegankelijk) */
.ux-lift:focus-visible {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 12px 26px rgba(15, 122, 67, .18);
  outline-offset: 3px;
}

/* ---- 4. Mobiel-veiligheid / overflow-gordel --------------------------------
   Reveal/lift gebruiken alleen translateY -> geen horizontale overflow.
   Extra gordel: nooit een ux-element buiten de viewport laten duwen. */
.ux-reveal,
.ux-lift {
  max-width: 100%;
}

/* ---- 5. prefers-reduced-motion: alles uit ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ux-reveal,
  .ux-reveal.ux-in,
  .ux-lift {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  .ux-lift:hover,
  .btn.ux-lift:hover,
  button.btn.ux-lift:hover,
  .ux-lift:focus-visible {
    transform: none !important;
    box-shadow: none !important;
  }
}