@keyframes holoSparkle{0%,to{opacity:.75;filter:brightness(1.2)contrast(1.25)}5%,8%{opacity:1;filter:brightness(.8)contrast(1.2)}13%,16%{opacity:.5;filter:brightness(1.2)contrast(.8)}35%,38%{opacity:1;filter:brightness()contrast()}55%{opacity:.33;filter:brightness(1.2)contrast(1.25)}}@keyframes holoGradient{0%,to{opacity:.5;filter:brightness(.5)contrast();background-position:50%}5%,9%{opacity:1;filter:brightness(.75)contrast(1.25);background-position:100% 100%}13%,17%{opacity:.88;background-position:0 0}35%,39%{opacity:1;filter:brightness(.5)contrast();background-position:100% 100%}55%{opacity:1;filter:brightness(.75)contrast(1.25);background-position:0 0}}.holo-card{--holo-width:320px;--holo-height:446px;width:var(--holo-width);height:var(--holo-height);vertical-align:middle;background-color:#1a1a2e;background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:5%/3.5%;transition:transform .3s;display:inline-block;position:relative;overflow:hidden;box-shadow:-3px -3px 3px #26e6f74d,3px 3px 3px #f759e44d,0 0 6px 2px #ffe7594d,0 35px 25px -15px #0000004d}.holo-card:before,.holo-card:after{content:"";mix-blend-mode:color-dodge;opacity:.2;z-index:1;background-image:linear-gradient(115deg,#0000 0%,#54a29e 25%,#0000 47% 53%,#a79d66 75%,#0000 100%);background-position:0 0;background-repeat:no-repeat;background-size:300% 300%;position:absolute;inset:0}.holo-card--sparkles:after{mix-blend-mode:color-dodge;opacity:1;z-index:1;background-image:url(https://assets.codepen.io/13471/sparkles.gif),linear-gradient(125deg,#ff00844f 15%,#fca40040 30%,#ffff0030 40%,#00ff8a21 60%,#00cfff40 70%,#cc4cfa4f 85%);background-position:50%;background-size:180%}.holo-card--active:before{opacity:1;background-image:linear-gradient(110deg,#0000 25%,#54a29e 48%,#a79d66 52%,#0000 75%);transition:none;animation:none}.holo-card--animated{transition:transform 1s}.holo-card--animated:before{transition:all 1s;animation:12s infinite holoGradient}.holo-card--animated:after{transition:all 1s;animation:12s infinite holoSparkle}.holo-card-container{perspective:1000px;cursor:pointer}.holo-card-container--static{perspective:none;cursor:default}.holo-card-inner{transform-style:preserve-3d;transition:transform .7s;position:relative}.holo-card-inner--flipped{transform:rotateY(180deg)}.holo-card-face{backface-visibility:hidden;position:absolute;inset:0}.holo-card-face--back{transform:rotateY(180deg)}:root[data-theme=light] .holo-card,.light .holo-card{box-shadow:-3px -3px 3px #26e6f733,3px 3px 3px #f759e433,0 0 6px 2px #ffe75933,0 35px 25px -15px #00000026}