/* ZiiiRA v23b hero-edge: narrow soft fade on the hero photo's RIGHT and BOTTOM edges only (PC + tablet, 701px+).
 * Band: the last 7% of the photo's width (right) and the last 7% of its height (bottom). TOP and LEFT: no change
 * (the mask is fully opaque everywhere above / left of the bands, so the top edge is pixel-identical to live).
 * Image size, position, object-fit and the zh-settle zoom are untouched; the left fade (.hero-visual::after) stays.
 * The photo is drawn object-fit:contain (3:2, centred) inside .hero-visual, so its on-screen box is computed with
 * container units: width = min(100cqw, 150cqh), height = width / 1.5, centred. The mask sits on <picture>
 * (not the zooming <img>), so the edge stays put while the image settles. Browsers without container units or
 * mask-composite simply ignore it and show the current image. Mobile (<=700px) is untouched.
 * Self-contained: one file + one enqueue line, so it merges into any later build. */
@media (min-width:701px) {
  body.home .home-hero .hero-visual { container-type:size; }
  body.home .home-hero .hero-visual picture {
    --zhe-w:min(100cqw, 150cqh);
    --zhe-h:calc(var(--zhe-w) / 1.5);
    --zhe-r:calc(50cqw + var(--zhe-w) / 2);   /* photo right edge  */
    --zhe-b:calc(50cqh + var(--zhe-h) / 2);   /* photo bottom edge */
    --zhe-mx:linear-gradient(to right, #000 calc(var(--zhe-r) - var(--zhe-w) * .07), rgba(0,0,0,.6) calc(var(--zhe-r) - var(--zhe-w) * .035), transparent var(--zhe-r));
    --zhe-my:linear-gradient(to bottom, #000 calc(var(--zhe-b) - var(--zhe-h) * .07), rgba(0,0,0,.6) calc(var(--zhe-b) - var(--zhe-h) * .035), transparent var(--zhe-b));
    -webkit-mask-image:var(--zhe-mx), var(--zhe-my);
    -webkit-mask-composite:source-in;
    mask-image:var(--zhe-mx), var(--zhe-my);
    mask-composite:intersect;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%; mask-size:100% 100%;
  }
}