/**
 * THE rgba() IN THIS FILE IS ALPHA, NOT COLOUR (2026-09-14).
 *
 * A mask-image's colour channel is ignored; only its alpha is read. black,
 * white and rgba(0,0,0,0.5) here mean "fully opaque", "fully transparent" and
 * "half", nothing more. A role token would change the alpha and break the mask,
 * which is the same reason the eight #fff in assets/css/borders/ were left when
 * step 5 converted 60 literals around them. Classify before converting.
 *
 * Mask System — mask-image Presets
 *
 * Soft transparency effects for images and sections.
 * All presets output both -webkit- prefix and unprefixed.
 */

/* ==========================================================================
   Fade Masks
   ========================================================================== */

.mask-fade-bottom {
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent);
    mask-image: linear-gradient(to bottom, black 60%, transparent);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.mask-fade-top {
    -webkit-mask-image: linear-gradient(to top, black 60%, transparent);
    mask-image: linear-gradient(to top, black 60%, transparent);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.mask-fade-edges {
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* ==========================================================================
   Radial Masks
   ========================================================================== */

.mask-vignette {
    -webkit-mask-image: radial-gradient(ellipse 70% 70%, black 50%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 70%, black 50%, transparent 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.mask-spotlight {
    -webkit-mask-image: radial-gradient(circle at 50% 40%, black 30%, transparent 70%);
    mask-image: radial-gradient(circle at 50% 40%, black 30%, transparent 70%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* ==========================================================================
   Scrim Masks
   ========================================================================== */

.mask-scrim-bottom {
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, rgba(0, 0, 0, 0.5) 70%, transparent);
    mask-image: linear-gradient(to bottom, black 0%, black 40%, rgba(0, 0, 0, 0.5) 70%, transparent);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* ==========================================================================
   Accessibility & Performance
   ========================================================================== */

@media (prefers-reduced-transparency: reduce) {
    [class*="mask-"] {
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}

@media print {
    [class*="mask-"] {
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}