:root{--holo-sunpillar-1:hsl(2,100%,73%);--holo-sunpillar-2:hsl(53,100%,69%);--holo-sunpillar-3:hsl(93,100%,69%);--holo-sunpillar-4:hsl(176,100%,76%);--holo-sunpillar-5:hsl(228,100%,74%);--holo-sunpillar-6:hsl(283,100%,73%);--holo-red:#fe4365;--holo-yellow:#fcf876;--holo-green:#65ffa7;--holo-cyan:#76fcf8;--holo-blue:#656eff;--holo-violet:#ff65ef;--holo-violet:hsl(283,100%,73%);--holo-blue:hsl(228,100%,74%);--holo-green:hsl(93,100%,69%);--holo-yellow:hsl(53,100%,69%);--holo-red:hsl(2,100%,73%);--scanlines-space:1px;--scanlines-light:#666;--scanlines-dark:black;--bars:3%;--bar-color:hsla(0,0%,70%,1);--bar-bg:hsla(0,0%,0%,1)}.holographic-card{--pointer-x:50;--pointer-y:50;--effect-intensity:0.5;--mask-image:none;position:relative;perspective:800px;transform-style:preserve-3d;will-change:transform}.holographic-card--expanded{z-index:50}.holographic-card__inner{will-change:transform}.holographic-card__content,.holographic-card__inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;border-radius:inherit}.holographic-card__shine{z-index:50;background:radial-gradient(farthest-corner circle at calc(var(--pointer-x) * 1%) calc(var(--pointer-y) * 1%),rgba(255,255,255,.8) 0,rgba(255,255,255,.4) 20%,transparent 50%);opacity:.7}.holographic-card__glare,.holographic-card__shine{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;border-radius:1rem;overflow:hidden;transition:opacity .3s ease;-webkit-mask-image:var(--mask-image);mask-image:var(--mask-image);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.holographic-card__glare{z-index:51;background:linear-gradient(calc((var(--pointer-x) - 50) * 3deg + 120deg),transparent 0,rgba(255,255,255,.1) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.1) 60%,transparent 100%);opacity:.6}.holographic-card__sparkle{--space:5%;--angle:133deg;--foil:none;position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;border-radius:1rem;overflow:hidden;z-index:52;display:grid;background-image:linear-gradient(135deg,var(--holo-red) 0,var(--holo-yellow) 16%,var(--holo-green) 33%,var(--holo-cyan) 50%,var(--holo-blue) 66%,var(--holo-violet) 83%,var(--holo-red) 100%),repeating-linear-gradient(var(--angle),black 0,black 8%,white 10.5%,black 13%,black 15%);background-position:var(--background-x) var(--background-y),calc(50% + (var(--background-x) - 50%) * .3) 0;background-size:400% 400%,300% 100%;background-blend-mode:multiply;will-change:background-position;filter:brightness(calc((var(--pointer-from-center) * .15) + .5)) contrast(1) saturate(.9);mix-blend-mode:screen;opacity:0;transition:opacity .3s ease;-webkit-mask-image:var(--mask-image);mask-image:var(--mask-image);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}@keyframes holographic-shift{0%{background-position:50%,0 0}50%{background-position:50%,100% 100%}to{background-position:50%,0 0}}.holographic-card--holo .holographic-card__shine{background:linear-gradient(calc(110deg + (var(--pointer-x) - 50) * .5deg),transparent 0,rgba(255,255,255,.1) 20%,rgba(255,255,255,.4) 35%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.4) 65%,rgba(255,255,255,.1) 80%,transparent 100%),linear-gradient(calc(130deg + (var(--pointer-x) - 50) * .3deg),hsla(280,50%,80%,.15) 0,hsla(200,50%,85%,.15) 25%,hsla(160,50%,85%,.15) 50%,hsla(50,50%,85%,.15) 75%,hsla(320,50%,80%,.15) 100%);background-size:200% 100%,100% 100%;background-position:calc(var(--pointer-x) * 1%) 0,0 0;filter:brightness(1.1) contrast(1.2);mix-blend-mode:overlay;opacity:0;transition:opacity .3s ease,background-position .1s ease}@media (hover:hover){.holographic-card.holographic-card--holo:hover .holographic-card__shine{opacity:.65}}.holographic-card.holographic-card--holo.holographic-card--active .holographic-card__shine{opacity:.65}.holographic-card--holo .holographic-card__shine:before{content:"";position:absolute;inset:0;background:linear-gradient(calc(115deg + (var(--pointer-x) - 50) * .8deg),transparent 0,transparent 40%,rgba(255,255,255,.3) 45%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.3) 55%,transparent 60%,transparent 100%);background-size:250% 100%;background-position:calc(var(--pointer-x) * 1%) 0;mix-blend-mode:overlay;opacity:.5}.holographic-card--holo .holographic-card__shine:after{content:"";position:absolute;inset:0;background:radial-gradient(farthest-corner ellipse at calc(var(--pointer-x) * 1%) calc(var(--pointer-y) * 1%),rgba(255,255,255,.7) 0,rgba(255,255,255,.3) 20%,transparent 60%);mix-blend-mode:soft-light;opacity:.6}.holographic-card--holo .holographic-card__glare{background-image:radial-gradient(farthest-corner circle at var(--background-x) var(--background-y),hsl(0,0%,75%) 5%,hsl(200,5%,35%) 60%,hsl(320,40%,10%) 150%);background-size:120% 150%;background-position:50%;mix-blend-mode:hard-light;filter:brightness(1) contrast(1.2) saturate(1);opacity:0;transition:opacity .3s ease}.holographic-card--holo .holographic-card__glare:after{content:none}@media (hover:hover){.holographic-card.holographic-card--holo:hover .holographic-card__glare{opacity:.8}}.holographic-card.holographic-card--holo.holographic-card--active .holographic-card__glare{opacity:.8}.holographic-card--holo .holographic-card__sparkle:before{content:"";grid-area:1/1;border-radius:inherit;z-index:1;background-image:radial-gradient(farthest-corner circle at var(--background-x) var(--background-y),hsla(0,0%,100%,.4) 0,hsla(0,0%,0%,0) 35%);background-position:50%;background-size:cover;mix-blend-mode:overlay;opacity:.4}.holographic-card--holo .holographic-card__sparkle:after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;background-image:linear-gradient(135deg,var(--holo-violet) 0,var(--holo-blue) 16%,var(--holo-cyan) 33%,var(--holo-green) 50%,var(--holo-yellow) 66%,var(--holo-red) 83%,var(--holo-violet) 100%),repeating-linear-gradient(var(--angle),black 0,black 8%,white 10.5%,black 13%,black 15%);background-position:calc(100% - var(--background-x)) calc(100% - var(--background-y)),calc(50% - (var(--background-x) - 50%) * .3) 0;background-size:400% 400%,300% 100%;background-blend-mode:multiply;will-change:background-position;filter:brightness(calc((var(--pointer-from-center) * .15) + .5)) contrast(1) saturate(.9);mix-blend-mode:screen}@media (hover:hover){.holographic-card.holographic-card--holo:hover .holographic-card__sparkle{opacity:.45}}.holographic-card.holographic-card--holo.holographic-card--active .holographic-card__sparkle{opacity:.45}.holographic-card--rainbow .holographic-card__shine{background-image:radial-gradient(farthest-corner ellipse at calc(var(--pointer-x) * 1%) calc(var(--pointer-y) * 1%),hsla(0,0%,100%,.95) 0,transparent 45%),conic-gradient(from calc((var(--pointer-x) - 50) * 3.6deg),var(--holo-sunpillar-1),var(--holo-sunpillar-2),var(--holo-sunpillar-3),var(--holo-sunpillar-4),var(--holo-sunpillar-5),var(--holo-sunpillar-6),var(--holo-sunpillar-1));filter:brightness(1.2) contrast(1.3) saturate(1.5);mix-blend-mode:color-dodge;opacity:calc(var(--effect-intensity) * .5)}.holographic-card--rainbow .holographic-card__glare{background-image:radial-gradient(farthest-corner circle at calc(var(--pointer-x) * 1%) calc(var(--pointer-y) * 1%),hsla(0,0%,100%,.8) 0,hsla(0,0%,100%,.4) 20%,hsla(0,0%,50%,.1) 60%,transparent 90%);mix-blend-mode:hard-light;filter:brightness(1.1)}.holographic-card--none .holographic-card__glare,.holographic-card--none .holographic-card__shine{display:none}.holographic-card--suppressed .holographic-card__glare,.holographic-card--suppressed .holographic-card__shine,.holographic-card--suppressed .holographic-card__sparkle{opacity:0!important;pointer-events:none}.holographic-card--rainbow:hover .holographic-card__glare,.holographic-card--rainbow:hover .holographic-card__shine{opacity:calc(var(--effect-intensity) * 1.2)}.holographic-card:focus-within{outline:2px solid hsl(var(--ring));outline-offset:2px}@media (prefers-reduced-motion:reduce){.holographic-card__inner{transform:none!important;transition:none!important}.holographic-card__glare,.holographic-card__shine{display:none!important}}@media (hover:hover){.dark .holographic-card.holographic-card--holo:hover .holographic-card__shine{opacity:.5;filter:brightness(.85) contrast(2) saturate(.6)}.dark .holographic-card.holographic-card--holo:hover .holographic-card__glare{opacity:.6}}.dark .holographic-card.holographic-card--holo.holographic-card--active .holographic-card__shine{opacity:.5;filter:brightness(.85) contrast(2) saturate(.6)}.dark .holographic-card.holographic-card--holo.holographic-card--active .holographic-card__glare{opacity:.6}@media (hover:hover){.dark .holographic-card.holographic-card--holo:hover .holographic-card__sparkle{opacity:.45;filter:brightness(.85) contrast(1.2) saturate(.8)}}.dark .holographic-card.holographic-card--holo.holographic-card--active .holographic-card__sparkle{opacity:.45;filter:brightness(.85) contrast(1.2) saturate(.8)}.dark .holographic-card--rainbow .holographic-card__shine{opacity:calc(var(--effect-intensity) * .7)}