
    const loader = document.createElement('div');
loader.style.cssText = 'position:fixed;inset:0;background:#e0e0e0;z-index:9999;';
document.body.appendChild(loader);

function loadImage(url) {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = resolve;
    img.onerror = resolve;
    img.src = url;
  });
}

const promises = [];

// Fix image quality on span-N cards
document.querySelectorAll('.card__wrapper').forEach((card) => {
  const picture = card.querySelector('picture.card__cover-container');
  if (!picture) return;

  const w = Math.round(card.getBoundingClientRect().width);
  const h = Math.round(card.getBoundingClientRect().height);

  if (w <= 190) return;

  const source = picture.querySelector('source:not([media])');
  if (source) {
    const base = source.srcset.split(',')[0].trim().split(/\s+/)[0];
    const make = (scale) => {
      const url = new URL(base, location.origin);
      url.searchParams.set('width', w * scale);
      url.searchParams.set('height', h * scale);
      return `${url.pathname}${url.search} ${scale}x`;
    };
    source.srcset = `${make(1)}, ${make(2)}`;
  }

  const img = picture.querySelector('img');
  if (img) {
    const url = new URL(img.src, location.origin);
    url.searchParams.set('width', w);
    url.searchParams.set('height', h);
    img.src = `${url.pathname}${url.search}`;
  }
});

// xtc-toaster: diagonal tile
const xtcCard = document.getElementById('card-Code-xtc-toaster');
if (xtcCard) {
  const picture = xtcCard.querySelector('picture.card__cover-container');
  if (picture) {
    const img = picture.querySelector('img');
    if (img) {
      const tileW = Math.round(xtcCard.getBoundingClientRect().width / 6);

      const url = new URL(img.src, location.origin);
      url.searchParams.set('width', tileW);
      url.searchParams.set('height', tileW);
      const src = `${url.pathname}${url.search}`;

      img.style.display = 'none';
      picture.style.cssText = 'display: block; width: 100%; height: 100%;';
      picture.style.backgroundRepeat = 'repeat';
      picture.style.backgroundSize = `${tileW}px auto`;

      promises.push(loadImage(src).then(() => {
        picture.style.backgroundImage = `url('${src}')`;

        let x = 0, y = 0, t = 0;
        const animateXtc = () => {
          x = (x + 0.4) % tileW;
          y = (y + 0.4) % tileW;
          t++;
          const hue = Math.sin(t * 0.009) * 55 + Math.sin(t * 0.023) * 25;
          picture.style.backgroundPosition = `${x}px ${y}px`;
          picture.style.filter = `hue-rotate(${hue.toFixed(1)}deg)`;
          requestAnimationFrame(animateXtc);
        };
        requestAnimationFrame(animateXtc);
      }));
    }
  }
}

Promise.all(promises).then(() => loader.remove());