.holo-card{--mx:50%;--my:50%;--rx:0deg;--ry:0deg;--pos:50% 50%;perspective:900px;aspect-ratio:5/7;width:100%}.holo-card .hc-rot{height:100%;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .42s var(--ease-out), box-shadow .42s var(--ease-out);background:#1b2442;border-radius:4.6%/3.3%;position:relative;overflow:hidden;box-shadow:0 18px 40px -16px #0000008c,0 2px 6px #00000040}.holo-card.is-hover .hc-rot{transition:transform 80ms linear,box-shadow .2s;box-shadow:0 30px 60px -18px #0009,0 0 0 1px #ffffff40,0 0 44px -6px #78c8ff99}.holo-card .hc-img{object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;position:absolute;inset:0}.holo-card .hc-empty{background:radial-gradient(circle,#fff 0 9%,#1b2442 9% 13%,#0000 13%),linear-gradient(#ee1c25 0 47%,#1b2442 47% 53%,#f4f7fb 53%)}.holo-card .hc-foil,.holo-card .hc-sparkle,.holo-card .hc-glare{pointer-events:none;border-radius:inherit;position:absolute;inset:0}.holo-card .hc-foil{background:repeating-linear-gradient(110deg,#ff7a75 0%,#ffed61 7%,#a8ff61 14%,#85fff7 21%,#7a95ff 28%,#d875ff 35%,#ff7a75 42%) 0 0/400% 400%;background-position:var(--pos);mix-blend-mode:color-dodge;filter:brightness(.6)contrast(1.4)saturate(1.1);opacity:0;transition:opacity .3s}.holo-card .hc-sparkle{background-image:radial-gradient(circle at 20% 30%,#fff 0 1px,#0000 1.6px),radial-gradient(circle at 70% 60%,#fff 0 1px,#0000 1.6px),radial-gradient(circle at 40% 80%,#fff 0 1px,#0000 1.5px),radial-gradient(circle at 85% 15%,#fff 0 1px,#0000 1.6px);background-size:37px 41px,53px 47px,29px 31px,61px 59px;background-position:var(--pos);mix-blend-mode:overlay;opacity:0;transition:opacity .3s}.holo-card .hc-glare{background:radial-gradient(farthest-corner circle at var(--mx) var(--my), #fffc 0%, #fff3 28%, #00000059 90%);mix-blend-mode:overlay;opacity:0;transition:opacity .3s}.holo-card.is-hover .hc-foil{opacity:.75}.holo-card.is-hover .hc-sparkle,.holo-card.is-hover .hc-glare{opacity:.9}@keyframes hc-sway{0%,to{transform:rotateX(4deg)rotateY(-10deg)}50%{transform:rotateX(-3deg)rotateY(10deg)}}@keyframes hc-drift{0%,to{background-position:18% 22%}50%{background-position:82% 78%}}.holo-card.is-live .hc-rot{animation:6s ease-in-out infinite hc-sway}.holo-card.is-live .hc-foil{opacity:.5;animation:6s ease-in-out infinite hc-drift}.holo-card.is-live .hc-sparkle{opacity:.6;animation:6s ease-in-out infinite reverse hc-drift}.holo-card.is-live .hc-glare{opacity:.45}
