/* Pictorial depth stays inside the fixed art plane; reading and layout are untouched. */
.hero-art > .paint {
  background-image: url('assets/paint-relief.jpg'), url('assets/paint.jpg');
}

.depth-atmosphere,
.depth-foreground {
  position: absolute;
  inset: -2%;
  z-index: 0;
  pointer-events: none;
}

/* A quiet recessed middle tone beside the raised pigment, clear of the reading area. */
.depth-atmosphere {
  background:
    linear-gradient(129deg, transparent 46%, rgba(5, 8, 19, .14) 59%, transparent 71%),
    radial-gradient(ellipse at 83% 44%, rgba(142, 150, 188, .055), transparent 48%);
  transform: translate3d(
    calc(var(--indigo-depth-x, 0px) * -.22),
    calc(var(--indigo-depth-y, 0px) * -.22),
    0
  );
}

/* The relief artwork has the same crop as the base; the soft mask adds no hard edge. */
.depth-foreground {
  display: none;
  background-image: url('assets/paint-relief.jpg'), url('assets/paint.jpg');
  background-position: center 53%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .34;
  mix-blend-mode: luminosity;
  filter: contrast(1.035) brightness(1.025);
  transform: translate3d(var(--indigo-depth-x, 0px), var(--indigo-depth-y, 0px), 0);
}

@supports ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
  .depth-foreground {
    display: block;
    -webkit-mask-image: linear-gradient(135deg, transparent 46%, rgba(0,0,0,.4) 59%, #000 72%, #000 83%, transparent 98%);
    mask-image: linear-gradient(135deg, transparent 46%, rgba(0,0,0,.4) 59%, #000 72%, #000 83%, transparent 98%);
  }
}

/* Pause also stops the extra planes; the material relief remains visible. */
.paused .depth-atmosphere,
.paused .depth-foreground,
.backgrounded .depth-atmosphere,
.backgrounded .depth-foreground,
.welcome-pending .depth-atmosphere,
.welcome-pending .depth-foreground,
.welcome-playing .depth-atmosphere,
.welcome-playing .depth-foreground {
  transform: none;
}

@media (max-width: 760px) {
  .depth-foreground { background-position: 58% 38%; }
  .depth-atmosphere { opacity: .7; }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .depth-atmosphere,
  .depth-foreground { transform: none; }
}