/* ROWACH kinetic cards — load after the base stylesheet. */
.kinetic-card {
  --card-enter-x: 0px;
  --card-enter-y: 0px;
  --card-enter-rotate: 0deg;
  --card-enter-rotate-x: 0deg;
  --card-enter-rotate-y: 0deg;
  --card-enter-scale: 1;
  --card-opacity: 1;
  --card-shift-x: 0px;
  --card-shift-y: 0px;
  --card-depth: 0px;
  --card-tilt-x: 0deg;
  --card-tilt-y: 0deg;
  --card-hover-scale: 1;
  --card-neighbor-x: 0px;
  --card-neighbor-y: 0px;
  --card-rest-rotate: 0deg;
  --card-rest-rotate-x: 0deg;
  --card-rest-rotate-y: 0deg;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.balance-window.kinetic-card {
  --card-rest-rotate-y: -3deg;
}

.offers-grid > .kinetic-card,
.referral-grid > .kinetic-card {
  position: relative;
}

/* A higher specificity than .reveal.is-visible gives this scene sole
   ownership of transforms; the underlying card layouts stay untouched. */
body.js-motion .kinetic-card,
body.js-motion .kinetic-card.reveal,
body.js-motion .kinetic-card.reveal.is-visible {
  opacity: var(--card-opacity);
  animation: none;
  transition: border-color .2s ease, box-shadow .25s ease, background-color .25s ease;
  transform:
    perspective(1600px)
    translate3d(
      calc(var(--card-enter-x) + var(--card-shift-x) + var(--card-neighbor-x)),
      calc(var(--card-enter-y) + var(--card-shift-y) + var(--card-neighbor-y)),
      var(--card-depth)
    )
    rotateX(calc(var(--card-rest-rotate-x) + var(--card-enter-rotate-x) + var(--card-tilt-x)))
    rotateY(calc(var(--card-rest-rotate-y) + var(--card-enter-rotate-y) + var(--card-tilt-y)))
    rotateZ(calc(var(--card-rest-rotate) + var(--card-enter-rotate)))
    scale(calc(var(--card-enter-scale) * var(--card-hover-scale)));
}

.kinetic-card.is-card-moving {
  will-change: transform, opacity;
}

.kinetic-card.is-card-hovered {
  z-index: 5;
  border-color: rgba(214, 189, 124, .58);
  box-shadow: 0 28px 52px rgba(0, 0, 0, .28), 0 0 30px rgba(188, 167, 100, .055);
}

.kinetic-card.is-card-focused {
  border-color: rgba(214, 189, 124, .6);
}

[data-card-scene],
.balance-scene,
.balance-stage,
.balance-stack {
  position: relative;
  isolation: isolate;
}

/* Touch screens have compact entrances and no floating perspective rest pose. */
@media (max-width: 760px), (hover: none), (pointer: coarse) {
  body.js-motion .kinetic-card,
  body.js-motion .kinetic-card.reveal,
  body.js-motion .kinetic-card.reveal.is-visible {
    --card-rest-rotate: 0deg !important;
    --card-rest-rotate-x: 0deg !important;
    --card-rest-rotate-y: 0deg !important;
    box-shadow: none;
  }
}

.reduced-motion .kinetic-card,
.reduced-motion .kinetic-card.reveal,
.reduced-motion .kinetic-card.reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.motion-opt-in) .kinetic-card,
  body:not(.motion-opt-in) .kinetic-card.reveal,
  body:not(.motion-opt-in) .kinetic-card.reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto;
  }
}