/*----------------------------------------*/

/*  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);

}