@property --loop{syntax:"<number>";inherits:true;initial-value:0}@property --pi{syntax:"<number>";inherits:true;initial-value:0}:root{--loop:0;--pi:3.14159265358979;--card-deg-multiplier:10;--card-hologram-opacity-multiplier:0.2;--card-hologram-position:20px;--card-hologram-size:60px}.card{--resting-y:calc((var(--loop, 0) - (var(--pi) / 2)) * (var(--card-deg-multiplier, 1) * 0.25));--resting-x:calc((var(--loop, 0) - (var(--pi) / 2)) * (var(--card-deg-multiplier, 1) * 0.25));--card-y:calc(var(--mouse-x, 0) * var(--card-deg-multiplier, 1) + var(--resting-y, 0));--card-x:calc(var(--mouse-y, 0) * var(--card-deg-multiplier, 1) + var(--resting-x, 0));--card-y-perspective:calc(var(--card-y) * 1deg);--card-x-perspective:calc(var(--card-x) * -1deg);display:block;position:relative;border-radius:20px;overflow:hidden;transform:perspective(500px) rotateY(var(--card-y-perspective,0deg)) rotateX(var(--card-x-perspective,0deg)) translateY(calc(var(--card-x) * -.5px)) translateX(calc(var(--card-y) * -.5px));transform-style:preserve-3d;backdrop-visibility:hidden;box-shadow:calc(0px + (-1px * var(--card-x, 0))) calc(20px + (-1px * var(--card-y, 0))) calc(40px + (2px * var(--card-y, 0))) -20px #0003;filter:brightness(calc(1 + (var(--card-x, 0) * var(--card-x, 0) / var(--card-deg-multiplier) * .015))) contrast(calc(1 + (var(--card-x, 0) * var(--card-x, 0) / var(--card-deg-multiplier) * .015))) hue-rotate(calc(0deg + (var(--card-x, 0) * var(--card-x, 0) / var(--card-deg-multiplier) * .6deg)))}.card .shimmer{position:absolute;inset:0;filter:drop-shadow(2px 4px 6px black) brightness(.5);background:conic-gradient(at calc(-10% + (var(--card-y) * -.5%)) calc(40% + (var(--card-y) * 1%)),#da85ef 0,#fff calc(15% + (var(--card-x) * -.25%)),#fff5 35%,#b2cfe9 50%);mix-blend-mode:luminosity;-webkit-mask:radial-gradient(at calc(var(--card-x, 0) * 10%) 0,#000,transparent 150%);mask:radial-gradient(at calc(var(--card-x, 0) * 10%) 0,#000,transparent 150%);background:linear-gradient(calc(130deg + (var(--card-x) * -2deg) + (var(--card-y) * 2deg)),#fffa calc(0% + (var(--card-x) * 3%)),#fff3 calc(20% + (var(--card-x) * 3%)),#fff9,#fff0,#fff9,#fff0);-webkit-mask:linear-gradient(135deg,#000,transparent 150%);mask:linear-gradient(135deg,#000,transparent 150%);z-index:0;opacity:calc((var(--card-x) / var(--card-deg-multiplier) * -1) * (var(--card-y) / var(--card-deg-multiplier) * -1.5))}.card .shimmer-negative{position:absolute;inset:0;background:linear-gradient(-135deg,#000,#0000,#000,#0000);-webkit-mask:linear-gradient(-135deg,#000,transparent);mask:linear-gradient(-135deg,#000,transparent);mix-blend-mode:overlay;z-index:0;opacity:calc((var(--card-x) / var(--card-deg-multiplier) * 1) * (var(--card-y) / var(--card-deg-multiplier) * -1.5))}.card .hologram{position:absolute;inset:0;z-index:2;mix-blend-mode:color-dodge;opacity:calc((var(--card-x) / var(--card-deg-multiplier) * -1) * (var(--card-y) / var(--card-deg-multiplier) * -1.5) * var(--card-hologram-opacity-multiplier, .2))}.card .hologram .specular{position:absolute;background:linear-gradient(350deg,#000,#b6d0ff,#ff70f3,#feffb3,#000) repeat;z-index:3;inset:0;animation:infiniteHueRotate 10s linear infinite}.card .hologram .mask{position:absolute;inset:0;mix-blend-mode:multiply;background-size:cover;background-color:#000}.card .hologram.stamp .specular{position:absolute;top:var(--card-hologram-position,20px);left:var(--card-hologram-position,20px);right:auto;bottom:auto;width:var(--card-hologram-size,60px);height:var(--card-hologram-size,60px)}