:root{--card-width:260px;--rotate-x:35deg;--rotate-y:-30deg}*,:after,:before{box-sizing:border-box;transform-style:preserve-3d}.scene{inset:0;perspective:1000px;position:fixed;transform:translateZ(100vmin)}.sticker-card{--border:8cqi;aspect-ratio:3/4;background:transparent;container-type:inline-size;display:block;left:50%;perspective:1600px;position:fixed;top:50%;touch-action:none;transition:transform .2s;translate:-50% -50%;width:calc(var(--card-width)*.8)}.sticker-card:hover{animation:set .2s backwards;transform:rotateX(calc(var(--sticker-pointer-y)*var(--rotate-x))) rotateY(calc(var(--sticker-pointer-x)*var(--rotate-y)));transition:transform 0s}.sticker-card:hover .sticker-image{opacity:1!important}@keyframes set{0%{transform:rotateX(0deg) rotateY(0deg)}}.sticker-card:hover .refraction{opacity:1}.sticker-card:hover .sticker-pattern{opacity:1!important}.sticker-background,.sticker-content,.sticker-pattern{inset:0;position:absolute}.sticker-pattern{filter:saturate(.8) contrast(1) brightness(1);mask:var(--pattern-image-url,url(/light.png)) 50% 50% /contain no-repeat,var(--pattern-texture-url,url(https://assets.codepen.io/605876/figma-texture.png)) 50% 50% /6cqi 6cqi;mask-composite:intersect;mix-blend-mode:hard-light;opacity:.4}.sticker-overlay{inset:0;position:absolute;z-index:1}.sticker-image{filter:brightness(1) drop-shadow(0 0 15px rgba(255,255,255,.2));object-fit:contain!important}.sticker-overlay-image{filter:brightness(1.2) drop-shadow(0 0 10px rgba(255,255,255,.1));object-fit:contain!important;opacity:.2}.sticker-pattern:before{background:#ccc;content:"";inset:0;position:absolute}.sticker-pattern .refraction{aspect-ratio:1/1;background:radial-gradient(circle at 0 100%,transparent 10%,#ffa299,#3f9,#6e9cf7,transparent 60%);bottom:0;filter:saturate(2);left:0;opacity:0;position:absolute;scale:min(1,calc(.15 + var(--sticker-pointer-x)*.25));transform-origin:0 100%;transition:opacity .2s ease-out;translate:clamp(-10%,calc(-10% + var(--sticker-pointer-x)*10%),10%) calc(max(0%, var(--sticker-pointer-y) * -1 * 10%));width:500%;will-change:translate,scale,filter}.sticker-pattern .refraction:nth-of-type(2){background:radial-gradient(circle at 100% 0,transparent 10%,#ffa299,#3f9,#6e9cf7,transparent 60%);bottom:unset;left:unset;right:0;scale:min(1,calc(.15 + var(--sticker-pointer-x)*-.65));top:0;transform-origin:100% 0;translate:clamp(-10%,calc(10% - var(--sticker-pointer-x)*-10%),10%) calc(min(0%, var(--sticker-pointer-y) * -10%))}.sticker-card:hover .sticker-pattern .refraction{opacity:1}.sticker-image,.sticker-overlay,.sticker-pattern{opacity:0}.sticker-image{animation:fadeIn .5s 1.4s forwards}.sticker-pattern{animation:fadeIn .5s 1.6s forwards}.sticker-overlay{animation:fadeIn .5s 1.8s forwards}@keyframes fadeIn{to{opacity:1}}