.holo-card-wrapper{position:relative;width:100%;aspect-ratio:1.1;perspective:2000px;--card-opacity:0;--pointer-x:50%;--pointer-y:50%;--pointer-from-center:0;--pointer-from-top:0;--pointer-from-left:0;--rotate-x:0deg;--rotate-y:0deg;--background-x:50%;--background-y:50%;transition:--card-opacity .6s cubic-bezier(.23,1,.32,1)}.holo-card-wrapper.active,.holo-card-wrapper:hover{--card-opacity:1}.holo-card{position:relative;width:100%;height:100%;border-radius:1.5rem;transform-style:preserve-3d;will-change:transform;transition:transform .6s cubic-bezier(.23,1,.32,1),box-shadow .6s cubic-bezier(.23,1,.32,1);transform:rotateY(var(--rotate-x)) rotateX(var(--rotate-y)) translateZ(0);cursor:pointer}.holo-card.active{transform:rotateY(var(--rotate-x)) rotateX(var(--rotate-y)) translateZ(20px)}.holo-inside{position:relative;width:100%;height:100%;border-radius:1.5rem;overflow:hidden;background:hsla(0,0%,100%,.05);backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.2);box-shadow:0 0 0 1px hsla(0,0%,100%,.1),0 10px 30px -10px rgba(0,0,0,.5)}.holo-card.active .holo-inside{box-shadow:0 0 0 1px hsla(0,0%,100%,.2),0 20px 60px -10px rgba(0,0,0,.7)}.holo-inside:before{content:"";position:absolute;inset:-20px;background:var(--behind-gradient);filter:blur(30px);opacity:var(--card-opacity);z-index:-1;transition:opacity .6s cubic-bezier(.23,1,.32,1)}.holo-shine{z-index:1;opacity:calc(var(--card-opacity) * .5);background:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,100%,.8) 10%,hsla(0,0%,100%,.65) 20%,rgba(0,0,0,.5) 90%);mix-blend-mode:color-dodge}.holo-glare,.holo-shine{position:absolute;inset:0;transition:opacity .6s cubic-bezier(.23,1,.32,1);pointer-events:none}.holo-glare{z-index:2;opacity:calc(var(--card-opacity) * .8);background:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,100%,.8),transparent 50%);mix-blend-mode:overlay}.holo-inside:after{content:"";position:absolute;inset:0;background:var(--inner-gradient);opacity:calc(var(--card-opacity) * .3);transition:opacity .6s cubic-bezier(.23,1,.32,1);pointer-events:none}.holo-content{position:relative;z-index:3;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.25rem;pointer-events:none}.holo-details{text-align:center;transform:translateZ(40px);pointer-events:auto}.holo-icon{font-size:3rem;margin-bottom:.75rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.holo-details h3{font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:.5rem;text-shadow:0 2px 8px rgba(0,0,0,.5)}.holo-details p{font-size:.875rem;color:hsla(0,0%,100%,.85);line-height:1.4;text-shadow:0 2px 4px rgba(0,0,0,.5)}.holo-selected-badge{margin-top:.75rem;padding:.375rem .875rem;background:rgba(16,185,129,.2);border:2px solid rgba(16,185,129,.5);border-radius:9999px;color:#10b981;font-weight:700;font-size:.75rem;display:inline-block;box-shadow:0 0 20px rgba(16,185,129,.3);animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width:768px){.holo-card-wrapper{aspect-ratio:1.2}.holo-icon{font-size:2.5rem}.holo-details h3{font-size:1.25rem}.holo-details p{font-size:.8rem}.holo-content{padding:1rem}}.holo-card-wrapper:hover .holo-inside{background:hsla(0,0%,100%,.08);border-color:hsla(0,0%,100%,.3)}*{transition-property:--card-opacity,--pointer-x,--pointer-y;transition-duration:.6s;transition-timing-function:cubic-bezier(.23,1,.32,1)}