/*----------------------------------------*/
/*  tp-magnetic-image widget
/*----------------------------------------*/

.mp-hero-magnetic-image {
  border-radius: 22px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
  background: #d9d9d9;
  border: 2px solid var(--tp-common-black);
}

/* nth-child rotation + translateY offset via CSS custom props set by JS.
   --velocity fallback 0 prevents invalid calc() before first mousemove. */
.mp-hero-magnetic-image-wrap .mp-hero-magnetic-item:nth-child(1) img,
.mp-hero-magnetic-image-wrap .mp-hero-magnetic-item:nth-child(n+1):nth-child(4n+1) img {
  --translateY: 0%;
  rotate: calc(0deg - var(--velocity, 0) * 0.25deg);
}
.mp-hero-magnetic-image-wrap .mp-hero-magnetic-item:nth-child(2) img,
.mp-hero-magnetic-image-wrap .mp-hero-magnetic-item:nth-child(n+2):nth-child(4n+2) img {
  --translateY: 0%;
  rotate: calc(0deg - var(--velocity, 0) * 0.25deg);
}
.mp-hero-magnetic-image-wrap .mp-hero-magnetic-item:nth-child(3) img,
.mp-hero-magnetic-image-wrap .mp-hero-magnetic-item:nth-child(n+3):nth-child(4n+3) img {
  --translateY: 0%;
  rotate: calc(0deg - var(--velocity, 0) * 0.25deg);
}
.mp-hero-magnetic-image-wrap .mp-hero-magnetic-item:nth-child(4) img,
.mp-hero-magnetic-image-wrap .mp-hero-magnetic-item:nth-child(n+4):nth-child(4n+4) img {
  --translateY: 0%;
  rotate: calc(0deg - var(--velocity, 0) * 0.25deg);
}

/* Core transform — consumes --offsetX / --offsetY / --translateY set by main.js.
   Fallbacks (0 / 0%) ensure the calc() is valid before any mouse interaction. */
.mp-hero-magnetic-image-wrap .mp-hero-magnetic-item img {
  --offsetX: 0;
  --offsetY: 0;
  pointer-events: auto;
  width: auto;
  height: 100%;
  user-select: none;
  object-fit: cover;
  will-change: transform;
  transform: translateX(calc(var(--offsetX, 0) * 1px)) translateY(calc(var(--offsetY, 0) * 1px + var(--translateY, 0%)));
  transition: transform 0.7s linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1);
}