/*
 * Preview-only edge blend. Load after the approved home-cinema stylesheet.
 * The image's existing mask, zoom, sizing and position stay intact.
 * Only the fixed photographic viewport fades into the kitchen behind it;
 * copy, action buttons and navigation are separate, unaffected siblings.
 */
@supports ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
  body.home-approved #collections .cinema-visual {
    --cinema-edge-inline: clamp(24px, 3.8vw, 64px);
    --cinema-edge-top: clamp(20px, 2.4vw, 40px);
    --cinema-edge-bottom: clamp(24px, 3.5vw, 56px);

    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent 0,
        #000 var(--cinema-edge-inline),
        #000 calc(100% - var(--cinema-edge-inline)),
        transparent 100%
      ),
      linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--cinema-edge-top),
        #000 calc(100% - var(--cinema-edge-bottom)),
        transparent 100%
      );
    mask-image:
      linear-gradient(
        to right,
        transparent 0,
        #000 var(--cinema-edge-inline),
        #000 calc(100% - var(--cinema-edge-inline)),
        transparent 100%
      ),
      linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--cinema-edge-top),
        #000 calc(100% - var(--cinema-edge-bottom)),
        transparent 100%
      );
    -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;
  }

  /* Keep the narrow mobile foreground and product feet fully legible. */
  @media (max-width: 760px) {
    body.home-approved #collections .cinema-visual {
      --cinema-edge-inline: 12px;
      --cinema-edge-top: 22px;
      --cinema-edge-bottom: 18px;
    }
  }
}