/* ============================================================
   91 — DEPTH

   THE COMPOSITION RULE

   Several effects want to move the same element: the entrance
   animation, scroll parallax, mouse depth, hover tilt, and the
   sticky-stack scale. `transform` is a single property, so if each
   of them assigned it directly, whichever ran last would erase the
   others.

   So wherever more than one effect lands on an element, none of
   them writes `transform`. Each writes only its own custom
   property:

     --fade-x / --fade-y / --fade-rx   entrance      (fade-in.js)
     --par-y                            scroll drift  (depth.js)
     --depth-x / --depth-y              cursor drift  (depth.js)
     --tilt-x / --tilt-y                hover tilt    (tilt.js)
     --sc                               stack scale   (showcase.js)

   and the transform expression is declared once, here. Effects
   then combine freely and can be added or removed independently.

   Three places still assign `transform` from JS, and should: the
   magnet (innermost hero wrapper), the scroll progress bar, and
   the marquee tracks. Each of those elements is a dedicated
   wrapper carrying exactly one effect, so there is nothing to
   collide with. Before adding a second effect to any of them,
   convert it to a custom property first.
   ============================================================ */

/* ------------------------------------------------------------
   SCROLL / CURSOR DRIFT
   ------------------------------------------------------------ */

[data-parallax],
[data-depth] {
  transform: translate3d(var(--depth-x, 0), calc(var(--par-y, 0px) + var(--depth-y, 0px)), 0);
  will-change: transform;
}

/* The cursor drift eases; the scroll drift must not, or it would
   lag behind the scrollbar. Only elements that are cursor-driven
   alone get a transition. */
[data-depth]:not([data-parallax]) {
  transition: transform 0.4s var(--ease-out);
}

/* ------------------------------------------------------------
   TILT
   ------------------------------------------------------------ */

/* perspective() is part of each element's own transform, NOT a
   `perspective` property on the container — see the note under
   PERSPECTIVE below. */
[data-tilt] {
  transform:
    perspective(var(--perspective))
    translate3d(0, var(--lift, 0px), 0)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg));
  transition:
    transform    var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
}

/* While the cursor is actually over the card the tilt must track
   it without lag; the transition is only there for the return. */
[data-tilt].is-tilting {
  transition:
    transform    120ms linear,
    box-shadow   var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
}

/* ------------------------------------------------------------
   PERSPECTIVE — why it is per-element, not on the container

   The obvious move is `perspective` on the grid. It is wrong here,
   and badly so.

   The `perspective` PROPERTY puts a single vanishing point at the
   centre of the container and every child is projected towards it.
   The demo grid is ~7200px tall, so its vanishing point sits
   ~3600px from the top. Measured with that rule in place, identical
   cards rendered between 214px and 435px tall depending only on how
   far they sat from that centre — a 221px spread — and neighbouring
   cards overlapped by up to 18px.

   The perspective() FUNCTION inside an element's own transform
   gives that element its own vanishing point, at its own centre.
   Every card is then projected identically no matter where it sits
   on the page.

   Container perspective is the right tool only when children are
   meant to share one vanishing point, as in a carousel or a single
   coherent 3D scene. A grid of independently tilting cards is not
   that.

   `transform-style: preserve-3d` is deliberately absent too: the
   card's contents are flat, and preserve-3d would put siblings into
   a shared 3D space where they can intersect each other.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  [data-parallax],
  [data-depth],
  [data-tilt] {
    transform: none;
    transition: none;
  }
}