/* Homepage hero mosaic. Continues the approved hero after its clean frame. */

@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  [data-mosaic-hero].hero-scroll-scene {
    height: 330vh;
  }

  [data-mosaic-hero].hero-scroll-scene.is-cinematic .mosaic-field {
    display: block;
  }

  [data-mosaic-hero].is-mosaic .hero__stage {
    border-radius: 0;
  }
}

[data-mosaic-hero] .mosaic-field {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

[data-mosaic-hero] .mosaic-shot {
  --t: clamp(0, (var(--mosaic-progress, 0) - var(--lag)) / var(--span), 1);
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: translate3d(
    calc(var(--mx) * (1 - var(--t)) + var(--clamp, 0px)),
    calc(var(--my) * (1 - var(--t))),
    0
  );
}

[data-mosaic-hero] .mosaic-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

[data-mosaic-hero] .mosaic-shot--lt {
  left: var(--mosaic-x);
  top: var(--mosaic-y);
  width: var(--mosaic-side);
  height: var(--mosaic-tall);
  --mx: -46vw;
  --my: 0px;
  --lag: 0;
  --span: 0.82;
}

[data-mosaic-hero] .mosaic-shot--lb {
  left: var(--mosaic-x);
  top: calc(var(--mosaic-y) + var(--mosaic-tall) + var(--mosaic-gap));
  width: var(--mosaic-side);
  height: var(--mosaic-short);
  --mx: -54vw;
  --my: 0px;
  --lag: 0.1;
  --span: 0.9;
}

[data-mosaic-hero] .mosaic-shot--rt {
  left: calc(var(--mosaic-x) + var(--mosaic-side) + var(--mosaic-gap) + var(--mosaic-center) + var(--mosaic-gap));
  top: var(--mosaic-y);
  width: var(--mosaic-side);
  height: var(--mosaic-short);
  --mx: 48vw;
  --my: 0px;
  --lag: 0.05;
  --span: 0.88;
}

[data-mosaic-hero] .mosaic-shot--rb {
  left: calc(var(--mosaic-x) + var(--mosaic-side) + var(--mosaic-gap) + var(--mosaic-center) + var(--mosaic-gap));
  top: calc(var(--mosaic-y) + var(--mosaic-short) + var(--mosaic-gap));
  width: var(--mosaic-side);
  height: var(--mosaic-tall);
  --mx: 58vw;
  --my: 0px;
  --lag: 0;
  --span: 0.78;
}

[data-mosaic-hero] .hero__stage {
  z-index: 3;
}