.holo-wrap{--pointer-x:50%;--pointer-y:50%;--pointer-from-center:0;--pointer-from-top:0.5;--pointer-from-left:0.5;--card-opacity:0;--rotate-x:0deg;--rotate-y:0deg;--background-x:50%;--background-y:50%;--holo-accent:#00FFA3;--holo-behind-color:rgba(0,255,163,0.40);--holo-behind-size:50%;--holo-radius:14px;--sunpillar-1:hsl(2,100%,73%);--sunpillar-2:hsl(53,100%,69%);--sunpillar-3:hsl(93,100%,69%);--sunpillar-4:hsl(176,100%,76%);--sunpillar-5:hsl(228,100%,74%);--sunpillar-6:hsl(283,100%,73%);perspective:800px;position:relative;transform:translateZ(.1px);touch-action:none;isolation:isolate}.holo-behind{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),var(--holo-behind-color) 0,transparent var(--holo-behind-size));filter:blur(40px) saturate(1.2);opacity:calc(.85 * var(--card-opacity));transition:opacity .2s ease}.holo-wrap.active,.holo-wrap:hover{--card-opacity:1}.holo-shell{position:relative;z-index:1;display:block}.holo-card{position:relative;border-radius:var(--holo-radius);background:rgba(0,0,0,.92);overflow:hidden;transform:translateZ(0) rotateX(0deg) rotateY(0deg);transition:transform 1.1s cubic-bezier(.22,1,.36,1);backface-visibility:hidden;box-shadow:0 calc((var(--pointer-from-top) * 18px) - 6px) calc((var(--pointer-from-left) * 18px) + 8px) -6px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06),0 0 24px color-mix(in oklab,var(--holo-accent) 24%,transparent),0 18px 40px rgba(0,0,0,.65)}.holo-card.tiltable.active,.holo-card.tiltable:hover{transition:none;transform:translateZ(0) rotateX(var(--rotate-y)) rotateY(var(--rotate-x))}.holo-shell.entering .holo-card{transition:transform .18s ease-out}.holo-card>*{display:grid;grid-area:1/-1;border-radius:var(--holo-radius);pointer-events:none}.holo-inside{inset:0;position:absolute;background:radial-gradient(120% 70% at 50% -10%,color-mix(in oklab,var(--holo-accent) 18%,transparent) 0,transparent 60%),linear-gradient(165deg,#050811 0,#07060f 55%,#04060a 100%)}.holo-hairline{position:absolute;top:0;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent 0,color-mix(in oklab,var(--holo-accent) 80%,transparent) 50%,transparent 100%);z-index:5;pointer-events:none}.holo-shine{mask-mode:luminance;-webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-size:150%;mask-size:150%;-webkit-mask-position:top calc(200% - (var(--background-y) * 5)) left calc(100% - var(--background-x));mask-position:top calc(200% - (var(--background-y) * 5)) left calc(100% - var(--background-x));transition:filter .8s ease,opacity .6s ease;filter:brightness(.5) contrast(1.1) saturate(.32);opacity:.16;animation:holoBg 40s linear infinite;animation-play-state:paused;mix-blend-mode:color-dodge}.holo-shine,.holo-shine:after{--space:5%;--angle:-45deg;transform:translateZ(1px);overflow:hidden;z-index:3;background-image:repeating-linear-gradient(0deg,var(--sunpillar-1) calc(var(--space) * 1),var(--sunpillar-2) calc(var(--space) * 2),var(--sunpillar-3) calc(var(--space) * 3),var(--sunpillar-4) calc(var(--space) * 4),var(--sunpillar-5) calc(var(--space) * 5),var(--sunpillar-6) calc(var(--space) * 6),var(--sunpillar-1) calc(var(--space) * 7)),repeating-linear-gradient(var(--angle),#0e152e 0,hsl(180,10%,60%) 3.8%,hsl(180,29%,66%) 4.5%,hsl(180,10%,60%) 5.2%,#0e152e 10%,#0e152e 12%),radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,0%,.1) 12%,hsla(0,0%,0%,.18) 20%,hsla(0,0%,0%,.3) 120%);background-position:0 var(--background-y),var(--background-x) var(--background-y),50%;background-blend-mode:color,hard-light;background-size:500% 500%,300% 300%,200% 200%;background-repeat:repeat}.holo-shine:after,.holo-shine:before{content:"";background-position:50%;background-size:cover;grid-area:1/1;opacity:0;transition:opacity .7s ease}.holo-card.tiltable.active .holo-shine,.holo-card.tiltable:hover .holo-shine{filter:brightness(.92) contrast(1.5) saturate(.7);opacity:.42;animation-play-state:running}.holo-card.tiltable.active .holo-shine:after,.holo-card.tiltable.active .holo-shine:before,.holo-card.tiltable:hover .holo-shine:after,.holo-card.tiltable:hover .holo-shine:before{opacity:1}.holo-shine:before{background-image:linear-gradient(45deg,var(--sunpillar-4),var(--sunpillar-5),var(--sunpillar-6),var(--sunpillar-1),var(--sunpillar-2),var(--sunpillar-3)),radial-gradient(circle at var(--pointer-x) var(--pointer-y),hsl(0,0%,70%) 0,hsla(0,0%,30%,.2) 90%);background-size:250% 250%,100% 100%;background-position:var(--pointer-x) var(--pointer-y),50%;background-blend-mode:color-dodge;filter:brightness(calc(2 - var(--pointer-from-center))) contrast(calc(var(--pointer-from-center) + 2)) saturate(calc(.5 + var(--pointer-from-center)));mix-blend-mode:luminosity}.holo-shine:after{background-position:0 var(--background-y),calc(var(--background-x) * .4) calc(var(--background-y) * .5),50%;background-size:200% 300%,700% 700%,100% 100%;mix-blend-mode:difference;filter:brightness(.8) contrast(1.5)}.holo-glare{transform:translateZ(1.1px);overflow:hidden;background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsl(248,25%,80%) 12%,hsla(207,40%,30%,.65) 90%);mix-blend-mode:overlay;filter:brightness(.8) contrast(1.15);opacity:.22;transition:opacity .5s ease,filter .5s ease;z-index:4}.holo-card.tiltable.active .holo-glare,.holo-card.tiltable:hover .holo-glare{opacity:.55;filter:brightness(.92) contrast(1.2)}.holo-content{position:relative;z-index:6;overflow:hidden;transform:translate3d(calc(var(--pointer-from-left) * -4px + 2px),calc(var(--pointer-from-top) * -4px + 2px),.1px);mix-blend-mode:normal;padding:0;pointer-events:auto}@keyframes holoBg{0%{background-position:0 var(--background-y),0 0,50%}to{background-position:0 var(--background-y),90% 90%,50%}}@media (prefers-reduced-motion:reduce){.holo-shine{animation:none!important}.holo-card.tiltable.active,.holo-card.tiltable:hover{transform:translateZ(0) rotateX(0deg) rotateY(0deg)!important;transition:none!important}.holo-behind{transition:none!important}}