/* Paint-to-reveal subtitle. js/paint.js updates the --paint mask. */

/* Both texts share one grid cell; the box shrinks to fit the text */
.paint-reveal {
    display: grid;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

    -webkit-user-select: none;
    user-select: none;
}

.paint-reveal > span {
    grid-area: 1 / 1;
}

.paint-back {
    visibility: hidden;
}

.paint-reveal.is-ready {
    --paint: linear-gradient(transparent, transparent);

    touch-action: none;
    /* Brush-sized cursor with a double stroke so it shows on both themes */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='18' cy='18' r='15' fill='none' stroke='%23000' stroke-opacity='.45' stroke-width='3'/%3E%3Ccircle cx='18' cy='18' r='15' fill='none' stroke='%23fff' stroke-opacity='.9' stroke-width='1.2'/%3E%3C/svg%3E") 18 18, crosshair;
}

/* Full-cell boxes keep both masks aligned */
.paint-reveal.is-ready > span {
    display: grid;
    place-items: center;
    align-self: stretch;
    justify-self: stretch;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.paint-reveal.is-ready .paint-back {
    visibility: visible;
    color: var(--accent);

    -webkit-mask-image: var(--paint);
    mask-image: var(--paint);
}

/* Inverse mask: full layer minus the paint */
.paint-reveal.is-ready .paint-front {
    -webkit-mask-image: linear-gradient(#000, #000), var(--paint);
    -webkit-mask-composite: xor;
    mask-image: linear-gradient(#000, #000), var(--paint);
    mask-composite: exclude;
}