/* Site wallpaper -- the single source for the background used on the home page, Shop, Login and the other pages that show it.
   Owner-tuned 2026-10-06 (brightness 1.5, contrast 1.3, colour 0.9, dark edges 0.24, dark centre 0.41). The numbers are CSS variables so a
   later settings screen (OS) can change them for every page at once by overriding these variables, with no page edited. */
:root {
  --wp-brightness: 1.5;
  --wp-contrast: 1.3;
  --wp-saturate: 0.9;
  --wp-edge: 0.24;
  --wp-centre: 0.41;
}

.device-bg-wrapper {
  position: absolute;
  inset: -6%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  overflow: hidden;
}
.device-bg-wrapper.is-fixed {
  position: fixed;
  z-index: 0;
}
.device-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0.76;
  filter: brightness(var(--wp-brightness)) contrast(var(--wp-contrast)) saturate(var(--wp-saturate));
  animation: smoothAmbientBreath 26s ease-in-out infinite alternate;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
@keyframes smoothAmbientBreath {
  0% { transform: scale(1) translate(0, 0); opacity: 0.72; }
  50% { transform: scale(1.08) translate(-1.8%, -1.2%); opacity: 0.84; }
  100% { transform: scale(1.04) translate(1.5%, 1%); opacity: 0.75; }
}
.device-bg-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, var(--wp-centre)) 0%, rgba(0, 0, 0, var(--wp-edge)) 85%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .device-bg-img { animation: none; }
}