/* ============================================================
   Backgrounds — animated video layer (v2)
   Fixed full-viewport video behind the app, per-page tint variants,
   subtle mouse-reactive effects (scale + hue-shift). Print-safe + reduced-motion safe.
   ============================================================ */

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

/* Video element: cover the viewport, opacity 0.6, 2s cross-fade */
.bg-video-wrap video.bg-video {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s ease;
  will-change: opacity, filter, transform;
}
.bg-video-wrap video.bg-video.background-video-loaded {
  opacity: 0.6;
}

/* Mouse-reactive state (JS sets --bg-dx/--bg-dy/--bg-hue) */
.bg-video-wrap video.bg-video.bg-reactive {
  transform: scale(1.02) 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 video into PDFs --- */
@media print {
  .bg-video-wrap,
  .bg-tint {
    display: none !important;
  }
}

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