/* Reino kit-motion-primitives: two photographic planes, Amia adaptation. */
@media (prefers-reduced-motion: no-preference) {
  html.amia-layered [data-framer-name="Hero2"] > [data-framer-background-image-wrapper] > img {
    /* Keep the original photo as the no-JS, reduced-motion and failed-load fallback. */
    opacity: 0;
  }
  html.amia-layered [data-framer-name="Hero2"]::before,
  html.amia-layered [data-framer-name="Hero2"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-position: 83.3% 26.1%;
    background-size: cover;
    background-repeat: no-repeat;
    transform-origin: 50% 50%;
    will-change: transform;
  }
  html.amia-layered [data-framer-name="Hero2"]::before {
    background-image: url('/assets/hero-layers/background-v1.webp');
    transform: translate3d(var(--amia-back-x, 0px), var(--amia-back-y, 0px), 0) scale(calc(1.10 - var(--amia-depth-progress, 0) * .025));
  }
  html.amia-layered [data-framer-name="Hero2"]::after {
    /* Keep the woman's ORIGINAL pixels and color; generated alpha is only a mask. */
    background-image: url('/assets/media/LOX1WnPMaXU67eYjhwX5x0uTHc.png');
    -webkit-mask-image: url('/assets/hero-layers/foreground-v1.webp');
    mask-image: url('/assets/hero-layers/foreground-v1.webp');
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: 83.3% 26.1%;
    mask-position: 83.3% 26.1%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transform: translate3d(var(--amia-front-x, 0px), var(--amia-front-y, 0px), 0) scale(calc(1.085 + var(--amia-depth-progress, 0) * .12));
  }
}

@media (max-width: 809px), (hover: none), (pointer: coarse) {
  html.amia-layered [data-framer-name="Hero2"]::before,
  html.amia-layered [data-framer-name="Hero2"]::after {
    transform: none;
    will-change: auto;
  }
}

/* Portrait composition exposes the reflected background behind the subject. */
@media (max-width: 809px) and (prefers-reduced-motion: no-preference) {
  html.amia-layered [data-framer-name="Hero2"]::before { background-position: 14% 26.1%; }
  html.amia-layered [data-framer-name="Hero2"]::after {
    transform-origin: 100% 100%;
    transform: translateX(4%) scale(.88);
  }
}