/* The home page's hero photo once an admin has chosen and placed one (HomePage.hero_image_offset_x and
   the fields after it). The variables come from /hero.css on the site (home/views.py) and from the photo
   editor in the admin, which uses this same file so its previews match the site.

   At zoom 1 the photo just covers the hero; the offsets move it from the middle by a share of its own
   size. Wherever an edge of the photo is inside the hero, the photo fades into the fill color over up to
   --hero-fade of its size. The fade shrinks as that edge reaches the side of the hero, so a photo that
   covers the hero doesn't fade at all. */
.hero-image--placed {
  container-type: size;
  overflow: hidden;
  background: var(--hero-fill);
}

.hero-image--placed img {
  --photo-w: calc(max(100cqw, 100cqh * var(--hero-ratio)) * var(--hero-zoom));
  --photo-h: calc(var(--photo-w) / var(--hero-ratio));
  --photo-left: calc(50cqw + var(--photo-w) * (var(--hero-x) / 100 - 0.5));
  --photo-top: calc(50cqh + var(--photo-h) * (var(--hero-y) / 100 - 0.5));
  --fade-w: calc(var(--photo-w) * var(--hero-fade));
  --fade-h: calc(var(--photo-h) * var(--hero-fade));
  --fade-left: clamp(0px, var(--photo-left), var(--fade-w));
  --fade-right: clamp(0px, 100cqw - var(--photo-left) - var(--photo-w), var(--fade-w));
  --fade-top: clamp(0px, var(--photo-top), var(--fade-h));
  --fade-bottom: clamp(0px, 100cqh - var(--photo-top) - var(--photo-h), var(--fade-h));
  --photo-mask:
    linear-gradient(90deg, transparent, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent),
    linear-gradient(180deg, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent);
  position: absolute;
  top: var(--photo-top);
  left: var(--photo-left);
  width: var(--photo-w);
  max-width: none;
  height: var(--photo-h);
  object-fit: fill;
  -webkit-mask-image: var(--photo-mask);
  -webkit-mask-composite: source-in;
  mask-image: var(--photo-mask);
  mask-composite: intersect;
}