/* Edge-local integration. The centre stays fully opaque and unfiltered. */
.light-stage[data-scene],
.concepts-no-js article {
  isolation: isolate;
  background: var(--bg) !important;
}
.light-stage .scene-frame,
.light-stage .scene-fallback,
.concepts-no-js img {
  --scene-edge-x: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.02) 2%, rgba(0,0,0,.12) 5%, rgba(0,0,0,.38) 9%, rgba(0,0,0,.74) 13%, rgba(0,0,0,.95) 17%, #000 20%, #000 80%, rgba(0,0,0,.95) 83%, rgba(0,0,0,.74) 87%, rgba(0,0,0,.38) 91%, rgba(0,0,0,.12) 95%, rgba(0,0,0,.02) 98%, transparent 100%);
  --scene-edge-y: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.02) 1%, rgba(0,0,0,.12) 3%, rgba(0,0,0,.38) 6%, rgba(0,0,0,.74) 9%, rgba(0,0,0,.95) 12%, #000 15%, #000 76%, rgba(0,0,0,.95) 80%, rgba(0,0,0,.74) 85%, rgba(0,0,0,.38) 90%, rgba(0,0,0,.12) 95%, rgba(0,0,0,.02) 98%, transparent 100%);
  --scene-edge-shape: linear-gradient(#000, #000);
  mix-blend-mode: screen;
  -webkit-mask-image: var(--scene-edge-x), var(--scene-edge-y), var(--scene-edge-shape);
  -webkit-mask-composite: source-in, source-in;
  mask-image: var(--scene-edge-x), var(--scene-edge-y), var(--scene-edge-shape);
  mask-composite: intersect, intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
}
/* The ballet truss and outer sticks sit closer to the original photograph edge. */
.light-stage img[src*="contour-"],
.concepts-no-js img[src*="contour-"] {
  --scene-edge-x: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 1.5%, rgba(0,0,0,.3) 3.5%, rgba(0,0,0,.72) 6%, rgba(0,0,0,.96) 8%, #000 10%, #000 90%, rgba(0,0,0,.96) 92%, rgba(0,0,0,.72) 94%, rgba(0,0,0,.3) 96.5%, rgba(0,0,0,.06) 98.5%, transparent 100%);
  --scene-edge-y: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.05) .5%, rgba(0,0,0,.26) 1.5%, rgba(0,0,0,.7) 3%, rgba(0,0,0,.96) 4.5%, #000 6%, #000 81%, rgba(0,0,0,.96) 85%, rgba(0,0,0,.7) 90%, rgba(0,0,0,.26) 95%, rgba(0,0,0,.05) 98.5%, transparent 100%);
}
/* Keep the upper crown and the dark circular plinth of the vortex intact. */
.light-stage img[src*="volume-"],
.concepts-no-js img[src*="volume-"] {
  --scene-edge-y: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.05) .4%, rgba(0,0,0,.26) 1.2%, rgba(0,0,0,.7) 2.5%, rgba(0,0,0,.96) 4%, #000 5%, #000 87%, rgba(0,0,0,.96) 90%, rgba(0,0,0,.7) 93%, rgba(0,0,0,.26) 97%, rgba(0,0,0,.05) 99%, transparent 100%);
}
/* Override the older stage-wide vortex mask for both transition buffers. */
.light-stage[data-light-mode] .scene-frame,
.light-stage[data-light-mode] .scene-fallback {
  -webkit-mask-image: var(--scene-edge-x), var(--scene-edge-y), var(--scene-edge-shape);
  mask-image: var(--scene-edge-x), var(--scene-edge-y), var(--scene-edge-shape);
}

/* Feather only the empty upper corners around the vortex, leaving its crown and plinth inside the opaque area. SVG blur affects the alpha mask, never the photograph. */
.light-stage img[src*="volume-"],
.concepts-no-js img[src*="volume-"] {
  --scene-edge-shape: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221536%22%20height%3D%221024%22%20viewBox%3D%220%200%201536%201024%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22edge%22%20x%3D%22-35%25%22%20y%3D%22-35%25%22%20width%3D%22170%25%22%20height%3D%22170%25%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2235%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22white%22%20filter%3D%22url(%23edge)%22%20d%3D%22M580%20120%20C650%2055%20800%20-110%201080%20-100%20C1280%20-90%201360%2040%201370%20230%20L1370%20830%20C1320%201010%201120%201050%20760%201080%20C460%201050%20270%201000%20240%20830%20C180%20660%20190%20370%20330%20240%20C410%20175%20490%20140%20580%20120%20Z%22%2F%3E%3C%2Fsvg%3E");
}