<style>.hover-reveal{position:relative;width:100%;max-width:800px;aspect-ratio:4 / 5;overflow:hidden;cursor:none}.hover-reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.hover-reveal .img-hover{--x:50%;--y:50%;--size:180px;--blur:60px;mask-image:radial-gradient(ellipse var(--size) var(--size) at var(--x) var(--y),rgb(0 0 0) 0%,rgb(0 0 0) 35%,rgb(0 0 0 / .6) 55%,rgb(0 0 0 / .2) 70%,#fff0 100%);-webkit-mask-image:radial-gradient(ellipse var(--size) var(--size) at var(--x) var(--y),rgb(0 0 0) 0%,rgb(0 0 0) 35%,rgb(0 0 0 / .6) 55%,rgb(0 0 0 / .2) 70%,#fff0 100%);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;transition:mask-image 0.08s linear,-webkit-mask-image 0.08s linear}.hover-reveal:not(.active) .img-hover{opacity:0;transition:opacity 0.3s ease}.hover-reveal.active .img-hover{opacity:1}.hover-reveal::after{content:"";position:absolute;width:24px;height:24px;border:1px solid rgb(255 255 255 / .8);border-radius:50%;left:calc(var(--x, 50%) - 12px);top:calc(var(--y, 50%) - 12px);pointer-events:none;opacity:0;transition:opacity 0.2s ease}.hover-reveal.active::after{opacity:1}</style>