/* =========================================================
   Cairo Prime — 3D Depth System (2026-07 "more 3D" pass)
   GPU-friendly: transform + box-shadow only. Respects
   prefers-reduced-motion and coarse/touch pointers.
   ========================================================= */

/* Interactive tilt host — inner layers float via translateZ (parallax-in-card) */
.tilt-3d {
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.22,1,.36,1),
              box-shadow .4s cubic-bezier(.22,1,.36,1);
}
.tilt-3d [data-depth] {
  transition: transform .4s cubic-bezier(.22,1,.36,1);
  transform: translateZ(0);
}
.tilt-3d.is-tilting {
  transition: box-shadow .1s linear;   /* shadow tracks the pointer live, tilt eased on reset */
  will-change: transform;
}

/* Layered elevation — cards read as floating above the page at distinct heights */
.elev-1 {
  box-shadow: 0 1px 2px rgba(8,6,3,.45),
              0 6px 14px -6px rgba(8,6,3,.42),
              0 18px 36px -14px rgba(8,6,3,.5);
}
.elev-2 {
  box-shadow: 0 2px 4px rgba(8,6,3,.5),
              0 10px 22px -8px rgba(8,6,3,.5),
              0 30px 60px -18px rgba(8,6,3,.62);
}

/* Soft hover lift (pointer-fine only) — used on cards that don't get pointer-tilt */
.lift { transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1); }
@media (hover:hover) and (pointer:fine) {
  .lift:hover { transform: translateY(-7px); }
}

/* Scroll-parallax host needs a promoted layer for smoothness */
[data-parallax] { will-change: transform; backface-visibility: hidden; }

/* ── Accessibility / touch: kill motion, keep the static layered depth ── */
@media (prefers-reduced-motion: reduce) {
  .tilt-3d, .tilt-3d [data-depth], .lift, [data-parallax] {
    transform: none !important;
    transition: none !important;
  }
}