:root{--color1: rgb(0, 231, 255);--color2: rgb(255, 0, 231)}main{display:flex;align-items:center;justify-content:center;min-height:90vh}.card{width:71.5vw;height:100vw;position:relative;margin:20px;overflow:hidden;z-index:10;touch-action:none;border-radius:5%/3.5%;box-shadow:-5px -5px 5px -5px var(--color1),5px 5px 5px -5px var(--color2),-7px -7px 10px -5px transparent,7px 7px 10px -5px transparent,0 0 5px #fff0,0 55px 35px -20px #00000080;transition:transform .5s ease,box-shadow .2s ease;will-change:transform,filter;background-color:#040712;transform-origin:center}@media screen and (min-width: 600px){.card{width:clamp(12.9vw,61vh,18vw);height:clamp(18vw,85vh,25.2vw)}}.card:hover{box-shadow:-20px -20px 30px -25px var(--color1),20px 20px 30px -25px var(--color2),-7px -7px 10px -5px var(--color1),7px 7px 10px -5px var(--color2),0 0 13px 4px #ffffff4d,0 55px 35px -20px #00000080}.card:before,.card:after{pointer-events:none;content:"";position:absolute;left:0;right:0;bottom:0;top:0;background-repeat:no-repeat;opacity:.5;mix-blend-mode:color-dodge;transition:all .33s ease}.card:before{background-position:50% 50%;background-size:300% 300%;background-image:linear-gradient(115deg,transparent 0%,var(--color1) 25%,transparent 47%,transparent 53%,var(--color2) 75%,transparent 100%);opacity:.5;filter:brightness(.5) contrast(1);z-index:1}.card:after{opacity:1;background-image:url(https://assets.codepen.io/13471/sparkles.gif),url(https://assets.codepen.io/13471/holo.png),linear-gradient(125deg,rgba(255,0,132,.3137254902) 15%,rgba(252,164,0,.2509803922) 30%,rgba(255,255,0,.1882352941) 40%,rgba(0,255,138,.1254901961) 60%,rgba(0,207,255,.2509803922) 70%,rgba(204,76,250,.3137254902) 85%);background-position:50% 50%;background-size:160%;background-blend-mode:overlay;z-index:2;filter:brightness(1) contrast(1);transition:all .33s ease;mix-blend-mode:color-dodge;opacity:.75}.card.active:after,.card:hover:after{filter:brightness(1) contrast(1);opacity:1}.card.active,.card:hover{animation:none;transition:box-shadow .1s ease-out}.card.active:before,.card:hover:before{animation:none;background-image:linear-gradient(110deg,transparent 25%,var(--color1) 48%,var(--color2) 52%,transparent 75%);background-position:50% 50%;background-size:250% 250%;opacity:.88;filter:brightness(.66) contrast(1.33);transition:none}.card.active:before,.card:hover:before,.card.active:after,.card:hover:after{animation:none;transition:none}.card.animated{transition:none;animation:holoCard 12s ease 0s 1}.card.animated:before{transition:none;animation:holoGradient 12s ease 0s 1}.card.animated:after{transition:none;animation:holoSparkle 12s ease 0s 1}@keyframes holoSparkle{0%,to{opacity:.75;background-position:50% 50%;filter:brightness(1.2) contrast(1.25)}5%,8%{opacity:1;background-position:40% 40%;filter:brightness(.8) contrast(1.2)}13%,16%{opacity:.5;background-position:50% 50%;filter:brightness(1.2) contrast(.8)}35%,38%{opacity:1;background-position:60% 60%;filter:brightness(1) contrast(1)}55%{opacity:.33;background-position:45% 45%;filter:brightness(1.2) contrast(1.25)}}@keyframes holoGradient{0%,to{opacity:.5;background-position:50% 50%;filter:brightness(.5) contrast(1)}5%,9%{background-position:100% 100%;opacity:1;filter:brightness(.75) contrast(1.25)}13%,17%{background-position:0% 0%;opacity:.88}35%,39%{background-position:100% 100%;opacity:1;filter:brightness(.5) contrast(1)}55%{background-position:0% 0%;opacity:1;filter:brightness(.75) contrast(1.25)}}@keyframes holoCard{0%,to{transform:rotate(0) rotateX(0) rotateY(0)}5%,8%{transform:rotate(0) rotateX(6deg) rotateY(-20deg)}13%,16%{transform:rotate(0) rotateX(-9deg) rotateY(32deg)}35%,38%{transform:rotate(3deg) rotateX(12deg) rotateY(20deg)}55%{transform:rotate(-3deg) rotateX(-12deg) rotateY(-27deg)}}.card>img{position:relative;top:0;left:0;width:100%;height:auto}.card canvas{position:absolute;top:0;left:0;width:100%;height:auto}