.holo-card{--hc-w:320px;--hc-ratio:.716;--hc-radius:14px;width:var(--hc-w);max-width:100%;aspect-ratio:var(--hc-ratio);border-radius:var(--hc-radius);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:pan-y;outline:none;display:inline-block;position:relative}.holo-card[data-flippable]{cursor:pointer}.holo-card[data-flippable]:focus-visible{outline-offset:6px;outline:2px solid}.holo-card__shadow{border-radius:var(--hc-radius);filter:blur(26px);pointer-events:none;will-change:transform;background:#0000006b;position:absolute;inset:10% 7% -4%}.holo-card__rotor{transform-style:preserve-3d;will-change:transform;position:absolute;inset:0}.holo-card__face{isolation:isolate;border-radius:var(--hc-radius);backface-visibility:hidden;position:absolute;inset:0;overflow:hidden}.holo-card__face--back{transform:rotateY(180deg)}.holo-card__face img,.holo-card__face canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.holo-card__face img{object-fit:cover;pointer-events:none;-webkit-user-drag:none}.holo-card__face canvas{opacity:0;transition:opacity .3s}.holo-card__sheen{z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:.55;animation:holo-sheen 5.2s var(--ease-smooth,cubic-bezier(.4, 0, .2, 1)) infinite;will-change:transform;background:linear-gradient(115deg,#0000 42%,#ffffff0d 46%,#ffffff8c 50%,#bee6ff4d 53%,#0000 58%);transition:opacity .2s;position:absolute;inset:-35%;transform:translate(-75%)rotate(.01deg)}.holo-card:hover .holo-card__sheen{opacity:.85}@keyframes holo-sheen{0%{transform:translate(-75%)rotate(.01deg)}60%,to{transform:translate(75%)rotate(.01deg)}}@media (prefers-reduced-motion:reduce){.holo-card__sheen{opacity:0;animation:none}}.holo-card[data-ready] .holo-card__face canvas{opacity:1}
