.parallax-stage {
  position: relative;
  height: 72vh;
  min-height: 420px;
  overflow: hidden;
  background: #0d1410;
}

.px-layer {
  position: absolute;
  inset: -6% -6%;
  background-size: cover;
  background-position: center;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}
.px-layer-far {
  background-image: url("img/layer-far.jpg");
  filter: brightness(0.75) saturate(1.05);
}

.px-window {
  position: absolute;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}
.px-window .px-window-inner {
  position: absolute;
  inset: -20%;
  background-image: url("img/layer-near.jpg");
  background-size: cover;
}
.px-window--a {
  width: clamp(140px, 22vw, 260px);
  height: clamp(140px, 22vw, 260px);
  top: 14%;
  left: 8%;
  border-radius: 42% 58% 63% 37% / 47% 42% 58% 53%;
}
.px-window--a .px-window-inner { background-position: 20% 30%; }
.px-window--b {
  width: clamp(100px, 16vw, 190px);
  height: clamp(100px, 16vw, 190px);
  bottom: 10%;
  right: 12%;
  border-radius: 58% 42% 37% 63% / 53% 58% 42% 47%;
}
.px-window--b .px-window-inner { background-position: 70% 60%; }

.px-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, transparent 40%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

.px-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}
.px-content p {
  max-width: 24em;
  margin: 0;
  color: rgba(255,255,255,0.92);
  font-size: 0.95rem;
  line-height: 1.9;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}