.dot-matrix{--reveal-scaled: max(0, (var(--reveal-percent) - .25) / .75) ;transition:filter var(--reveal-speed) linear;filter:contrast(min(160%,max(100%,(160% * (1 - var(--reveal-scaled))) - .25)))}.dot-matrix:after{mix-blend-mode:hard-light!important;background:radial-gradient(circle at center,var(--color-text),var(--color-background));background-size:.25em .25em;transition:opacity var(--reveal-speed) linear;opacity:min(.75,max(0,calc((1 - var(--reveal-scaled)) - .25)))}.dot-matrix *{transition:filter var(--reveal-speed) linear;filter:grayscale(calc(1 - var(--reveal-scaled)))}.dot-matrix-trigger:hover .dot-matrix,.dot-matrix-trigger:active .dot-matrix,.dot-matrix-trigger:focus-visible .dot-matrix,.dot-matrix__reveal:hover,.dot-matrix__reveal:active,.dot-matrix__reveal:focus-visible{--reveal-scaled: 1}.crossfade-container-trigger{position:absolute;inset:0 0 0 50%;z-index:1}.crossfade-container-trigger:hover+.crossfade-container picture:first-child,.crossfade-container-trigger:active+.crossfade-container picture:first-child,.crossfade-container-trigger:focus-visible+.crossfade-container picture:first-child{opacity:0}.crossfade-container-trigger:hover+.crossfade-container picture:last-child,.crossfade-container-trigger:active+.crossfade-container picture:last-child,.crossfade-container-trigger:focus-visible+.crossfade-container picture:last-child{opacity:1}.crossfade-container{position:relative}.crossfade-container picture{display:block}.crossfade-container picture:last-child{position:absolute;inset:0;opacity:0}.crossfade-container picture:first-child{opacity:1}