/* Reusable decorative background layers. BEM: .deco, .deco--layer-back, .deco--layer-mid, .deco--layer-front, .deco--[name] */

.deco {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.deco--layer-back {
  z-index: var(--z-deco-back);
}

.deco--layer-mid {
  z-index: var(--z-deco-mid);
}

.deco--layer-front {
  z-index: var(--z-deco-front);
}

/* Page-specific deco overrides: .deco--page-home, .deco--page-about, etc. */
.deco--page-home .deco--layer-back { }
.deco--page-home .deco--layer-mid { }
.deco--page-home .deco--layer-front { }