/*!
Theme Name: Affirm Child
Theme URI: https://uicore.co
Description:  Marketing & Digital Agency WordPress Theme
Author: UiCore
Author URI: https://uicore.co
Template: affirm
Version: 1.0.0
Text Domain: affirm
*/

 /* Add your custom style here */

:root {
  --offsetX: 0;
  --offsetY: 0;
  --velocity: 1;
  --shadow: 
    0px 9px 21px rgba(0,0,0,.1),
    0px 38px 38px rgba(0,0,0,.09),
    0px 85px 51px rgba(0,0,0,.05),
    0px 151px 60px rgba(0,0,0,.01);
  --ease-out-elastic: 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
  );
}

/* Layout */
.magnetic_hero {
  display: flex;
  place-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
}

.hero__images {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  position: relative;
  touch-action: none;
  width: 100%;
  height: 40vh;
  z-index: 1;
}

.hero__image {
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
  width: clamp(6rem, 100%, 14vw);
  user-select: none;
}

.hero__image img {
  border-radius: inherit;
  box-shadow: var(--shadow);
  pointer-events: auto;
  width: auto;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform:
    translateX(calc(var(--offsetX) * 1px))
    translateY(calc(var(--offsetY) * 1px + var(--translateY)));
  transition: transform 0.7s var(--ease-out-elastic);
}

/* ===== Rotation + Translate Rules ===== */

/* Pattern 1 */
.hero__image:nth-child(1) img,
.hero__image:nth-child(4n + 1) img {
  rotate: calc(2deg - var(--velocity) * 0.25deg);
  --translateY: 5%;
}

/* Pattern 2 */
.hero__image:nth-child(2) img,
.hero__image:nth-child(4n + 2) img {
  rotate: calc(-3deg - var(--velocity) * 0.25deg);
  --translateY: -6%;
}

/* Pattern 3 */
.hero__image:nth-child(3) img,
.hero__image:nth-child(4n + 3) img {
  rotate: calc(6deg - var(--velocity) * 0.25deg);
  --translateY: 5%;
}

/* Pattern 4 */
.hero__image:nth-child(4) img,
.hero__image:nth-child(4n + 4) img {
  rotate: calc(-2deg - var(--velocity) * 0.25deg);
  --translateY: -4%;
}

/* Spacing */
.hero__image:not(:last-child) {
  margin-right: -6%;
}