/*
 * Editorial motion for the editable homepage feature.
 *
 * The ACF images remain the only visual source. Motion lives on an inner
 * media layer so it never competes with the legacy WOW entrance transform.
 */
#scatto-main.Home .Home__Feature[data-scatto-feature-motion] {
  --scatto-feature-parallax-y: 0px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  isolation: isolate;
}

#scatto-main.Home
  .Home__Feature[data-scatto-feature-motion]
  .Home__Feature--image {
  position: relative;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: clamp(360px, 62svh, 620px);
  overflow: hidden;
  background-image: none !important;
  background-color: #111;
}

#scatto-main.Home
  .Home__Feature[data-scatto-feature-motion]
  .scatto-feature-motion__media {
  position: absolute;
  z-index: 0;
  inset: -6% 0;
  display: block;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform: translate3d(0, var(--scatto-feature-parallax-y), 0)
    scale(1.075);
  transform-origin: center;
  backface-visibility: hidden;
  transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

#scatto-main.Home
  .Home__Feature[data-scatto-feature-motion]
  .Home__Feature--banner {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: clamp(360px, 62svh, 620px);
  padding: clamp(24px, 4vw, 56px);
  overflow: hidden;
  background-color: #111;
}

#scatto-main.Home
  .Home__Feature[data-scatto-feature-motion]
  .Home__Feature--banner::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.55) 28%,
    rgba(0, 0, 0, 0.16) 56%,
    rgba(0, 0, 0, 0) 78%
  );
}

#scatto-main.Home
  .Home__Feature[data-scatto-feature-motion]
  .Home__Feature--banner
  .content {
  position: relative;
  z-index: 2;
}

#scatto-main.Home
  .Home__Feature[data-scatto-feature-motion]
  .Home__Feature--banner
  .content {
  align-self: start;
}

#scatto-main.Home
  .Home__Feature[data-scatto-feature-motion].is-in-view
  .scatto-feature-motion__media {
  will-change: transform;
}

@media (min-width: 1200.1px) {
  #scatto-main.Home .Home__Feature[data-scatto-feature-motion] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: clamp(560px, calc(100svh - 136px), 700px);
  }

  #scatto-main.Home
    .Home__Feature[data-scatto-feature-motion]
    .Home__Feature--image,
  #scatto-main.Home
    .Home__Feature[data-scatto-feature-motion]
    .Home__Feature--banner {
    width: 100%;
    max-width: none;
    height: 100%;
  }

}

@media (max-width: 767.98px) {
  #scatto-main.Home
    .Home__Feature[data-scatto-feature-motion]
    .scatto-feature-motion__media {
    inset: -3% 0;
    transform: translate3d(0, var(--scatto-feature-parallax-y), 0)
      scale(1.045);
  }
}

@media (prefers-reduced-motion: reduce) {
  #scatto-main.Home
    .Home__Feature[data-scatto-feature-motion]
    .scatto-feature-motion__media {
    inset: 0;
    transform: none !important;
    transition: none !important;
  }
}

@media print {
  #scatto-main.Home
    .Home__Feature[data-scatto-feature-motion]
    .scatto-feature-motion__media {
    transform: none !important;
  }
}