/* Soft-loading page background.
   body::before = instant, heavily blurred placeholder (inline ~120B WebP)
   body::after  = full photo, faded in once decoded (html.cat-loaded) */

:root {
  --bg-fallback: #14100e;
}

body {
  background-color: var(--bg-fallback);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url("data:image/webp;base64,UklGRnIAAABXRUJQVlA4IGYAAAAQBACdASogABIAPu1qq08ppiOiMBgIATAdiWUAAI91OTMnRAH6x2UWoAD+9W+VcG8/qMg9335KH1zt5Pz15cuI8pMfEXiEG0iG/QOVDKUeI++mi3pMWX/R3HytYWUHahrWNhPbNAA=");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(14px);
  transform: scale(1.08);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("/siteimg/cat.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.4s ease, transform 2.4s ease;
  pointer-events: none;
}

html.cat-loaded body::after {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    transition: opacity 0.2s linear;
    transform: none;
  }
}