/* ===================================================================
   decorative-svg.css
   Shared rendering contract for governed decorative SVG assets.
   =================================================================== */

.decorative-svg {
    display: block;
    inline-size: 100%;
    aspect-ratio: var(--decorative-svg-aspect-ratio, 1 / 1);
    opacity: var(--decorative-svg-opacity, 1);
    pointer-events: none;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
    -webkit-mask-image: var(--decorative-svg-fade-mask-image, linear-gradient(#fff, #fff));
    mask-image: var(--decorative-svg-fade-mask-image, linear-gradient(#fff, #fff));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.decorative-svg__shape {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    background-color: var(--decorative-svg-color, currentColor);
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
    -webkit-mask-image: var(--decorative-svg-src);
    mask-image: var(--decorative-svg-src);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.decorative-svg--fade-none {
    --decorative-svg-fade-mask-image: linear-gradient(#fff, #fff);
}

.decorative-svg--fade-top {
    --decorative-svg-fade-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        transparent var(--decorative-svg-fade-start, 28%),
        #fff var(--decorative-svg-fade-end, 82%),
        #fff 100%
    );
}

.decorative-svg--fade-bottom {
    --decorative-svg-fade-mask-image: linear-gradient(
        to bottom,
        #fff 0,
        #fff var(--decorative-svg-fade-start, 28%),
        transparent var(--decorative-svg-fade-end, 82%),
        transparent 100%
    );
}

.decorative-svg--fade-left {
    --decorative-svg-fade-mask-image: linear-gradient(
        to right,
        transparent 0,
        transparent var(--decorative-svg-fade-start, 28%),
        #fff var(--decorative-svg-fade-end, 82%),
        #fff 100%
    );
}

.decorative-svg--fade-right {
    --decorative-svg-fade-mask-image: linear-gradient(
        to right,
        #fff 0,
        #fff var(--decorative-svg-fade-start, 28%),
        transparent var(--decorative-svg-fade-end, 82%),
        transparent 100%
    );
}