/* ============================================================
   37-3d-tilt.css — CSS-only 3D tilt + depth on cards

   On pointer hover, service blocks, project cards, and testimonial
   cards subtly tilt toward the cursor. No JS, no per-card mouse
   tracking — we use CSS `perspective` + `:hover` to give a fixed
   tilt angle that reads as "this card has weight in 3D space".

   For a richer effect, the .tilt-3d-cursor class (applied via a
   tiny progressive-enhancement script when supported) follows
   the actual cursor position. That's optional. Pure CSS gives
   ~80% of the wow at zero JS.

   Key trick: a stacked context with `transform-style: preserve-3d`
   on the card and `translateZ(20px)` on the inner content. The
   image/photo sits at z=0 (background), the text floats forward.
   ============================================================ */

@media (hover: hover) {
  /* Wrapper gets perspective so child transforms render in 3D.
     NOTE: `transform-style: preserve-3d` is set ONLY on :hover
     (not on the base element) so it doesn't interfere with the
     scroll-driven `btb-card-lift` animation defined in
     32-scroll-driven.css for the same elements. preserve-3d on
     the base creates a stacking context that can cause brief
     z-index flashes during the scroll-reveal animation. */
  .svc-block,
  .project-card,
  .tst-card,
  .value-prop {
    perspective: 1200px;
    transition:
      transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
      box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .svc-block:hover,
  .project-card:hover,
  .tst-card:hover,
  .value-prop:hover {
    transform-style: preserve-3d;
    will-change: transform;
  }

  /* Hover tilt — slight Y-axis rotation + lift on Z-axis.
     All tilt angles + shadows use the same brand tokens so they
     stay in sync if the brand shadow scale ever shifts. */
  .svc-block:hover {
    transform: perspective(1200px) rotateY(-1.5deg) rotateX(2deg) translateZ(8px);
    box-shadow: var(--shadow-lg);
  }
  .svc-block.svc-block-flip:hover {
    transform: perspective(1200px) rotateY(1.5deg) rotateX(2deg) translateZ(8px);
  }

  .project-card:hover,
  .tst-card:hover {
    transform: perspective(1200px) rotateX(3deg) translateZ(8px) translateY(-4px);
    box-shadow: var(--shadow-lg);
  }

  .value-prop:hover {
    transform: perspective(1000px) rotateX(3deg) translateZ(6px);
    box-shadow: var(--shadow-lg);
  }

  /* Inner content floats forward of the card background */
  .svc-block:hover .svc-body,
  .project-card:hover .project-card-body,
  .tst-card:hover .tst-quote,
  .tst-card:hover .tst-author {
    transform: translateZ(20px);
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

/* Mobile / touch — no hover, but tap gives a brief lift */
@media (hover: none) {
  .svc-block:active,
  .project-card:active,
  .tst-card:active,
  .value-prop:active {
    transform: scale(0.985);
    transition: transform 0.12s ease;
  }
}

/* Reduce-motion guard */
@media (prefers-reduced-motion: reduce) {
  .svc-block,
  .project-card,
  .tst-card,
  .value-prop {
    transition: none;
  }
  .svc-block:hover,
  .project-card:hover,
  .tst-card:hover,
  .value-prop:hover {
    transform: none;
  }
}