/* A narrow, fast falloff softens the seam without leaving a visible feathered frame. */
.media-blend {
  --media-edge-width: 4px;
  --media-edge-stops:
    transparent 0,
    rgb(0 0 0 / .7) calc(var(--media-edge-width) * .25),
    rgb(0 0 0 / .94) calc(var(--media-edge-width) * .5),
    rgb(0 0 0 / .99) calc(var(--media-edge-width) * .75),
    #000 var(--media-edge-width),
    #000 calc(100% - var(--media-edge-width)),
    rgb(0 0 0 / .99) calc(100% - var(--media-edge-width) * .75),
    rgb(0 0 0 / .94) calc(100% - var(--media-edge-width) * .5),
    rgb(0 0 0 / .7) calc(100% - var(--media-edge-width) * .25),
    transparent 100%;
}

@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {
  .media-blend {
    -webkit-mask-image: linear-gradient(90deg, var(--media-edge-stops)), linear-gradient(0deg, var(--media-edge-stops));
    mask-image: linear-gradient(90deg, var(--media-edge-stops)), linear-gradient(0deg, var(--media-edge-stops));
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    mask-mode: alpha;
  }
}

/* The film occupies the same portrait frame as the other atelier gallery images. */
.af-process-gallery > .atelier-gallery-film {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
}
.af-process-gallery > .atelier-gallery-film > .atelier-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: inherit;
  --video-focus: 42% 50%;
}

@media (max-width: 760px) {
  .media-blend { --media-edge-width: 3px; }
}