/* ============================================================
   Backgrounds — static image from openhero.art with per-page tint variants
   Fixed full-viewport image behind the app, subtle mouse-reactive effects (scale + hue-shift).
   Print-safe + reduced-motion safe.
   ============================================================ */

/* --- Layer: fixed, behind everything, non-interactive --- */
.bg-image-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Image element: cover the viewport, opacity 0.4, subtle transition */
.bg-image-wrap img.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease;
  will-change: opacity, filter, transform;
}
.bg-image-wrap img.bg-image.background-image-loaded {
  opacity: 0.4;
}

/* Mouse-reactive state (JS sets --bg-dx/--bg-dy/--bg-hue) */
.bg-image-wrap img.bg-image.bg-reactive {
  transform: scale(1.03) translate(var(--bg-dx, 0px), var(--bg-dy, 0px));
  filter: hue-rotate(var(--bg-hue, 0deg));
}

/* --- Per-page tint overlay (via body[data-page]) --- */
.bg-tint {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background: var(--bg-tint, linear-gradient(160deg, rgba(8, 8, 10, 0.86), rgba(8, 8, 10, 0.78)));
}

body[data-page="dashboard"] { --bg-tint: linear-gradient(160deg, rgba(212, 168, 67, 0.12), rgba(212, 168, 67, 0.06)); }   /* gold */
body[data-page="quotes"]    { --bg-tint: linear-gradient(160deg, rgba(255, 178, 54, 0.12), rgba(255, 178, 54, 0.06)); }   /* amber */
body[data-page="invoices"]  { --bg-tint: linear-gradient(160deg, rgba(255, 140, 40, 0.12), rgba(255, 140, 40, 0.06)); }   /* warm */
body[data-page="parts"],
body[data-page="prices"],
body[data-page="part-form"],
body[data-page="quote-form"],
body[data-page="invoice-form"],
body[data-page="delivery-note"] { --bg-tint: linear-gradient(160deg, rgba(60, 120, 180, 0.10), rgba(60, 120, 180, 0.05)); }   /* cool */
body[data-page="settings"]  { --bg-tint: linear-gradient(160deg, rgba(120, 120, 120, 0.10), rgba(120, 120, 120, 0.05)); }   /* neutral */
body[data-page="delivery"],
body[data-page="deliveries"] { --bg-tint: linear-gradient(160deg, rgba(30, 80, 120, 0.14), rgba(30, 80, 120, 0.08)); }   /* deep */
body[data-page="login"]     { --bg-tint: linear-gradient(160deg, rgba(8, 8, 10, 0.88), rgba(8, 8, 10, 0.8)); }

/* --- Print: NEVER leak the background into PDFs --- */
@media print {
  .bg-image-wrap,
  .bg-tint {
    display: none !important;
  }
}

/* --- Reduced motion: kill the layer entirely --- */
@media (prefers-reduced-motion: reduce) {
  .bg-image-wrap,
  .bg-tint {
    display: none !important;
  }
}