:root{--card-mx:50%;--card-my:50%;--card-s:1;--card-o:0;--card-rx:0deg;--card-ry:0deg;--card-pos:50% 50%;--card-posx:50%;--card-posy:50%;--card-hyp:0}.holo-card{--radius:4.55% / 3.5%;z-index:10;will-change:transform, visibility;transform-style:preserve-3d;transform:translateZ(.1px)}.holo-card.interacting{z-index:120}.holo-card__translater,.holo-card__rotator{perspective:600px;transform-origin:50%;will-change:transform;display:grid}.holo-card__translater{width:auto;transform:translate3d(0, 0, 0) scale(var(--card-s));position:relative}.holo-card__rotator{--glow:#c4a35a99;--card-flip:0deg;transform:rotateY(calc(var(--card-ry) + var(--card-flip))) rotateX(var(--card-rx));transform-style:preserve-3d;border-radius:var(--radius);cursor:pointer;outline:none;transition:box-shadow .4s,transform .6s;box-shadow:0 10px 20px -5px #000}.holo-card--flipped .holo-card__rotator{--card-flip:180deg}.holo-card.interacting .holo-card__rotator{box-shadow:0 0 10px 0px var(--glow), 0 0 10px 0px var(--glow), 0 0 30px 0px var(--glow)}.holo-card__rotator>*{border-radius:var(--radius);width:100%;image-rendering:optimizeQuality;transform-style:preserve-3d;grid-area:1/1;display:grid}.holo-card__back{backface-visibility:hidden;border-radius:var(--radius);background:#0a0a0a;overflow:hidden;transform:rotateY(180deg)}.holo-card__back img{object-fit:cover;border-radius:var(--radius);width:100%;height:100%}.holo-card__front,.holo-card__front *{backface-visibility:hidden}.holo-card__front{opacity:1;border-radius:var(--radius);background:#0a0a0a;transition:opacity .33s ease-out;overflow:hidden}.holo-card--flipped .holo-card__shine,.holo-card--flipped .holo-card__glare{opacity:0!important}.holo-card__front img{object-fit:cover;border-radius:var(--radius);width:100%;height:100%}.holo-card__shine{--grain:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxmaWx0ZXIgaWQ9Im4iPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjciIG51bU9jdGF2ZXM9IjEwIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIj48L2ZlVHVyYnVsZW5jZT4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMDAwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuMyI+PC9yZWN0Pgo8L3N2Zz4=);--space:5%;--angle:133deg;--imgsize:500px;--red:#f80e7b;--yel:#eedf10;--gre:#21e985;--blu:#0dbde9;--vio:#c929f1;opacity:var(--card-o);mix-blend-mode:color-dodge;border-radius:var(--radius);transition:opacity .25s}.holo-card[data-rarity=rare] .holo-card__shine,.holo-card[data-rarity=rare] .holo-card__shine:after{--space:5%;--angle:133deg;--imgsize:500px;background-image:var(--grain), 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%, #8fa3a3 3.8%, #8fc1c1 4.5%, #8fa3a3 5.2%, #0e152e 10%, #0e152e 12%), radial-gradient(farthest-corner circle at var(--card-mx) var(--card-my), #0000001a 12%, #00000026 20%, #00000040 120%);background-blend-mode:screen, hue, hard-light;background-size:var(--imgsize), 200% 700%, 300%, 200%;background-position:center, 0% var(--card-posy), var(--card-posx) var(--card-posy), var(--card-posx) var(--card-posy);filter:brightness(.8)contrast(2.95)saturate(.5)}.holo-card[data-rarity=rare] .holo-card__shine:after{content:"";border-radius:var(--radius);background-image:var(--grain), 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%, #8fa3a3 3.8%, #8fc1c1 4.5%, #8fa3a3 5.2%, #0e152e 10%, #0e152e 12%), radial-gradient(farthest-corner circle at var(--card-mx) var(--card-my), #0000001a 12%, #00000026 20%, #00000040 120%);background-position:center, 0% var(--card-posy), calc(var(--card-posx) * -1) calc(var(--card-posy) * -1), var(--card-posx) var(--card-posy);background-size:var(--imgsize), 200% 400%, 195%, 200%;filter:brightness()contrast(2.5)saturate(1.75);mix-blend-mode:soft-light;position:absolute;inset:0}.holo-card[data-rarity=secret] .holo-card__shine,.holo-card[data-rarity=mythos] .holo-card__shine{--angle:110deg;background-image:repeating-linear-gradient(var(--angle), #592e5080 0%, #bfa473 2.5%, #d8b75c 5%, #bfa473 7.5%, #0e152e80 10%, #0e152e80 15%), var(--grain);background-size:600% 600%,500px;background-position:var(--card-posx) var(--card-posy), center;background-blend-mode:darken;filter:brightness(calc((var(--card-hyp) * .4) + .7)) contrast(3) saturate(.66)}.holo-card[data-rarity=secret] .holo-card__shine:after,.holo-card[data-rarity=mythos] .holo-card__shine:after{content:"";border-radius:var(--radius);background-image:repeating-linear-gradient(var(--angle), #592e5080 0%, #bfa473 2.5%, #d8b75c 5%, #bfa473 7.5%, #0e152e80 10%, #0e152e80 15%);background-position:calc(var(--card-posx) * -1) calc(var(--card-posy) * -1);filter:brightness(calc((var(--card-hyp) * .3) + .7)) contrast(2.5) saturate(.66);mix-blend-mode:exclusion;background-size:600% 600%;position:absolute;inset:0}.holo-card[data-rarity=legendary] .holo-card__shine,.holo-card[data-rarity=legendary] .holo-card__shine:after{--angle:110deg}.holo-card[data-rarity=legendary] .holo-card__shine{background-image:repeating-linear-gradient(var(--angle), #b4501499 0%, #e8ba30 2%, #ffd73c 4%, #e8ba30 6%, #b4501499 8%, #0a0a1e80 12%), var(--grain);background-size:600% 600%,500px;background-position:var(--card-posx) var(--card-posy), center;background-blend-mode:darken;filter:brightness(calc((var(--card-hyp) * .5) + .8)) contrast(3.5) saturate(.8)}.holo-card[data-rarity=legendary] .holo-card__shine:after{content:"";border-radius:var(--radius);background-image:repeating-linear-gradient(var(--angle), #b4501499 0%, #e8ba30 2%, #ffd73c 4%, #e8ba30 6%, #b4501499 8%, #0a0a1e80 12%);background-position:calc(var(--card-posx) * -1) calc(var(--card-posy) * -1);filter:brightness(calc((var(--card-hyp) * .4) + .8)) contrast(3) saturate(.8);mix-blend-mode:exclusion;background-size:600% 600%;position:absolute;inset:0}.holo-card[data-rarity=special] .holo-card__shine,.holo-card[data-rarity=special] .holo-card__shine:after{--angle:125deg}.holo-card[data-rarity=special] .holo-card__shine{background-image:repeating-linear-gradient(var(--angle), #0818288c 0%, #25d1f4 2%, #78ebff 4%, #fad338 6%, #25d1f4 8%, #0818288c 12%), var(--grain);background-size:700% 700%,500px;background-position:var(--card-posx) var(--card-posy), center;background-blend-mode:color-dodge;filter:brightness(calc((var(--card-hyp) * .55) + .85)) contrast(3) saturate(1.3)}.holo-card[data-rarity=special] .holo-card__shine:after{content:"";border-radius:var(--radius);background-image:repeating-linear-gradient(var(--angle), #0818288c 0%, #25d1f4 2%, #78ebff 4%, #fad338 6%, #25d1f4 8%, #0818288c 12%);background-position:calc(var(--card-posx) * -1) calc(var(--card-posy) * -1);filter:brightness(calc((var(--card-hyp) * .45) + .85)) contrast(2.6) saturate(1.2);mix-blend-mode:exclusion;background-size:700% 700%;position:absolute;inset:0}.holo-card__glare{opacity:var(--card-o);border-radius:var(--radius);background-image:radial-gradient(farthest-corner circle at var(--card-mx) var(--card-my), #fff6 10%, #ffffff26 20%, #00000080 90%);mix-blend-mode:overlay;transition:opacity .25s}