@property --x {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

@property --y {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

@layer reset {
  * { margin: 0; }
  svg, img { display: block; }
}

.visually-hidden {
  position: fixed;
  top: -999vh;
  left: -999vw;
  pointer-events: none;
}

main {
  display: grid;
  grid: auto-flow / repeat(auto-fit, 300px);
  gap: 30px;
  place-items: center;
  place-content: center;
  height: 100vh;
  background: 
    radial-gradient(#424242 0 1px, #0000 1px 10px) 0 / 1em 1em,
    linear-gradient(#EDEEEE, #E0E0E0)
}

.card {
  width: 300px;
  aspect-ratio: 9/12;
  perspective: 1200px;
  transform-style: preserve-3d;
}

figure {
  --atan: calc(-1 * atan2(var(--x), var(--y)));
  
  position: relative;
  height: 100%;
  border-radius: 1em;
  transform: rotateX(calc(var(--x) * 1deg)) rotateY(calc(var(--y) * 1deg));
  overflow: hidden;
  will-change: transform;
  transition: 
    --x 400ms ease,
    --y 400ms ease;
  
  &:hover {
    transition-duration: 0s;
    
    &::after {
      opacity: 1;
    }
  }
  
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://images.unsplash.com/photo-1615715874901-ad6a07ec5c88?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NTQ0MjE2ODd8&ixlib=rb-4.1.0&q=85') center / cover;
    mask-image: conic-gradient(from var(--atan), #0000, #fffa, #0000, #fffa, #0000);
    backdrop-filter: url(#filterEdges);
    opacity: 0;
    mix-blend-mode: plus-lighter;
    transition: opacity 200ms;
  }
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}