body{overflow:hidden;background:#fff3e0}svg#puzzle,svg#puzzle-clip{width:0;height:0;display:block}svg{width:auto;height:auto}.grid{width:90vmin;margin:10vmin auto;display:flex;flex-wrap:wrap;box-shadow:0 0 9vmin 4.5vmin rgba(0,0,0,.1),inset 0 0 9vmin 4.5vmin rgba(0,0,0,.1);perspective:2000}.grid,.item-box{transform-style:preserve-3d}.item-box{position:relative;width:30vmin;height:30vmin;cursor:pointer;transition:all .225s cubic-bezier(.65,.05,.36,1) .225s}.item-box:hover{transform:scale(1.25);box-shadow:0 0 16px 8px rgba(0,0,0,.2)}.item-box:hover .puzzle{transform:translateX(0) translateY(0) translateZ(1px) rotateX(0) rotateY(0);opacity:1}.item-box .item-container{top:50%;left:50%}.item-box .item-container,.piece{position:absolute;transform-style:preserve-3d}.piece{width:15vmin;height:15vmin}.piece:first-child{transform:translateX(-100%) translateY(-100%) rotate(0deg)}.piece:first-child .puzzle:before{background-position:0 0;transform:rotate(0deg)}.piece:nth-child(2){transform:translateX(0) translateY(-100%) rotate(90deg)}.piece:nth-child(2) .puzzle:before{background-position:100% 0;transform:rotate(-90deg)}.piece:nth-child(3){transform:translateX(0) translateY(0) rotate(180deg)}.piece:nth-child(3) .puzzle:before{background-position:100% 100%;transform:rotate(-180deg)}.piece:nth-child(4){transform:translateX(-100%) translateY(0) rotate(270deg)}.piece:nth-child(4) .puzzle:before{background-position:0 100%;transform:rotate(-270deg)}.puzzle{background-color:#fff;clip-path:url(#puzzle);opacity:.8;transform:translateX(-22.368%) translateY(-22.368%) translateZ(0) rotateX(.5turn) rotateY(.5turn);transition:all .45s cubic-bezier(.65,.05,.36,1)}.puzzle,.puzzle:before{position:absolute;width:19.3219291014vmin;height:19.3219291014vmin}.puzzle:before{content:"";background-size:155.264%;background-image:var(--img-url)}.caption{position:absolute;bottom:50%;left:50%;transform:translate(-50%,50%);z-index:20;background:hsla(0,0%,100%,.85);padding:6px 14px;border-radius:8px;font-size:14px;font-weight:600;color:#000;pointer-events:none}@keyframes init{0%{transform:translateX(0) translateY(0) translateZ(1px) rotateX(0) rotateY(0)}}.color-3d-text{font-family:Impact,Arial Black,sans-serif;font-size:clamp(2rem,6vw,5rem);text-transform:uppercase;letter-spacing:1px;display:flex;flex-wrap:wrap;gap:.1em;color:transparent;justify-content:center;text-align:center}.color-3d-text span{display:inline-block;position:relative;background:linear-gradient(135deg,#00f0ff,#7a3da0);-webkit-background-clip:text;background-clip:text;text-shadow:1px 1px 0 #0078ff,2px 2px 0 #135bc7c1,3px 3px 0 #b018a8,4px 4px 0 #5c118a;animation:tiltDepth 1.5s ease-in-out infinite alternate}@keyframes tiltDepth{0%{transform:rotateX(10deg) rotateY(10deg)}to{transform:rotateX(10deg) rotateY(10deg) translate(.08em,.06em)}}.color-3d-text span:first-child{animation-delay:0s}.color-3d-text span:nth-child(2){animation-delay:.1s}.color-3d-text span:nth-child(3){animation-delay:.2s}.color-3d-text span:nth-child(4){animation-delay:.3s}.color-3d-text span:nth-child(5){animation-delay:.4s}.color-3d-text span:nth-child(6){animation-delay:.5s}.color-3d-text span:nth-child(7){animation-delay:.6s}.color-3d-text span:nth-child(8){animation-delay:.7s}.color-3d-text span:nth-child(9){animation-delay:.8s}.color-3d-text span:nth-child(10){animation-delay:.9s}.color-3d-text span:nth-child(11){animation-delay:1s}