/* ==========================================================================
   TProM Team — 3D depth

   Real CSS 3D: a parent establishes a `perspective`, children live at actual
   `translateZ` distances inside it, and scroll turns the group. Because
   everything is a single composited transform there is no layout work per
   frame, which is what keeps this at 60fps without a WebGL context.

   Two inputs drive it:
     --p   0→1 scroll progress, written by js/motion.js
     --z   a row's distance in the scene

   Pointer tilt adds --tx / --ty on [data-tilt] for fine pointers only; the
   project plates in css/work.css use those two directly.

   Depth is switched off entirely under prefers-reduced-motion and below 861px,
   where it costs frames and buys nothing on a small screen.
   ========================================================================== */

/* ── Services rows in depth ──────────────────────────────────────────────
   Each row lifts out of the page as it arrives. Small angle on purpose —
   this is a reading section. */

.svc {
  perspective: 1500px;
  perspective-origin: 50% 45%;
}

.svc__row {
  transform-style: preserve-3d;
}
.js [data-depth-row] {
  transform: perspective(1200px) rotateX(6deg) translateZ(-40px);
  transition: transform 1s var(--ease), opacity 1s var(--ease);
}
.js [data-depth-row].is-in {
  transform: perspective(1200px) rotateX(0deg) translateZ(0);
}

/* ── Phones and reduced motion ───────────────────────────────────────────
   Everything above resolves to flat. The scroll loop in js/motion.js is also
   skipped in both cases, so --p never updates either. */

@media (max-width: 860px) {
  .svc {
    perspective: none;
  }
  .js [data-depth-row],
  .js [data-depth-row].is-in {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc {
    perspective: none !important;
  }
  .js [data-depth-row],
  .js [data-depth-row].is-in {
    transform: none !important;
    will-change: auto !important;
  }
}