/* LQIP v2 — CSS decoder.
 * Format spec lives in core/lqip.py. Constants here MUST stay in sync.
 *
 *  6 cells × 6 bits = 36 bits, packed into two signed CSS ints:
 *    --lqip-a → cells 0,1,2 (top row left/mid/right)
 *    --lqip-b → cells 3,4,5 (bottom row left/mid/right)
 *
 *  Per cell, 6 bits:
 *    bits 0-2 : hue index 0..7  → oklch H = idx * 45deg
 *    bits 3-4 : L index   0..3  → oklch L = 0.20, 0.40, 0.60, 0.80
 *    bit  5   : C index   0..1  → oklch C = 0.04 or 0.16
 *
 *  Browser support: requires oklch(), mod() and round() in calc()
 *  (Chromium 111+, Firefox 113+, Safari 16.2+).                              */

[style*="--lqip-a:"][style*="--lqip-b:"]:where([loading=lazy], [preload=none], .force-lqip),
.lqip[style*="--lqip-a:"] {
  --_da: calc(var(--lqip-a) + 131072);
  --_db: calc(var(--lqip-b) + 131072);

  --_c0: mod(var(--_da), 64);
  --_c1: mod(round(down, calc(var(--_da) / 64)), 64);
  --_c2: round(down, calc(var(--_da) / 4096));
  --_c3: mod(var(--_db), 64);
  --_c4: mod(round(down, calc(var(--_db) / 64)), 64);
  --_c5: round(down, calc(var(--_db) / 4096));

  --_c0-h: mod(var(--_c0), 8);
  --_c0-l: mod(round(down, calc(var(--_c0) / 8)), 4);
  --_c0-c: round(down, calc(var(--_c0) / 32));
  --_c0-clr: oklch(
    calc(var(--_c0-l) * 0.2 + 0.2)
    calc(var(--_c0-c) * 0.12 + 0.04)
    calc(var(--_c0-h) * 45deg)
  );

  --_c1-h: mod(var(--_c1), 8);
  --_c1-l: mod(round(down, calc(var(--_c1) / 8)), 4);
  --_c1-c: round(down, calc(var(--_c1) / 32));
  --_c1-clr: oklch(
    calc(var(--_c1-l) * 0.2 + 0.2)
    calc(var(--_c1-c) * 0.12 + 0.04)
    calc(var(--_c1-h) * 45deg)
  );

  --_c2-h: mod(var(--_c2), 8);
  --_c2-l: mod(round(down, calc(var(--_c2) / 8)), 4);
  --_c2-c: round(down, calc(var(--_c2) / 32));
  --_c2-clr: oklch(
    calc(var(--_c2-l) * 0.2 + 0.2)
    calc(var(--_c2-c) * 0.12 + 0.04)
    calc(var(--_c2-h) * 45deg)
  );

  --_c3-h: mod(var(--_c3), 8);
  --_c3-l: mod(round(down, calc(var(--_c3) / 8)), 4);
  --_c3-c: round(down, calc(var(--_c3) / 32));
  --_c3-clr: oklch(
    calc(var(--_c3-l) * 0.2 + 0.2)
    calc(var(--_c3-c) * 0.12 + 0.04)
    calc(var(--_c3-h) * 45deg)
  );

  --_c4-h: mod(var(--_c4), 8);
  --_c4-l: mod(round(down, calc(var(--_c4) / 8)), 4);
  --_c4-c: round(down, calc(var(--_c4) / 32));
  --_c4-clr: oklch(
    calc(var(--_c4-l) * 0.2 + 0.2)
    calc(var(--_c4-c) * 0.12 + 0.04)
    calc(var(--_c4-h) * 45deg)
  );

  --_c5-h: mod(var(--_c5), 8);
  --_c5-l: mod(round(down, calc(var(--_c5) / 8)), 4);
  --_c5-c: round(down, calc(var(--_c5) / 32));
  --_c5-clr: oklch(
    calc(var(--_c5-l) * 0.2 + 0.2)
    calc(var(--_c5-c) * 0.12 + 0.04)
    calc(var(--_c5-h) * 45deg)
  );

  background-color: var(--_c1-clr);
  background-image:
    radial-gradient(60% 80% at 16.67% 25%, var(--_c0-clr), rgb(from var(--_c0-clr) r g b / 0) 80%),
    radial-gradient(60% 80% at 50%    25%, var(--_c1-clr), rgb(from var(--_c1-clr) r g b / 0) 80%),
    radial-gradient(60% 80% at 83.33% 25%, var(--_c2-clr), rgb(from var(--_c2-clr) r g b / 0) 80%),
    radial-gradient(60% 80% at 16.67% 75%, var(--_c3-clr), rgb(from var(--_c3-clr) r g b / 0) 80%),
    radial-gradient(60% 80% at 50%    75%, var(--_c4-clr), rgb(from var(--_c4-clr) r g b / 0) 80%),
    radial-gradient(60% 80% at 83.33% 75%, var(--_c5-clr), rgb(from var(--_c5-clr) r g b / 0) 80%),
    linear-gradient(to bottom, var(--_c1-clr), var(--_c4-clr));
  background-repeat: no-repeat;
  background-size: cover;
}