/* css.slopped.site exhibit: Depth. From css/exhibits/parallax.mjs. */
.x-parallax .scene { position: relative; height: 420px; max-width: 760px; margin: auto; border: 1.5px solid var(--ink); border-radius: 14px; background: #1b1f2a; }
.x-parallax .layer { position: absolute; inset: 0; height: 1100px; }
/* the back wall: wallpaper stripes and a window of stars */
.x-parallax .far { background: radial-gradient(circle at 30% 18%, #fffbe6 0 1.5px, transparent 2.5px) 0 0 / 61px 53px, radial-gradient(circle at 70% 60%, #fffbe6 0 1px, transparent 2px) 0 0 / 43px 71px, linear-gradient(#141826, #273049 60%, #3a2f2a); }
/* the shelf: tins, a walnut and a watch as gradient shapes */
.x-parallax .mid { background:
  radial-gradient(circle at 18% 330px, #b88a2e 0 30px, #6b4e14 31px 34px, transparent 35px),
  radial-gradient(ellipse 34px 26px at 46% 340px, #7a4b21 0 100%, transparent 101%),
  linear-gradient(#a7acb5, #6c717a) 68% 318px / 90px 44px no-repeat,
  linear-gradient(#4a3424, #2c1e14) 0 368px / 100% 22px no-repeat; }
/* the bench and the lamp's glow */
.x-parallax .near { background:
  radial-gradient(circle at 78% 560px, #ffe9a8 0 18px, #ffcc5c66 19px 90px, transparent 220px),
  linear-gradient(#6b4a2e, #3d2a1a) 0 640px / 100% 300px no-repeat; }
.x-parallax .front { position: relative; padding: 40px 28px 520px; }
.x-parallax .caption { max-width: 30ch; margin: 0 0 330px; padding: 14px 16px; border-radius: 10px; background: var(--paper); color: var(--ink); font-weight: 700; }
/* key */
.x-parallax .scene {
  overflow-x: hidden; overflow-y: auto;
  perspective: 1px; perspective-origin: 50% 0;   /* one pixel of depth: very strong 3D */
  transform-style: preserve-3d;
}
.x-parallax .layer { transform-origin: 50% 0; }
/* push each layer back, then scale it up so it looks the same size: scale = 1 + depth */
.x-parallax .far  { transform: translateZ(-3px) scale(4); }
.x-parallax .mid  { transform: translateZ(-1.5px) scale(2.5); }
.x-parallax .near { transform: translateZ(-.5px) scale(1.5); }

/* parallax is movement you didn't ask for: flatten it for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .x-parallax .layer { transform: none; }
}
/* /key */

/* live support notes (built from css/exhibits.js) */
.sup-perspective .sup-no { display: none; }
@supports not (transform-style: preserve-3d) { .sup-perspective .sup-yes { display: none; } .sup-perspective .sup-no { display: inline; } .sup-perspective { --sup: var(--no); } }