@keyframes holographic-shine{0%{background-position:0 50%,50% 50%}50%{background-position:100% 50%,50% 50%}to{background-position:0 50%,50% 50%}}@keyframes sparkle-drift{0%,to{opacity:.15;transform:translateZ(8px) scale(1)}50%{opacity:.25;transform:translateZ(10px) scale(1.05)}}@keyframes rainbow-shift{0%{-webkit-filter:hue-rotate(0deg) brightness(1.1);filter:hue-rotate(0deg) brightness(1.1)}50%{-webkit-filter:hue-rotate(180deg) brightness(1.2);filter:hue-rotate(180deg) brightness(1.2)}to{-webkit-filter:hue-rotate(1turn) brightness(1.1);filter:hue-rotate(1turn) brightness(1.1)}}.holographic-card{position:relative;transform-style:preserve-3d;transition:transform .1s ease-out;will-change:transform}.holographic-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 50%,hsla(0,0%,100%,.1) 0,transparent 50%);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:1}.holographic-card:hover:before{opacity:1;animation:holographic-shine 3s ease-in-out infinite}.holographic-shine{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,100,200,.3),rgba(100,200,255,.3),rgba(255,255,100,.3),rgba(100,255,200,.3));background-size:300% 300%;mix-blend-mode:color-dodge;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:2}.holographic-card:hover .holographic-shine{opacity:.6;animation:rainbow-shift 4s ease-in-out infinite}.holographic-glare{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle 400px at var(--mouse-x,50%) var(--mouse-y,50%),hsla(0,0%,100%,.8) 0,hsla(0,0%,100%,.3) 20%,transparent 60%);mix-blend-mode:overlay;opacity:0;transition:opacity .2s ease;pointer-events:none;z-index:3}.holographic-card:hover .holographic-glare{opacity:1}.holographic-sparkle{position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(circle,hsla(0,0%,100%,.8) 1px,transparent 0),radial-gradient(circle,rgba(200,220,255,.6) 1px,transparent 0);background-size:40px 40px,60px 60px;background-position:0 0,50% 50%;mix-blend-mode:screen;opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:2}.holographic-card:hover .holographic-sparkle{opacity:.2;animation:sparkle-drift 6s ease-in-out infinite}.holographic-border{position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(var(--border-angle,135deg),hsla(0,0%,100%,.5),transparent 30%);-webkit-mask:linear-gradient(#fff,#fff) content-box,linear-gradient(#fff,#fff);mask:linear-gradient(#fff,#fff) content-box,linear-gradient(#fff,#fff);mask-composite:exclude;-webkit-mask-composite:destination-out;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:4}.holographic-card:hover .holographic-border{opacity:1}.holographic-wrapper{perspective:1000px;transform-style:preserve-3d}.holographic-content{position:relative;z-index:10;transform:translateZ(20px)}.holographic-card.holographic-subtle .holographic-shine{opacity:.3}.holographic-card.holographic-subtle:hover .holographic-glare{opacity:.5}.holographic-card.holographic-subtle:hover .holographic-sparkle{opacity:.1}.holographic-card.holographic-intense .holographic-shine{opacity:.8}.holographic-card.holographic-intense:hover .holographic-glare{opacity:1}.holographic-card.holographic-intense:hover .holographic-sparkle{opacity:.3}@media (prefers-reduced-motion:reduce){.holographic-border,.holographic-card,.holographic-card:before,.holographic-glare,.holographic-shine,.holographic-sparkle{animation:none!important;transition:none!important}}.holographic-border,.holographic-card,.holographic-card:before,.holographic-glare,.holographic-shine,.holographic-sparkle{will-change:transform,opacity}@media (prefers-color-scheme:dark){.holographic-glare{background:radial-gradient(circle 400px at var(--mouse-x,50%) var(--mouse-y,50%),hsla(0,0%,100%,.6) 0,hsla(0,0%,100%,.2) 20%,transparent 60%)}.holographic-sparkle{background-image:radial-gradient(circle,hsla(0,0%,100%,.6) 1px,transparent 0),radial-gradient(circle,rgba(200,220,255,.4) 1px,transparent 0)}}