/* ==========================================================================
   perf.css — Performance optimizations
   - CLS-fix (aspect-ratio defaults)
   - content-visibility voor off-screen sections (rendering speedup)
   - Font-loading fallback (voorkomt FOIT en beperkt CLS)
   ========================================================================== */

/* ---- 1. Lazy image / aspect ratio defaults (voorkomt Cumulative Layout Shift) ---- */

img[loading="lazy"] {
  background: var(--color-cream-dark, #ece7dc);
}

img:not([width]):not([height]) {
  max-width: 100%;
  height: auto;
}

/* Standaard aspect-ratios voor bekende contentafbeeldingen zonder inline width/height */
.hp-index__stage-img,
.fm-hero__bg img,
.mp-machine__img,
.ov-hero__img,
.pj-hero__img,
.vc-hero__bg img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.hp-hero__img {
  aspect-ratio: 16 / 10;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---- 2. Content-visibility: off-screen sections niet renderen tot ze in beeld komen ---- */

/* Uitgeschakeld: content-visibility met vaste intrinsic-size veroorzaakte scroll-
   freeze / jumpy scroll op mobile Safari doordat de totale documenthoogte fout
   werd berekend. Marginale perf-winst weegt niet op tegen de UX-schade.
main > section:not(:first-of-type) {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}
*/

/* ---- 3. Font-loading fallback (voorkomt FOIT — Flash Of Invisible Text) ---- */

body {
  font-family: system-ui, -apple-system, "Inter", sans-serif;
}

.wf-active body,
.fonts-loaded body {
  font-family: "Inter", system-ui, sans-serif;
}

/* ---- 4. Bonus: reduce motion respecteren voor performance ---- */

@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;
  }
}