.gradient-pattern{--zoom:30px;--size:1.4px;--color:currentColor;background-image:linear-gradient(45deg,var(--color) var(--size),transparent var(--size)),linear-gradient(-45deg,var(--color) var(--size),transparent var(--size)),linear-gradient(-135deg,var(--color) var(--size),transparent var(--size)),linear-gradient(135deg,var(--color) var(--size),transparent var(--size));background-size:var(--zoom) var(--zoom)}.gradient-mask{--duration:10s;--progress:0.5;animation:mask-move var(--duration) linear infinite;animation-delay:calc(-1 * var(--duration) * var(--progress));mask-image:linear-gradient(to right top,transparent calc(0% + var(--mask-position)),transparent calc(5% + var(--mask-position)),black calc(20% + var(--mask-position)),black calc(25% + var(--mask-position)),transparent calc(50% + var(--mask-position)),transparent calc(55% + var(--mask-position)),black calc(70% + var(--mask-position)),black calc(75% + var(--mask-position)),transparent calc(95% + var(--mask-position)),transparent calc(100% + var(--mask-position)))}@property --mask-position{syntax:"<percentage>";inherits:false;initial-value:0%}@keyframes mask-move{0%{--mask-position:0%}to{--mask-position:100%}}