/* ntvrli design system — depth
   Companion to depth.js. Transform and opacity only. */

/* Sections arrive rather than appearing. The distance is small on purpose:
   enough to register as movement, not enough to make the page feel loose. */
[data-lift] {
  opacity: 0;
  transform: translate3d(0, 2.2rem, 0);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
[data-lift].lifted { opacity: 1; transform: none; }

[data-lift="soon"]  { transition-delay: 80ms; }
[data-lift="later"] { transition-delay: 180ms; }

/* Parallax needs a layer of its own, or the browser re-rasterises text on
   every frame and the whole point is lost. */
[data-depth] { will-change: transform; }

/* Sections interleave instead of butting up against each other, so no two
   edges line up into a visible seam.

   Kept small deliberately. At -7rem the work titles landed on top of the
   services headings: that is a collision, not composition. The overlap should
   soften a boundary, and the parallax should do the work of making the page
   feel layered. */
.overlap-up   { margin-top: clamp(-3.2rem, -2.4vw, -1.4rem); }
.overlap-down { margin-bottom: clamp(-3.2rem, -2.4vw, -1.4rem); }

@media (prefers-reduced-motion: reduce) {
  [data-lift] { opacity: 1; transform: none; transition: none; }
  [data-depth] { transform: none !important; will-change: auto; }
}