@property --spw-slice-lift {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
:root {
--spw-texture-paper: image-set(
url('../../images/assets/motifs/texture-paper-fiber-display.avif') type('image/avif'),
url('../../images/assets/motifs/texture-paper-fiber-display.webp') type('image/webp')
);
--spw-texture-linen: image-set(
url('../../images/assets/motifs/texture-linen-weave-display.avif') type('image/avif'),
url('../../images/assets/motifs/texture-linen-weave-display.webp') type('image/webp')
);
--spw-texture-harlequin: image-set(
url('../../images/assets/motifs/texture-harlequin-diamonds-display.avif') type('image/avif'),
url('../../images/assets/motifs/texture-harlequin-diamonds-display.webp') type('image/webp')
);
--spw-texture-wash: image-set(
url('../../images/assets/motifs/texture-cream-ochre-wash-display.avif') type('image/avif'),
url('../../images/assets/motifs/texture-cream-ochre-wash-display.webp') type('image/webp')
);
--spw-texture-slice-image: var(--spw-texture-paper);
--spw-texture-slice-opacity: 0.075;
--spw-slice-u: 28%;
--spw-slice-v: 42%;
--spw-slice-size: 170%;
--spw-slice-px: 0%;
--spw-slice-py: 0%;
--spw-slice-lift: 0;
--spw-slice-lift-invite: 0.55;
--spw-slice-lift-charge: 0.9;
}
[data-spw-texture-slice] {
--spw-slice-motion: var(--spw-motion-settle, var(--duration-base, 220ms) var(--ease-settle));
position: relative;
isolation: isolate;
transition: --spw-slice-lift var(--spw-slice-motion);
}
[data-spw-texture-slice] > :not(.spw-texture-slice) {
position: relative;
z-index: 1;
}
:is([data-spw-texture-slice='paper'], [data-spw-slice-family='paper']) {
--spw-texture-slice-image: var(--spw-texture-paper);
}
:is([data-spw-texture-slice='linen'], [data-spw-slice-family='linen']) {
--spw-texture-slice-image: var(--spw-texture-linen);
}
:is([data-spw-texture-slice='harlequin'], [data-spw-slice-family='harlequin']) {
--spw-texture-slice-image: var(--spw-texture-harlequin);
--spw-texture-slice-opacity: 0.06;
}
:is([data-spw-texture-slice='wash'], [data-spw-slice-family='wash']) {
--spw-texture-slice-image: var(--spw-texture-wash);
}
:where([data-spw-seed$='0'], [data-spw-seed$='a']) { --spw-slice-u: 12%; --spw-slice-v: 18%; }
:where([data-spw-seed$='1'], [data-spw-seed$='b']) { --spw-slice-u: 38%; --spw-slice-v: 22%; }
:where([data-spw-seed$='2'], [data-spw-seed$='c']) { --spw-slice-u: 64%; --spw-slice-v: 16%; }
:where([data-spw-seed$='3'], [data-spw-seed$='d']) { --spw-slice-u: 18%; --spw-slice-v: 48%; }
:where([data-spw-seed$='4'], [data-spw-seed$='e']) { --spw-slice-u: 52%; --spw-slice-v: 56%; }
:where([data-spw-seed$='5'], [data-spw-seed$='f']) { --spw-slice-u: 76%; --spw-slice-v: 44%; }
:where([data-spw-seed$='6']) { --spw-slice-u: 14%; --spw-slice-v: 72%; }
:where([data-spw-seed$='7']) { --spw-slice-u: 44%; --spw-slice-v: 78%; }
:where([data-spw-seed$='8']) { --spw-slice-u: 70%; --spw-slice-v: 68%; }
:where([data-spw-seed$='9']) { --spw-slice-u: 32%; --spw-slice-v: 36%; }
[data-spw-texture-slice]:focus-within {
--spw-slice-lift: var(--spw-slice-lift-invite);
}
@media (hover: hover) and (pointer: fine) {
[data-spw-texture-slice]:hover {
--spw-slice-lift: var(--spw-slice-lift-invite);
}
}
[data-spw-texture-slice]:is(
[data-spw-gesture='charging'],
[data-spw-gesture='armed'],
[data-spw-hold-state='arming'],
[data-spw-image-state='primed'],
[data-spw-image-state='engaged']
) {
--spw-slice-lift: var(--spw-slice-lift-charge);
}
[data-spw-texture-slice]:is([data-spw-collected='true'], [data-spw-visited='true']) {
--spw-texture-slice-opacity: 0.10;
}
.spw-texture-slice {
--spw-slice-return: calc(
var(--material-specular, 0.28)
* (1 - var(--spw-biome-attenuation, 0))
);
inset: 0;
overflow: clip;
border-radius: inherit;
box-shadow: inset 0 1px 0 color-mix(
in srgb,
white calc((var(--spw-slice-return) + (var(--spw-slice-lift) * 0.06)) * 34%),
transparent
);
pointer-events: none;
position: absolute;
z-index: var(--spw-local-layer-substrate, 0);
}
.spw-texture-slice::before,
[data-spw-texture-slice]:not(:has(> .spw-texture-slice))::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: var(--spw-local-layer-substrate, 0);
border-radius: inherit;
background-image: var(--spw-texture-slice-image);
background-repeat: no-repeat;
background-size: var(--spw-slice-size);
background-position:
calc(var(--spw-slice-u) + (var(--spw-slice-lift) * 1.5%) + var(--spw-slice-px))
calc(var(--spw-slice-v) - (var(--spw-slice-lift) * 1%) + var(--spw-slice-py));
opacity: calc(var(--spw-texture-slice-opacity) + (var(--spw-slice-lift) * 0.018));
mix-blend-mode: normal;
filter: saturate(calc(1 + (var(--spw-slice-lift) * 0.06)));
-webkit-mask-image: linear-gradient(
166deg,
transparent 0 10%,
#000 19% 26%,
transparent 35% 63%,
#000 72% 79%,
transparent 88%
);
mask-image: linear-gradient(
166deg,
transparent 0 10%,
#000 19% 26%,
transparent 35% 63%,
#000 72% 79%,
transparent 88%
);
transition: opacity var(--spw-slice-motion);
}
[data-spw-texture-slice]:not(:hover):not(:focus-within) .spw-texture-slice::before,
[data-spw-texture-slice]:not(:hover):not(:focus-within):not(:has(> .spw-texture-slice))::after {
transition:
opacity var(--spw-slice-motion),
background-position var(--spw-slice-motion),
filter var(--spw-slice-motion);
}
.spw-texture-slice[data-spw-slice-glitch='true']::after {
content: '';
position: absolute;
inset: 0;
background-image: inherit;
background-size: inherit;
background-position:
calc(var(--spw-slice-u) + 3% + (var(--spw-slice-lift) * 2%) + var(--spw-slice-px))
calc(var(--spw-slice-v) - 2% + var(--spw-slice-py));
mix-blend-mode: screen;
opacity: calc(0.22 + (var(--spw-slice-lift) * 0.12));
clip-path: polygon(0 40%, 100% 28%, 100% 46%, 0 58%);
transition: opacity var(--spw-slice-motion);
}
html:is(
[data-spw-capture-mode='clean'],
[data-spw-capture-mode='screenshot'],
[data-spw-capture-mode='study'],
[data-spw-reduce-motion='on']
) [data-spw-texture-slice] {
--spw-slice-lift: 0;
--spw-slice-px: 0%;
--spw-slice-py: 0%;
}
html[data-spw-reduce-motion='on'] [data-spw-texture-slice] {
transition: none;
}
html:is(
[data-spw-capture-mode='clean'],
[data-spw-capture-mode='screenshot'],
[data-spw-capture-mode='study'],
[data-spw-reduce-motion='on'],
[data-spw-high-contrast='on']
) .spw-texture-slice[data-spw-slice-glitch='true']::after {
content: none;
}
@media (prefers-reduced-motion: reduce) {
[data-spw-texture-slice] {
--spw-slice-lift: 0;
--spw-slice-px: 0%;
--spw-slice-py: 0%;
transition: none;
}
.spw-texture-slice::before,
[data-spw-texture-slice]:not(:has(> .spw-texture-slice))::after {
filter: none;
transition: opacity var(--duration-fast, 140ms) linear;
}
.spw-texture-slice[data-spw-slice-glitch='true']::after {
content: none;
}
}
html[data-spw-reduce-motion='on'] .spw-texture-slice::before,
html[data-spw-reduce-motion='on'] [data-spw-texture-slice]:not(:has(> .spw-texture-slice))::after {
filter: none;
transition: opacity var(--duration-fast, 140ms) linear;
}
html[data-spw-color-mode='dark'] {
--spw-texture-slice-opacity: 0.07;
}
html[data-spw-color-mode='dark'] :is(
[data-spw-texture-slice='wash'],
[data-spw-slice-family='wash'],
[data-spw-texture-slice='paper'],
[data-spw-slice-family='paper']
) {
--spw-texture-slice-opacity: 0.06;
}
html[data-spw-color-mode='dark'] :is(
[data-spw-texture-slice='harlequin'],
[data-spw-slice-family='harlequin']
) {
--spw-texture-slice-opacity: 0.045;
}
html[data-spw-color-mode='dark'] :is(
[data-spw-texture-slice='linen'],
[data-spw-slice-family='linen']
) {
--spw-texture-slice-opacity: 0.065;
}
[data-spw-texture-slice][data-spw-slice-ground='dark'] {
--spw-texture-slice-opacity: 0.065;
}
[data-spw-texture-slice][data-spw-slice-ground='dark']:is(
[data-spw-texture-slice='harlequin'],
[data-spw-slice-family='harlequin']
) {
--spw-texture-slice-opacity: 0.045;
}
html[data-spw-high-contrast='on'] {
--spw-texture-slice-opacity: 0.025;
--spw-slice-lift-invite: 0.28;
}
html[data-spw-high-contrast='on'] [data-spw-texture-slice]:is(:hover, :focus-within) {
--spw-slice-lift: var(--spw-slice-lift-invite);
}
html[data-spw-base-metamaterial='paper'] :is(
[data-spw-texture-slice='paper'],
[data-spw-slice-family='paper']
) {
--spw-texture-slice-opacity: 0.10;
}
html[data-spw-base-metamaterial='paper'][data-spw-color-mode='dark'] :is(
[data-spw-texture-slice='paper'],
[data-spw-slice-family='paper']
),
html[data-spw-base-metamaterial='paper'] :is(
[data-spw-texture-slice='paper'],
[data-spw-slice-family='paper']
)[data-spw-slice-ground='dark'] {
--spw-texture-slice-opacity: 0.065;
}