@property --card-hx{syntax:"<percentage>";inherits:true;initial-value:50%}@property --card-hy{syntax:"<percentage>";inherits:true;initial-value:50%}@property --card-rx{syntax:"<angle>";inherits:true;initial-value:0deg}@property --card-ry{syntax:"<angle>";inherits:true;initial-value:0deg}@property --card-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.holo-card{isolation:isolate;background:linear-gradient(168deg,#ffffff0d 0%,#ffffff04 38%,#0000 70%),#040814;border:1px solid #ffffff14;border-radius:16px;position:relative;overflow:hidden;box-shadow:0 1px 2px #0009,0 8px 24px -12px #000000e6}@media (hover:hover) and (pointer:fine){.holo-card:hover{will-change:transform}}.holo-card:before{content:"";inset-inline:12%;opacity:.45;pointer-events:none;z-index:15;background:linear-gradient(90deg,#0000,#38bdf8e6,#0000);height:1px;transition:opacity .5s cubic-bezier(.16,1,.3,1);position:absolute;top:-1px}.holo-card:after{content:"";z-index:25;border-radius:inherit;pointer-events:none;opacity:0;background:conic-gradient(from var(--card-angle), transparent 0%, #38bdf88c 8%, #ffffffbf 13%, #0284c773 19%, transparent 32%, transparent 62%, #38bdf840 74%, transparent 86%);-webkit-mask-composite:xor;padding:1px;transition:opacity .32s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}@keyframes card-edge-turn{to{--card-angle:360deg}}.holo-card__foil{z-index:20;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .32s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0% 52%,#0000 70%);mask-image:linear-gradient(#000 0% 52%,#0000 70%)}.holo-card__foil:before{content:"";border-radius:inherit;background-image:repeating-linear-gradient(108deg,#0000 0%,#0284c714 5%,#38bdf829 9%,#0ea5e90f 13%,#0000 19%);background-size:220% 220%;background-position:var(--card-hx) var(--card-hy);mix-blend-mode:color-dodge;filter:brightness(.85)contrast(1.4);position:absolute;inset:0}@media (hover:hover) and (pointer:fine){.holo-card{transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1),--card-rx .55s cubic-bezier(.16,1,.3,1),--card-ry .55s cubic-bezier(.16,1,.3,1),--card-hx .55s cubic-bezier(.16,1,.3,1),--card-hy .55s cubic-bezier(.16,1,.3,1)}.holo-card:hover{transform:perspective(600px) translate3d(0, -6px, 0) rotateX(var(--card-rx)) rotateY(var(--card-ry));border-color:#38bdf866;transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1),--card-rx .12s linear,--card-ry .12s linear,--card-hx .12s linear,--card-hy .12s linear;box-shadow:0 16px 38px -12px #0284c759,0 0 24px #38bdf826}.holo-card:hover:before{opacity:1}.holo-card:hover:after{opacity:1;animation:4.5s linear infinite card-edge-turn}.holo-card:hover .holo-card__foil{opacity:.8}}@media (prefers-reduced-motion:reduce){.holo-card:hover{transform:none}.holo-card:after{animation:none}.holo-card__foil{display:none}}