/* fix_bigtech_bmp_shitification.css
   Vaste-pixel-rendering: 1 bronpixel = 1 schermpixel, ongeacht OS-schaling.

   Het probleem: bij OS-schaling > 100% is 1 CSS-pixel géén schermpixel meer.
   Op 160% schaling (devicePixelRatio 1.6) wordt `width: 768px` uitgerekt naar
   768 x 1.6 = 1228 hardware-pixels -> interpolatie -> wazig. Een ontwerp op
   vaste pixelmaat verliest zo zijn autoriteit aan browser en OS.

   De correctie: zet de CSS-breedte op (bronbreedte / DPR). De browser
   vermenigvuldigt die weer met de DPR, dus 768 / 1.6 * 1.6 = 768 echte
   pixels. 1-op-1.

   Per beeld geef je de echte bronbreedte mee via --pp-w, bijv:
     <img class="pixel-perfect" style="--pp-w: 768px">
   Laat je --pp-w weg, dan valt het terug op 100% (gewoon responsive). */

img.pixel-perfect {
  --pp-dpr: 1;                                 /* overschreven per DPR-bucket */
  display: block;
  width: calc(var(--pp-w, 100%) / var(--pp-dpr));
  max-width: 100%;
  height: auto;

  /* Bewust GEEN image-rendering: crisp-edges. Bij non-integer schaling
     (1.6x) verdeelt nearest-neighbor de pixels ongelijk -> rijen springen.
     De standaard-smoothing vult die tussenstappen gelijkmatig op en oogt
     rustiger. Crisp-edges loont alleen bij hele factoren (2x, 3x). */
}

/* De DPR-buckets zetten alleen nog de deler. De breedteformule hierboven
   doet de rest. Alleen actief op desktop (vanaf 1024px). */
@media screen and (min-width: 1024px) {
  /* 125% schaling */
  @media (min-resolution: 1.20dppx) and (max-resolution: 1.30dppx) {
    img.pixel-perfect { --pp-dpr: 1.25; }
  }
  /* 150% schaling */
  @media (min-resolution: 1.45dppx) and (max-resolution: 1.54dppx) {
    img.pixel-perfect { --pp-dpr: 1.5; }
  }
  /* ~160% schaling (jouw scherm) */
  @media (min-resolution: 1.55dppx) and (max-resolution: 1.65dppx) {
    img.pixel-perfect { --pp-dpr: 1.6; }
  }
  /* 175% schaling */
  @media (min-resolution: 1.66dppx) and (max-resolution: 1.85dppx) {
    img.pixel-perfect { --pp-dpr: 1.75; }
  }
  /* 200% schaling */
  @media (min-resolution: 1.86dppx) and (max-resolution: 2.20dppx) {
    img.pixel-perfect { --pp-dpr: 2.0; }
  }
}