.squares-canvas{width:100%;height:100%;border:none;display:block;cursor:grab}.squares-canvas:active{cursor:grabbing}.canvas-container{width:100%;height:100%;transition:filter .5s ease}.canvas-container.blurred{filter:blur(4px)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.4);z-index:999;display:flex;align-items:center;justify-content:center;opacity:0;animation:fadeInModal .5s forwards}.modal-overlay.fade-out{animation:fadeOutModal .5s forwards}@keyframes fadeInModal{0%{opacity:0}to{opacity:1}}@keyframes fadeOutModal{0%{opacity:1}to{opacity:0}}.modal-content{position:relative;display:flex;background:none;color:#fff;max-width:800px;width:90%;margin:1rem;align-items:flex-start}.modal-close{position:absolute;top:.5rem;right:1rem;background:transparent;border:none;font-size:2rem;cursor:pointer;color:#fff}.modal-image-wrapper{flex:0 0 50%;display:flex;align-items:center;justify-content:center}.modal-image{width:100%;height:auto;object-fit:cover;border-radius:12px}.modal-info{flex:1;padding:0 1rem 1rem;height:50vh;overflow-y:scroll;-webkit-mask-image:linear-gradient(180deg,black 90%,transparent);mask-image:linear-gradient(180deg,black 90%,transparent);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.modal-info h2{margin-top:0;margin-bottom:1.5rem;font-size:2.5rem}.modal-info p{margin-bottom:2.2rem}