.parallax-container{width:screen;height:500px;position:relative;overflow:hidden;transform-style:preserve-3d}.image-wrapper{position:relative;display:inline-block;width:80px;height:80px;transition:transform .3s ease,box-shadow .3s ease;will-change:transform,box-shadow;perspective:1000px;transform:translateZ(0);backface-visibility:hidden}.image-wrapper:hover{transform:scale(1.1);z-index:20}.parallax-active{box-shadow:0 15px 35px rgba(0,0,0,.3);transform:scale(1.15)}.grayscale-img{filter:grayscale(100%);z-index:1}.color-img,.grayscale-img{position:absolute;top:0;left:0;border-radius:8px}.color-img{filter:grayscale(0);z-index:2;clip-path:circle(0 at var(--x,50%) var(--y,50%));transition:clip-path .1s ease-out;will-change:clip-path}.parallax-layer{transition:transform .2s ease-out;will-change:transform;backface-visibility:hidden}.parallax-active .parallax-layer{transform:translateZ(calc(var(--depth) * 30px))}.parallax-shadow{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:8px;box-shadow:0 10px 20px rgba(0,0,0,.2);opacity:0;transition:opacity .3s ease;z-index:0;pointer-events:none}.parallax-active .parallax-shadow{opacity:1}.particles{top:0;left:0;width:100%;height:100%;z-index:3;opacity:0}.particle,.particles{position:absolute;pointer-events:none}.particle{background:radial-gradient(circle,rgba(255,255,255,.9) 0,rgba(255,255,255,0) 70%);border-radius:50%;mix-blend-mode:screen;transform-style:preserve-3d}.image-wrapper:after{content:"";position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.4) 0,rgba(255,255,255,0) 70%);z-index:0;opacity:0;transition:opacity .3s ease;border-radius:inherit;pointer-events:none;transform:translateZ(-5px)}.image-wrapper:hover:after{opacity:1}@keyframes ripple{0%{box-shadow:0 0 0 0 rgba(255,255,255,.3)}to{box-shadow:0 0 0 15px rgba(255,255,255,0)}}.parallax-active .color-img{animation:ripple 1.2s cubic-bezier(.25,.46,.45,.94) infinite}.image-wrapper{transform-style:preserve-3d;transition:transform .6s cubic-bezier(.23,1,.32,1)}.parallax-active{transition:transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s ease;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}