/* Fixed-depth alpha edges shared by scenery and the inner-shadow clip. */
.home-torn-mask {
    -webkit-mask-image: url('../images/rmt/parchment.webp'), linear-gradient(#000, #000), url('../images/rmt/parchment.webp');
    mask-image: url('../images/rmt/parchment.webp'), linear-gradient(#000, #000), url('../images/rmt/parchment.webp');
    -webkit-mask-size: 100% 360px, 100% calc(100% - 80px), 100% 360px;
    mask-size: 100% 360px, 100% calc(100% - 80px), 100% 360px;
    -webkit-mask-position: center top, center, center bottom;
    mask-position: center top, center, center bottom;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.home-torn-filters {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
}

/* Clip only the inverse silhouette's soft shadows inward, without painting its source. */
.home-torn-depth {
    /* DevTools control: 0 = no inner shadow; 1 = full strength. No colored rim. */
    --home-torn-shadow-strength: 0.3;
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
}

.home-torn-shadow {
    display: none;
    position: absolute;
    inset: 0;
    filter: url(#home-torn-shadow-only);
    opacity: var(--home-torn-shadow-strength);
}

@supports ((mask-composite: subtract) or (-webkit-mask-composite: source-out)) {
    .home-torn-shadow { display: block; }

    /* Full canvas minus the union of the same three mask layers. */
    .home-torn-shadow::before {
        content: '';
        position: absolute;
        inset: 0;
        background: #000;
        -webkit-mask-image: linear-gradient(#000, #000), url('../images/rmt/parchment.webp'), linear-gradient(#000, #000), url('../images/rmt/parchment.webp');
        mask-image: linear-gradient(#000, #000), url('../images/rmt/parchment.webp'), linear-gradient(#000, #000), url('../images/rmt/parchment.webp');
        -webkit-mask-size: 100% 100%, 100% 360px, 100% calc(100% - 80px), 100% 360px;
        mask-size: 100% 100%, 100% 360px, 100% calc(100% - 80px), 100% 360px;
        -webkit-mask-position: center, center top, center, center bottom;
        mask-position: center, center top, center, center bottom;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-composite: source-out, source-over, source-over, source-over;
        mask-composite: subtract, add, add, add;
    }
}