/* The artwork moves; the controls and type keep their original hit areas. */
.builder-launch{max-width:1568px;margin:0 auto 25px;display:flex;justify-content:flex-end}
.builder-launch .button{font-size:14px}
.art-reactive {
  --art-x: 0;
  --art-y: 0;
  --art-presence: 0;
  --art-shine: 50%;
  --art-travel: 9px;
  --art-lift: 7px;
  --art-turn: .65deg;
  --art-zoom: .055;
  position: relative;
}

.hero.art-reactive {
  --art-travel: 22px;
  --art-lift: 14px;
  --art-turn: .7deg;
  --art-zoom: .045;
}

.art-reactive.art-quiet {
  --art-travel: 5px;
  --art-lift: 4px;
  --art-turn: .25deg;
  --art-zoom: .02;
}

.art-reactive > .art-image {
  translate: calc(var(--art-x) * var(--art-travel)) calc(var(--art-y) * var(--art-lift));
  rotate: calc(var(--art-x) * var(--art-turn));
  scale: calc(1 + var(--art-presence) * var(--art-zoom));
}

.product:hover .product-visual .art-image,
.lab-item:hover .art-image {
  transform: none;
}

.art-reactive > .art-reflection {
  pointer-events: none;
  user-select: none;
  opacity: calc(var(--art-presence) * .46);
  filter: brightness(2.15) saturate(.65);
  mask-image: linear-gradient(112deg, transparent calc(var(--art-shine) - 23%), #000 var(--art-shine), transparent calc(var(--art-shine) + 23%));
  animation: none;
  transition: none;
}

.art-reactive:not(.hero) > .art-reflection {
  position: absolute;
  top: 0;
  left: 0;
}

.hero.art-reactive > .art-reflection {
  opacity: calc(var(--art-presence) * .6);
}

.lab-item > span:not(.art-reflection) {
  z-index: 1;
}

/* No pointer geometry on touch devices, including when the OS setting changes. */
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .art-reactive > .art-image {
    translate: none;
    rotate: none;
    scale: none;
  }
  .art-reactive > .art-reflection { display: none; }
}