[x-qrcode] svg{width:100%!important}@property --o{syntax: "<number>"; initial-value: 0; inherits: false;}@property --hyp{syntax: "<number>"; initial-value: .1; inherits: false;}@property --mx{syntax: "<percentage>"; initial-value: 50%; inherits: false;}@property --my{syntax: "<percentage>"; initial-value: 50%; inherits: false;}@property --posx{syntax: "<percentage>"; initial-value: 50%; inherits: false;}@property --posy{syntax: "<percentage>"; initial-value: 50%; inherits: false;}@keyframes rotate{0%{transform:rotateY(0) rotateX(0)}20%{transform:rotateY(-20deg) rotateX(20deg)}40%{transform:rotateY(20deg) rotateX(20deg)}60%{transform:rotateY(20deg) rotateX(-20deg)}80%{transform:rotateY(-20deg) rotateX(-20deg)}to{transform:rotateY(0) rotateX(0)}}@keyframes move-shine{0%{--mx: 50%;--my: 50%;--posx: 50%;--posy: 50%;--hyp: .1;--o: 0}33%{--mx: 83%;--my: 28%;--posx: 55%;--posy: 38%;--hyp: .2;--o: 1}66%{--mx: 16%;--my: 28%;--posx: 38%;--posy: 38%;--hyp: .2;--o: 1}to{--mx: 50%;--my: 50%;--posx: 50%;--posy: 50%;--hyp: .1;--o: 0}}.card{position:relative;width:100%;aspect-ratio:1;border-radius:3px;background-position:top center;transform-style:preserve-3d;display:flex;justify-content:center;align-items:center;.backgrounds{position:absolute;display:flex;top:0;left:0;width:100%;height:100%;svg{position:absolute;width:100%;height:auto}.card__shine,.card__shine:after{--space: 5%;--angle: 133deg;--imgsize: 100% auto;background-image:var(--bg),repeating-linear-gradient(0deg,#ff7773 calc(var(--space) * 1),#ffed5f calc(var(--space) * 2),#a8ff5f calc(var(--space) * 3),#83fff7 calc(var(--space) * 4),#7894ff calc(var(--space) * 5),#d875ff calc(var(--space) * 6),#ff7773 calc(var(--space) * 7)),repeating-linear-gradient(var(--angle),#0e152e 0%,hsl(180,10%,60%) .8%,hsl(180,29%,66%) 8.5%,hsl(180,10%,60%) 32.2%,#0e152e 1%,#0e152e 12%),radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(0,0,0,.1) 12%,rgba(0,0,0,.15) 20%,rgba(0,0,0,.25) 90%);background-repeat:no-repeat;background-blend-mode:overlay,hue,hard-light;background-size:var(--imgsize),200% 700%,300% 100%,200% 100%;background-position:center center,0% var(--posy),var(--posx) var(--posy),var(--posx) var(--posy);filter:brightness(calc((var(--hyp) * .3) + .5)) contrast(2) saturate(1.5);clip-path:url(#card-shiny-mask);animation:2.5s move-shine;animation-delay:2.3s;animation-timing-function:linear}.card__shine{position:absolute;top:0;left:0;width:100%;height:100%;image-rendering:optimizeQuality;transform-style:preserve-3d;transform:translateZ(1px);mix-blend-mode:color-dodge;opacity:var(--o);background-color:#000;mask-image:var(--qr);mask-repeat:no-repeat;mask-size:contain;mask-position:center;&:after{width:100%;height:100%;border-radius:var(--radius);content:"";background-size:var(--imgsize),200% 400%,195% 100%,200% 100%;background-position:center center,0% var(--posy),calc((var(--posx) * -1) - -100%) calc(var(--posy) * -1),var(--posx) var(--posy);filter:brightness(calc((var(--hyp) * .5) + .8)) contrast(1.6) saturate(1.4);mix-blend-mode:exclusion;grid-area:1/1;transform:translateZ(1.2px)}}}}.testsvg{width:300px;height:auto;--space: 5%;--angle: 133deg;--imgsize: 100% auto;background-image:var(--bg),repeating-linear-gradient(0deg,#ff7773 calc(var(--space) * 1),#ffed5f calc(var(--space) * 2),#a8ff5f calc(var(--space) * 3),#83fff7 calc(var(--space) * 4),#7894ff calc(var(--space) * 5),#d875ff calc(var(--space) * 6),#ff7773 calc(var(--space) * 7)),repeating-linear-gradient(var(--angle),#0e152e 0%,hsl(180,10%,60%) 3.8%,hsl(180,29%,66%) 4.5%,hsl(180,10%,60%) 5.2%,#0e152e 10%,#0e152e 12%),radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(0,0,0,.1) 12%,rgba(0,0,0,.15) 20%,rgba(0,0,0,.25) 120%);background-repeat:no-repeat;background-blend-mode:overlay,hue,hard-light;background-size:var(--imgsize),200% 700%,300% 100%,200% 100%;mask-image:var(--qr);mask-repeat:no-repeat;mask-size:contain;mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center}