/* =====================================================================
   PIXEL HAND - shared hero artifact (ApplauseLab hand mark)
   Used on Our Work, Services, and the homepage. Scoped under .pxh.
   ===================================================================== */

.pxh {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  perspective: 1000px;
}

.pxh-glow {
  position: absolute;
  top: 7%;
  right: 3%;
  bottom: 9%;
  left: 34%;
  background: linear-gradient(118deg, transparent 0 18%, rgba(105, 220, 132, 0.13) 48%, transparent 79%);
  filter: blur(20px);
  transform: translate3d(4%, -3%, -60px) skewX(-8deg);
  pointer-events: none;
}

.pxh-hand {
  width: min(620px, 100%);
  transform-style: preserve-3d;
  transform: rotateX(var(--pxh-ry, 0deg)) rotateY(var(--pxh-rx, 0deg));
  transition: transform 0.15s ease-out;
  filter: drop-shadow(0 10px 13px rgba(0, 0, 0, 0.32));
}

.pxh-hand svg {
  width: 100%;
  height: auto;
  display: block;
}

.al-hero-visual--pixel { animation: none; }

.pxh-hand.is-pixel-pulsing {
  animation: pxh-clap 0.45s steps(2, end) 1;
}

@keyframes pxh-clap {
  0% { scale: 1; rotate: 0deg; }
  50% { scale: 0.9; rotate: -4deg; }
  100% { scale: 1; rotate: 0deg; }
}

@media (max-width: 1024px) {
  .pxh-hand { width: min(460px, 82%); }
}

@media (max-width: 900px) {
  .al-hero-visual--pixel .pxh-hand {
    width: 100%;
    filter: none;
  }

  .al-hero-visual--pixel .pxh-glow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pxh-hand,
  .pxh-hand svg rect {
    transition: none !important;
    animation: none !important;
  }

  .pxh-hand.is-pixel-pulsing { animation: none; }
}