/* =========================================================================
   Leon.Studio — Design System / MASCARAS
   -------------------------------------------------------------------------
   Utilitarios que dissolvem camadas decorativas nas bordas, para que grades,
   ondas e texturas nunca terminem em corte seco. Herdados do Marketing
   Agency e ampliados. Sempre com o par -webkit- para Safari.
   ========================================================================= */

.mask-fade-y      { mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
                    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%); }
.mask-fade-y-both { mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
                    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); }
.mask-fade-x      { mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
                    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%); }
.mask-fade-top    { mask-image: linear-gradient(to bottom, transparent, black 30%);
                    -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%); }
.mask-radial      { mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
                    -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 70%); }
.mask-hero-grid   { mask-image: radial-gradient(ellipse at center 0%, black 40%, transparent 100%);
                    -webkit-mask-image: radial-gradient(ellipse at center 0%, black 40%, transparent 100%); }
.mask-waves       { mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%);
                    -webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%); }
.mask-spotlight   { mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, black 22%, transparent 100%);
                    -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, black 22%, transparent 100%); }
.mask-aura        { mask-image: linear-gradient(to bottom, transparent, black 0%, black 80%, transparent);
                    -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 80%, transparent); }
.mask-corner      { mask-image: radial-gradient(ellipse at 100% 100%, transparent 20%, black 60%);
                    -webkit-mask-image: radial-gradient(ellipse at 100% 100%, transparent 20%, black 60%); }