/* 3D depth effects for the Vals Nails flagship: layered photos that tilt, a gallery that swings into place,
   review cards that turn like pages. Driven by assets/js/depth.js. Everything here is off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  /* Tilted pieces waiting to arrive can poke a pixel past the edge; clip keeps sticky elements working */
  main { overflow-x: clip; }

  /* Hero and About: the photo stack tilts as one, each layer at its own depth */
  .depth-stage { perspective: 1100px; }
  .depth-scene { transform-style: preserve-3d; rotate: none; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
  .depth-scene.is-tracking { transition-duration: 0.25s; }
  /* Keeps the pieces' own fade-in (opacity, transform) alongside the depth movement (translate) */
  .depth-scene > * { translate: calc(var(--px, 0) * var(--depth, 0) * 1px) calc(var(--py, 0) * var(--depth, 0) * 1px); transition: translate 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0s, opacity var(--dur-slow) var(--ease-out) var(--d, 0ms), transform var(--dur-slow) var(--ease-out) var(--d, 0ms); }
  .depth-scene.is-tracking > * { transition-duration: 0.25s, var(--dur-slow), var(--dur-slow); }

  /* Gallery: photos swing up into place as they arrive, then tilt towards the pointer */
  .gallery { perspective: 1400px; }
  .js .gallery .g-item { transform: rotateX(16deg) rotateY(-8deg) translateZ(-70px); transform-origin: 50% 100%; transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms), box-shadow 0.4s; }
  .js .gallery .g-item.is-in { transform: none; }
  .js .gallery .g-item.is-tilting { transition: transform 0.2s linear, box-shadow 0.4s; box-shadow: 0 30px 60px -30px rgba(31, 26, 26, 0.55); }

  /* Reviews: cards turn like pages */
  .carousel-viewport { perspective: 1200px; }
  .carousel .slide { transform: rotateY(32deg) translateZ(-60px); transform-origin: 0% 50%; backface-visibility: hidden; }
  .carousel .slide.is-before { transform: rotateY(-32deg) translateZ(-60px); transform-origin: 100% 50%; }
  .carousel .slide.is-active { transform: none; }

  /* Price menu: each category's list lifts slightly as it comes into view */
  .menu-list { transform-origin: 50% 0%; }
  .js .menu-list[data-reveal="fade"] { transform: perspective(900px) rotateX(10deg) translate3d(0, var(--reveal-distance), 0); }
  .js .menu-list[data-reveal="fade"].is-in { transform: none; }
}