:root{--mx:.5;--my:.5;--s:1;--o:.9;--tx:0;--ty:0;--rx:0deg;--ry:0deg;--pos:center center;--posx:50%;--posy:50%;--bw:0rem}.card-container{perspective:2000px}.card{transform-style:preserve-3d;transform:scale(var(--s)) translateX(var(--tx)) translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry));background-color:#040404;border-radius:4.7%;transition:transform .1s ease-out;position:relative;overflow:hidden;box-shadow:0 30px 60px -15px #0000008c,0 0 20px 5px #ffffff0d}.card:before{content:"";background:linear-gradient(115deg,#0000 0%,#ffffff4d 30%,#fff9 48%,#ffffff4d 52%,#0000 100%) 0 0/200% 200%;background-position:calc(100% - var(--posx)) calc(100% - var(--posy));mix-blend-mode:overlay;opacity:.85;pointer-events:none;z-index:4;background-repeat:no-repeat;position:absolute;inset:0}.card>.shine{background:linear-gradient(115deg, transparent 0%, #ff008040 25%, #00ffff40 45%, #ffff0040 50%, #00ff0040 55%, #0000ff40 75%, transparent 100%), radial-gradient(circle farthest-corner at var(--posx) var(--posy), #ffffffbf 0%, #ffffff1a 50%, transparent 100%);background-size:150% 150%;background-position:var(--posx) var(--posy);mix-blend-mode:color-dodge;opacity:.8;pointer-events:none;z-index:3;border-radius:inherit;background-repeat:no-repeat;position:absolute;inset:0}.card:after{content:"";opacity:.65;mix-blend-mode:color-dodge;pointer-events:none;z-index:2;background-image:repeating-linear-gradient(135deg,#ffffff14 0 3px,#0000 3px 6px),repeating-linear-gradient(45deg,#ffffff0a 0 2px,#0000 2px 4px);position:absolute;inset:0}.card[data-rarity=common]:before{opacity:.55}.card[data-rarity=common]>.shine{opacity:.65;background:linear-gradient(115deg, transparent 0%, #ff008059 25%, #00ffff59 45%, #ffff0059 50%, #00ff0059 55%, #0000ff59 75%, transparent 100%), radial-gradient(circle farthest-corner at var(--posx) var(--posy), #fffc 0%, #ffffff1a 45%, transparent 90%)}.card[data-rarity=common]:after{opacity:.25;background-image:repeating-linear-gradient(135deg,#ffffff0d 0 4px,#0000 4px 8px)}.card[data-rarity=holo]:before{opacity:.7}.card[data-rarity=holo]>.shine{opacity:.75;background:linear-gradient(115deg, #ff008066 0%, #0ff6 25%, #ff06 50%, #0f06 75%, #00f6 100%), radial-gradient(circle farthest-corner at var(--posx) var(--posy), #ffffffe6 0%, #0ff3 30%, transparent 80%)}.card[data-rarity=holo]:after{opacity:.55;background-image:radial-gradient(circle,#fff6 1px,#0000 1px),radial-gradient(circle at 0 0,#ffffff4d 2px,#0000 2px),radial-gradient(circle at 100% 100%,#ffffff4d 2px,#0000 2px),repeating-linear-gradient(45deg,#ffffff0d 0 2px,#0000 2px 6px);background-size:40px 40px,60px 60px,50px 50px,100%}.card[data-rarity=ultra]:before{opacity:.8}.card[data-rarity=ultra]>.shine{opacity:.85;background:linear-gradient(115deg, #ff00808c 0%, #00ffff8c 30%, #ffff008c 50%, #00ffff8c 70%, #ff00808c 100%), radial-gradient(circle farthest-corner at var(--posx) var(--posy), #fffffff2 0%, #ff00804d 25%, transparent 80%)}.card[data-rarity=ultra]:after{opacity:.65;background-image:repeating-linear-gradient(135deg,#ffffff14 0 3px,#0000 3px 6px),repeating-linear-gradient(45deg,#ffffff14 0 3px,#0000 3px 6px)}.card[data-rarity=secret]:before{opacity:.9}.card[data-rarity=secret]>.shine{opacity:.92;background:linear-gradient(115deg, #ffdf0066 0%, #ff008073 20%, #00ffff73 40%, #ffff0073 50%, #00ff0073 60%, #0000ff73 80%, #ffdf0066 100%), radial-gradient(circle farthest-corner at var(--posx) var(--posy), #fff 0%, #ffdf0080 30%, #fff3 60%, transparent 100%)}.card[data-rarity=secret]:after{opacity:.85;background-image:radial-gradient(circle at 30% 20%,#ffdf0099 2px,#0000 2px),radial-gradient(circle at 80% 70%,#ffdf0080 3px,#0000 3px),radial-gradient(circle at 10% 80%,#fff6 1px,#0000 1px),repeating-linear-gradient(135deg,#ffdf001f 0 3px,#0000 3px 6px),repeating-linear-gradient(45deg,#ffffff14 0 2px,#0000 2px 4px);background-size:50px 50px,70px 70px,40px 40px,100%,100%}.card .card-image{object-fit:fill;z-index:1;border-radius:inherit;width:100%;height:100%;position:absolute;inset:0}.list-card-holo{border-radius:.375rem;position:relative;overflow:hidden}.list-card-holo:before{content:"";mix-blend-mode:overlay;opacity:0;pointer-events:none;z-index:4;background:linear-gradient(115deg,#0000 0%,#fff3 30%,#fff6 48%,#fff3 52%,#0000 100%) -200% -200%/200% 200%;transition:opacity .3s;position:absolute;inset:0}.list-card-holo:after{content:"";mix-blend-mode:color-dodge;opacity:0;pointer-events:none;z-index:3;background:linear-gradient(115deg,#0000 0%,#ff008026 25%,#00ffff26 45%,#ffff0026 50%,#00ff0026 55%,#0000ff26 75%,#0000 100%) -200% -200%/200% 200%;transition:opacity .3s;position:absolute;inset:0}.list-card-holo:hover:before,.list-card-holo:hover:after{opacity:1;animation:2s linear infinite holoShimmer}@keyframes holoShimmer{0%{background-position:200% 200%}to{background-position:-200% -200%}}@keyframes slideOutLeft{0%{opacity:1;transform:translate(0)scale(1)}to{opacity:0;transform:translate(-65px)scale(.93)}}@keyframes slideInRight{0%{opacity:0;transform:translate(65px)scale(.93)}to{opacity:1;transform:translate(0)scale(1)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)scale(1)}to{opacity:0;transform:translate(65px)scale(.93)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-65px)scale(.93)}to{opacity:1;transform:translate(0)scale(1)}}.animate-slide-out-left{animation:.15s cubic-bezier(.4,0,.2,1) forwards slideOutLeft}.animate-slide-in-right{animation:.28s cubic-bezier(.34,1.56,.64,1) forwards slideInRight}.animate-slide-out-right{animation:.15s cubic-bezier(.4,0,.2,1) forwards slideOutRight}.animate-slide-in-left{animation:.28s cubic-bezier(.34,1.56,.64,1) forwards slideInLeft}