/* =========================================================
   bb-lift — a card or block lifts out like a layer
   Add "bb-lift" to a container (e.g. a work card). Optionally
   add "bb-lift-piece" to one child inside it: that piece lifts
   further, like a puzzle piece coming out.
   Works on hover and keyboard focus. CSS only.
   Kill switch: remove the class, or 'bb-lift' => false.
   ========================================================= */

.bb-lift,
.bb-lift .bb-lift-piece {
	transition:
		transform 320ms var(--bb-ease),
		box-shadow 320ms var(--bb-ease);
	will-change: transform;
}

@media (hover: hover) {
	.bb-lift:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(11, 18, 32, .12); }
	.bb-lift:hover .bb-lift-piece { transform: translate(10px, -14px) rotate(-2.5deg); box-shadow: 0 18px 36px rgba(11, 18, 32, .18); }
}

.bb-lift:focus-within { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(11, 18, 32, .12); }
.bb-lift:focus-within .bb-lift-piece { transform: translate(10px, -14px) rotate(-2.5deg); box-shadow: 0 18px 36px rgba(11, 18, 32, .18); }

/* Reduced motion: keep the shadow cue, drop the movement. */
@media (prefers-reduced-motion: reduce) {
	.bb-lift,
	.bb-lift .bb-lift-piece { transform: none !important; transition: box-shadow 200ms linear; }
}