.pj-card-wrapper{--pointer-x: 50%;--pointer-y: 50%;--pointer-from-center: 0;--pointer-from-top: .5;--pointer-from-left: .5;--card-opacity: 0;--rotate-x: 0deg;--rotate-y: 0deg;--background-x: 50%;--background-y: 50%;perspective:600px;transform:translateZ(.1px);position:relative;touch-action:pan-y pan-x;width:100%}.pj-behind{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),color-mix(in srgb,var(--color-primary) 50%,transparent) 0%,transparent 50%);filter:blur(50px) saturate(1.1);opacity:calc(.8 * var(--card-opacity));transition:opacity .2s ease}.pj-card-wrapper:hover,.pj-card-wrapper.active{--card-opacity: 1}.pj-card-shell{position:relative;z-index:1}.pj-card{width:100%;aspect-ratio:16 / 10;display:grid;position:relative;background:var(--color-bg);border-radius:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--color-text) 10%,transparent);box-shadow:#00000080 calc((var(--pointer-from-left) * 10px) - 3px) calc((var(--pointer-from-top) * 20px) - 6px) 30px -10px;transition:transform 1s ease;transform:translateZ(0) rotateX(0) rotateY(0);backface-visibility:hidden}@media(hover:hover){.pj-card:hover{transition:none;transform:translateZ(0) rotateX(var(--rotate-y)) rotateY(var(--rotate-x))}}.pj-card.active{transition:none;transform:translateZ(0) rotateX(var(--rotate-y)) rotateY(var(--rotate-x))}.pj-card-shell.entering .pj-card{transition:transform .18s ease-out}.pj-card *{display:grid;grid-area:1/-1;border-radius:0;pointer-events:none}.pj-text-overlay,.pj-text-overlay *{display:block;grid-area:auto;pointer-events:none}.pj-inside{inset:0;position:absolute;background-image:linear-gradient(145deg,#1a3a4a4c,#20bbff22);background-color:var(--color-bg);transform:none}.pj-glare{transform:translateZ(1.1px);overflow:hidden;background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),var(--color-primary) 20%,color-mix(in srgb,var(--color-bg) 50%,transparent) 70%);mix-blend-mode:overlay;filter:brightness(.9) contrast(1.1);z-index:4;opacity:.3;transition:opacity .3s ease,filter .3s ease}.pj-card:hover .pj-glare,.pj-card.active .pj-glare{opacity:.5;filter:brightness(1.05) contrast(1.15)}.pj-screenshot{width:100%;height:100%;object-fit:cover;object-position:center top;z-index:2;transition:filter .4s ease}@media(hover:hover){.pj-card:hover .pj-screenshot{filter:brightness(.7)}}.pj-card.active .pj-screenshot{filter:brightness(.7)}.pj-placeholder{width:100%;height:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 8%,var(--color-bg)),color-mix(in srgb,var(--color-secondary) 12%,var(--color-bg)),color-mix(in srgb,var(--color-primary) 8%,var(--color-bg)));z-index:1;position:relative;display:flex;align-items:center;justify-content:center}.pj-placeholder:before{content:"";position:absolute;inset:16px;border:2px dashed color-mix(in srgb,var(--color-text) 15%,transparent);border-radius:0}.pj-shine{--logo: none;mask-image:var(--logo);mask-mode:luminance;mask-repeat:no-repeat;mask-size:35% auto;mask-position:center;transition:filter .8s ease,opacity .5s ease;filter:brightness(.66) contrast(1.33) saturate(.33) opacity(.5);animation:pj-holo-bg 18s linear infinite;animation-play-state:running;mix-blend-mode:color-dodge;opacity:0;z-index:5}.pj-shine,.pj-shine:after{--space: 5%;--angle: -45deg;transform:translateZ(1px);transform-origin:center center;overflow:hidden;background:transparent;background-size:cover;background-position:center;background-image:repeating-linear-gradient(0deg,var(--color-primary) calc(var(--space) * 1),var(--color-secondary) calc(var(--space) * 2),color-mix(in srgb,var(--color-primary) 70%,var(--color-bg)) calc(var(--space) * 3),color-mix(in srgb,var(--color-primary) 80%,white) calc(var(--space) * 4),color-mix(in srgb,var(--color-secondary) 60%,var(--color-primary)) calc(var(--space) * 5),var(--color-secondary) calc(var(--space) * 6),var(--color-primary) calc(var(--space) * 7)),repeating-linear-gradient(var(--angle),var(--color-bg) 0%,color-mix(in srgb,var(--color-secondary) 40%,var(--color-text)) 3.8%,var(--color-secondary) 4.5%,color-mix(in srgb,var(--color-secondary) 40%,var(--color-text)) 5.2%,var(--color-bg) 10%,var(--color-bg) 12%),radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,0%,.1) 12%,hsla(0,0%,0%,.15) 20%,hsla(0,0%,0%,.25) 120%);background-position:0 var(--background-y),var(--background-x) var(--background-y),center;background-blend-mode:color,hard-light;background-size:500% 500%,300% 300%,200% 200%;background-repeat:repeat}.pj-shine:before,.pj-shine:after{content:"";background-position:center;background-size:cover;grid-area:1/1;opacity:0;transition:opacity .8s ease}@media(hover:hover){.pj-card:hover .pj-shine{opacity:1;filter:brightness(.85) contrast(1.5) saturate(.5);animation-play-state:paused}.pj-card:hover .pj-shine:before,.pj-card:hover .pj-shine:after{opacity:1}}.pj-card.active .pj-shine{opacity:1;filter:brightness(.85) contrast(1.5) saturate(.5);animation-play-state:paused}.pj-card.active .pj-shine:before,.pj-card.active .pj-shine:after{opacity:1}.pj-shine:before{background-image:linear-gradient(45deg,color-mix(in srgb,var(--color-primary) 80%,white),color-mix(in srgb,var(--color-secondary) 60%,var(--color-primary)),var(--color-secondary),var(--color-primary),var(--color-secondary),color-mix(in srgb,var(--color-primary) 70%,var(--color-bg))),radial-gradient(circle at var(--pointer-x) var(--pointer-y),var(--color-text) 0%,color-mix(in srgb,var(--color-text) 20%,transparent) 90%);background-size:250% 250%,100% 100%;background-position:var(--pointer-x) var(--pointer-y),center;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}.pj-shine:after{background-position:0 var(--background-y),calc(var(--background-x) * .4) calc(var(--background-y) * .5),center;background-size:200% 300%,700% 700%,100% 100%;mix-blend-mode:difference;filter:brightness(.8) contrast(1.5)}@keyframes pj-holo-bg{0%{background-position:0 var(--background-y),0 0,center}to{background-position:0 var(--background-y),90% 90%,center}}