/* Local background collection. Photo assets are bundled for offline use. */
body[data-background] {
  isolation: isolate;
  background-color: var(--bg);
  background-image: none;
}
body[data-background]::before,
body[data-background]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  transform-origin: center;
}
body[data-background]::after { content: none; }

/* Existing choices retain their identities and remain static. */
body[data-background="plain"]::before { background: var(--bg); }
body[data-background="tools"]::before {
  background-image: radial-gradient(ellipse at 85% 5%, var(--paint-67b5ff-25,#67b5ff25), transparent 58%), var(--tools-illustration,url("./tools-bg.svg"));
  background-size: cover, 720px 720px;
  background-repeat: no-repeat, repeat;
}

/* Three quiet native textures, with no external requests. */
body[data-background="steel"]::before {
  background-image:
    radial-gradient(ellipse at 78% 10%, var(--paint-ffffff-ce,#ffffffce), transparent 65%),
    repeating-linear-gradient(0deg, var(--paint-839db0-07,#839db007) 0 1px, transparent 1px 4px),
    linear-gradient(125deg, var(--paint-dde7ef,#dde7ef), var(--paint-f8fafc,#f8fafc) 45%, var(--paint-ceddea,#ceddea));
}
body[data-background="blueprint"]::before {
  background-color: var(--paint-e6f0fa,#e6f0fa);
  background-image:
    linear-gradient(90deg, var(--paint-448bd0-19,#448bd019) 1px, transparent 1px),
    linear-gradient(var(--paint-448bd0-19,#448bd019) 1px, transparent 1px),
    linear-gradient(90deg, var(--paint-448bd0-0b,#448bd00b) 1px, transparent 1px),
    linear-gradient(var(--paint-448bd0-0b,#448bd00b) 1px, transparent 1px),
    radial-gradient(ellipse at top right, var(--paint-b5d8fa,#b5d8fa), transparent 60%);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px, cover;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat;
}
body[data-background="carbon"]::before {
  background-color: var(--paint-e7edf3,#e7edf3);
  background-image:
    linear-gradient(135deg, var(--paint-8b9ead-13,#8b9ead13) 25%, transparent 25%, transparent 75%, var(--paint-8b9ead-13,#8b9ead13) 75%),
    linear-gradient(45deg, var(--paint-ffffff-66,#ffffff66) 25%, transparent 25%, transparent 75%, var(--paint-ffffff-66,#ffffff66) 75%),
    linear-gradient(115deg, var(--paint-d9e3ed,#d9e3ed), var(--paint-f4f7fb,#f4f7fb));
  background-size: 12px 12px, 12px 12px, cover;
  background-position: 0 0, 6px 6px, center;
  background-repeat: repeat, repeat, no-repeat;
}

/* Rendered 3D scenes use a veil so unboxed headings retain contrast. */
body[data-background="3d-tools"]::before {
  background-image: linear-gradient(var(--paint-f1f5fb-bb,#f1f5fbbb), var(--paint-f1f5fb-df,#f1f5fbdf)), url("./backgrounds/3d-tools.webp");
  background-size: cover;
  background-position: center;
}
body[data-background="3d-workshop"]::before {
  background-image: linear-gradient(var(--paint-f1f5fb-d0,#f1f5fbd0), var(--paint-f1f5fb-da,#f1f5fbda)), url("./backgrounds/3d-workshop.webp");
  background-size: cover;
  background-position: center;
}

/* Motion is slow, decorative and independent of record entry. */
body[data-background="aurora"]::before {
  inset: -8%;
  background-image:
    radial-gradient(ellipse at 18% 15%, var(--paint-bc9cfb-75,#bc9cfb75), transparent 48%),
    radial-gradient(ellipse at 88% 58%, var(--paint-59d7dc-65,#59d7dc65), transparent 48%),
    radial-gradient(ellipse at 32% 95%, var(--paint-89bfff-70,#89bfff70), transparent 42%),
    linear-gradient(140deg, var(--paint-f2eaff,#f2eaff), var(--paint-ecf6fc,#ecf6fc) 55%, var(--paint-e4faf5,#e4faf5));
  animation: notebook-aurora 36s ease-in-out infinite alternate;
}
body[data-background="flow"]::before {
  inset: -10%;
  background-image:
    radial-gradient(ellipse at 15% 25%, var(--paint-70ccf8-5b,#70ccf85b), transparent 47%),
    radial-gradient(ellipse at 80% 15%, var(--paint-c8a0f3-5e,#c8a0f35e), transparent 48%),
    radial-gradient(ellipse at 77% 90%, var(--paint-ffcb78-63,#ffcb7863), transparent 43%),
    linear-gradient(155deg, var(--paint-e2f1fc,#e2f1fc), var(--paint-f8f0fd,#f8f0fd) 52%, var(--paint-ebf8f4,#ebf8f4));
  animation: notebook-flow 42s ease-in-out infinite alternate;
}
body[data-background="flow"]::after {
  content: "";
  inset: -20%;
  background: repeating-linear-gradient(125deg, transparent 0 170px, var(--paint-ffffff-30,#ffffff30) 170px 172px, transparent 172px 340px);
  animation: notebook-stream 50s linear infinite alternate;
}
body[data-background="particles"]::before {
  background-image: radial-gradient(ellipse at 75% 5%, var(--paint-d5deff,#d5deff), transparent 60%), linear-gradient(140deg, var(--paint-eef5ff,#eef5ff), var(--paint-eaf8f7,#eaf8f7));
}
body[data-background="particles"]::after {
  content: "";
  inset: -90px 0;
  background-image:
    radial-gradient(circle, var(--paint-5a8dd7-44,#5a8dd744) 2px, transparent 3px),
    radial-gradient(circle, var(--paint-55bfa1-43,#55bfa143) 3px, transparent 4px),
    radial-gradient(circle, var(--paint-997ed9-45,#997ed945) 1px, transparent 2px);
  background-size: 183px 163px, 257px 241px, 127px 211px;
  background-position: 21px 32px, 101px 72px, 55px 11px;
  background-repeat: repeat;
  animation: notebook-particles 48s ease-in-out infinite alternate;
}
@keyframes notebook-aurora {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 1.5%, 0) scale(1.045); }
}
@keyframes notebook-flow {
  from { transform: translate3d(2%, 1%, 0) rotate(-3deg); }
  to { transform: translate3d(-2%, -1%, 0) rotate(3deg); }
}
@keyframes notebook-stream {
  from { transform: translate3d(-3%, 0, 0); }
  to { transform: translate3d(3%, 2%, 0); }
}
@keyframes notebook-particles {
  from { transform: translate3d(0, -20px, 0); }
  to { transform: translate3d(18px, 45px, 0); }
}

/* Dark mode keeps the same scene while protecting interface contrast. */
body[data-theme="dark"][data-background="tools"]::before { opacity: .32; }
body[data-theme="dark"][data-background="steel"]::before {
  background-image: repeating-linear-gradient(0deg, var(--paint-b5ccdf-0a,#b5ccdf0a) 0 1px, transparent 1px 4px), linear-gradient(125deg, var(--paint-111d2a,#111d2a), var(--paint-21354a,#21354a) 45%, var(--paint-101a29,#101a29));
}
body[data-theme="dark"][data-background="blueprint"]::before {
  background-color: var(--paint-0c2035,#0c2035);
  background-image: linear-gradient(90deg, var(--paint-6fb7fc-18,#6fb7fc18) 1px, transparent 1px), linear-gradient(var(--paint-6fb7fc-18,#6fb7fc18) 1px, transparent 1px), linear-gradient(90deg, var(--paint-6fb7fc-09,#6fb7fc09) 1px, transparent 1px), linear-gradient(var(--paint-6fb7fc-09,#6fb7fc09) 1px, transparent 1px), radial-gradient(ellipse at top right, var(--paint-193b62,#193b62), transparent 65%);
}
body[data-theme="dark"][data-background="carbon"]::before {
  background-color: var(--paint-101720,#101720);
  background-image: linear-gradient(135deg, var(--paint-9ab2c8-17,#9ab2c817) 25%, transparent 25%, transparent 75%, var(--paint-9ab2c8-17,#9ab2c817) 75%), linear-gradient(45deg, var(--paint-ffffff-05,#ffffff05) 25%, transparent 25%, transparent 75%, var(--paint-ffffff-05,#ffffff05) 75%), linear-gradient(115deg, var(--paint-0c1622,#0c1622), var(--paint-1b2b3b,#1b2b3b));
}
body[data-theme="dark"][data-background="3d-tools"]::before {
  background-image: linear-gradient(var(--paint-101a29-d8,#101a29d8), var(--paint-101a29-ea,#101a29ea)), url("./backgrounds/3d-tools.webp");
}
body[data-theme="dark"][data-background="3d-workshop"]::before {
  background-image: linear-gradient(var(--paint-101a29-d4,#101a29d4), var(--paint-101a29-e5,#101a29e5)), url("./backgrounds/3d-workshop.webp");
}
body[data-theme="dark"][data-background="aurora"]::before {
  background-image: radial-gradient(ellipse at 18% 15%, var(--paint-7656ce-45,#7656ce45), transparent 48%), radial-gradient(ellipse at 88% 58%, var(--paint-268e9f-40,#268e9f40), transparent 48%), radial-gradient(ellipse at 32% 95%, var(--paint-3266ad-45,#3266ad45), transparent 42%), linear-gradient(140deg, var(--paint-13192e,#13192e), var(--paint-102530,#102530) 55%, var(--paint-142930,#142930));
}
body[data-theme="dark"][data-background="flow"]::before {
  background-image: radial-gradient(ellipse at 15% 25%, var(--paint-326897-55,#32689755), transparent 47%), radial-gradient(ellipse at 80% 15%, var(--paint-674a88-55,#674a8855), transparent 48%), radial-gradient(ellipse at 77% 90%, var(--paint-856a33-40,#856a3340), transparent 43%), linear-gradient(155deg, var(--paint-0e2336,#0e2336), var(--paint-251d33,#251d33) 52%, var(--paint-102d2c,#102d2c));
}
body[data-theme="dark"][data-background="flow"]::after { opacity: .3; }
body[data-theme="dark"][data-background="particles"]::before {
  background-image: radial-gradient(ellipse at 75% 5%, var(--paint-223458,#223458), transparent 60%), linear-gradient(140deg, var(--paint-101c2b,#101c2b), var(--paint-112b2e,#112b2e));
}
body[data-theme="dark"][data-background="particles"]::after { opacity: .65; }

/* Settings thumbnails are static even when the selected background moves. */
.background-swatch {
  display: block;
  width: 100%;
  min-height: 78px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--paint-91a6bd-40,#91a6bd40);
  border-radius: 11px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.background-swatch.bg-tools { background-color: var(--paint-eaf3fc,#eaf3fc); background-image: var(--tools-illustration,url("./tools-bg.svg")); background-size: 250px 250px; }
.background-swatch.bg-plain { background: var(--paint-f1f5fb,#f1f5fb); }
.background-swatch.bg-aurora { background: radial-gradient(ellipse at 10% 5%, var(--paint-b88aec,#b88aec), transparent 68%), radial-gradient(ellipse at 90% 85%, var(--paint-72dbd6,#72dbd6), transparent 66%), var(--paint-e2eafe,#e2eafe); }
.background-swatch.bg-steel { background: repeating-linear-gradient(0deg, var(--paint-657b95-10,#657b9510) 0 1px, transparent 1px 3px), linear-gradient(125deg, var(--paint-aebecb,#aebecb), var(--paint-f5f9fc,#f5f9fc) 45%, var(--paint-9fb4c6,#9fb4c6)); }
.background-swatch.bg-blueprint { background-color: var(--paint-36719f,#36719f); background-image: linear-gradient(90deg, var(--paint-baddf1-4d,#baddf14d) 1px, transparent 1px), linear-gradient(var(--paint-baddf1-4d,#baddf14d) 1px, transparent 1px); background-size: 18px 18px; }
.background-swatch.bg-carbon { background-color: var(--paint-1d2835,#1d2835); background-image: linear-gradient(135deg, var(--paint-8090a3-26,#8090a326) 25%, transparent 25%, transparent 75%, var(--paint-8090a3-26,#8090a326) 75%), linear-gradient(45deg, var(--paint-ffffff-16,#ffffff16) 25%, transparent 25%, transparent 75%, var(--paint-ffffff-16,#ffffff16) 75%); background-size: 10px 10px; background-position: 0 0, 5px 5px; }
.background-swatch.bg-3d-tools { background-image: url("./backgrounds/3d-tools.webp"); }
.background-swatch.bg-3d-workshop { background-image: url("./backgrounds/3d-workshop.webp"); }
.background-swatch.bg-flow { background: linear-gradient(135deg, var(--paint-a2d2f9,#a2d2f9) 5%, var(--paint-cab7f4,#cab7f4) 45%, var(--paint-f5d2a3,#f5d2a3) 80%, var(--paint-aff2d5,#aff2d5)); }
.background-swatch.bg-particles { background-color: var(--paint-dbeafb,#dbeafb); background-image: radial-gradient(circle, var(--paint-508dc7,#508dc7) 2px, transparent 3px), radial-gradient(circle, var(--paint-5fae9a,#5fae9a) 3px, transparent 4px); background-size: 27px 23px, 39px 37px; background-position: 0 0, 13px 11px; }
body[data-theme="dark"] .background-swatch.bg-plain { background: var(--paint-101a29,#101a29); }

@media (max-width: 800px) {
  body[data-background="3d-tools"]::before { background-position: 73% center; }
  body[data-background="3d-workshop"]::before { background-position: 34% center; }
  .background-swatch { min-height: 65px; }
}
body[data-motion="off"]::before,
body[data-motion="off"]::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  body[data-background]::before,
  body[data-background]::after { animation: none !important; }
}
@media print {
  body[data-background] { background: var(--paint-ffffff,#ffffff) !important; }
  body[data-background]::before,
  body[data-background]::after { display: none !important; }
}