/* Sapient visual library, iteration 01. Explicit opt-in; load after sapient.css.
 * Raster artwork is light-mode only. Dark mode uses the shared surface tokens.
 * No animation, Canvas dependency, global card override, or media storage.
 */
:root,
.su-visual-card-frame,
.su-visual-section-quiet,
.su-visual-decorator-rose,
.su-visual-filler-contour,
.su-visual-filler-dots,
.su-visual-heading-rule,
.su-visual-quote {
    --su-visual-accent: var(--su-brand);
    --su-visual-surface: var(--su-card);
    --su-visual-text: var(--su-on-surface);
    --su-visual-muted: var(--su-on-surface-muted);
    --su-visual-border: color-mix(in srgb, var(--su-visual-accent) 12%, var(--su-card-border, var(--su-on-surface-muted)) 88%);
    --su-visual-tint: color-mix(in srgb, var(--su-visual-accent) 6%, var(--su-card) 94%);
    --su-visual-quiet: color-mix(in srgb, var(--su-visual-accent) 2%, var(--su-surface) 98%);
    --su-visual-ornament: color-mix(in srgb, var(--su-visual-accent) 24%, transparent);
}

:root {
    --su-visual-card-veil: color-mix(in srgb, var(--su-surface) 70%, transparent);
    --su-visual-section-veil: color-mix(in srgb, var(--su-surface) 20%, transparent);
    --su-visual-card-image: linear-gradient(var(--su-visual-card-veil), var(--su-visual-card-veil)), url("backgrounds/card-blush-paper-v1.webp");
    --su-visual-section-image: linear-gradient(var(--su-visual-section-veil), var(--su-visual-section-veil)), url("backgrounds/section-pearl-paper-v1.webp");
    --su-visual-corner-image: url("decorators/corner-rose-fold-v1.webp");
}

.su-visual-card-frame {
    position: relative;
    isolation: isolate;
    min-width: 0;
    height: 100%;
    border: 1px solid var(--su-visual-border);
    border-radius: var(--su-radius-lg);
    background-color: var(--su-visual-surface);
    color: var(--su-visual-text);
    box-shadow: var(--su-shadow-sm);
}

.su-visual-card-frame:where(.su-card-transparent) {
    padding: var(--su-space-xl);
}

.su-visual-card-frame :where(.su-content-card-title, .su-card-name, .su-card-quote) {
    color: var(--su-visual-text);
}

.su-visual-card-frame :where(.su-content-card-summary, .su-card-role, .su-card-summary) {
    color: var(--su-visual-muted);
}

.su-visual-card-tint {
    background-color: var(--su-visual-tint);
}

.su-visual-card-blush {
    background-image: var(--su-visual-card-image);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.su-visual-section-quiet {
    position: relative;
    isolation: isolate;
    padding: clamp(1.25rem, 4vw, 3rem);
    border-radius: var(--su-radius-lg);
    background-color: var(--su-visual-quiet);
    color: var(--su-visual-text);
}

.su-visual-section-pearl {
    background-image: var(--su-visual-section-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.su-visual-decorator-rose {
    position: relative;
    isolation: isolate;
}

.su-visual-decorator-rose::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: min(32%, 7.5rem);
    aspect-ratio: 1;
    border-start-end-radius: inherit;
    background: var(--su-visual-corner-image) right top / contain no-repeat;
    opacity: 0.52;
    z-index: -1;
    pointer-events: none;
}

.su-visual-filler-contour,
.su-visual-filler-dots {
    position: relative;
    isolation: isolate;
}

.su-visual-filler-contour::before,
.su-visual-filler-dots::before {
    content: "";
    position: absolute;
    width: min(25%, 7rem);
    aspect-ratio: 1;
    background-color: var(--su-visual-ornament);
    mask: var(--su-visual-filler-mask) center / contain no-repeat;
    -webkit-mask: var(--su-visual-filler-mask) center / contain no-repeat;
    z-index: -1;
    pointer-events: none;
}

.su-visual-filler-contour::before {
    inset-block-start: 0;
    inset-inline-start: 0;
    --su-visual-filler-mask: url("fillers/contour-corner-v1.svg");
}

.su-visual-filler-dots::before {
    inset-block-end: var(--su-space-md);
    inset-inline-end: var(--su-space-md);
    --su-visual-filler-mask: url("fillers/dot-field-v1.svg");
}

.su-visual-heading-rule > .su-section-heading::after {
    content: "";
    display: block;
    width: 3rem;
    height: 0.25rem;
    margin-block-start: var(--su-space-md);
    background-color: var(--su-visual-accent);
    mask: url("decorators/heading-rule-v1.svg") center / contain no-repeat;
    -webkit-mask: url("decorators/heading-rule-v1.svg") center / contain no-repeat;
}

.su-visual-quote .su-card-quote::before {
    content: "";
    display: block;
    width: 1.75rem;
    height: 1.3125rem;
    margin-block-end: var(--su-space-md);
    background-color: var(--su-visual-accent);
    mask: url("decorators/quote-mark-v1.svg") center / contain no-repeat;
    -webkit-mask: url("decorators/quote-mark-v1.svg") center / contain no-repeat;
}

.su-visual-quote .su-card-quote-icon {
    display: none;
}

/* Physical light-paper art is omitted on dark surfaces, rather than inverted. */
[data-su-theme-dark="true"],
[data-bs-theme="dark"],
body.dark {
    --su-visual-card-image: none;
    --su-visual-section-image: none;
    --su-visual-corner-image: none;
}

@media (max-width: 479px) {
    .su-visual-decorator-rose::after {
        width: 4.5rem;
        opacity: 0.3;
    }

    .su-visual-card-frame:where(.su-card-transparent) {
        padding: var(--su-space-lg);
    }
}