/* fx.css · pointer/tilt, cards tilt toward the pointer with a glare · owner: Lizzy East · all rights reserved */

/* Only on a fine pointer, only with motion allowed. Focus gets the glare, still. */
[data-fx~="pointer/tilt"] {
  position: relative;
  overflow: clip;
  transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg));
}
[data-fx~="pointer/tilt"] [data-fx-glare] {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--fx-gx, 30%) var(--fx-gy, 20%), rgb(255 255 255 / 0.4), rgb(255 255 255 / 0) 60%);
  mix-blend-mode: soft-light;
  opacity: 0;
}
[data-fx~="pointer/tilt"]:hover [data-fx-glare],
[data-fx~="pointer/tilt"]:focus-visible [data-fx-glare] { opacity: 1; }
html.fx-armed [data-fx~="pointer/tilt"] { transition: transform var(--fx-tilt-dur, 300ms) var(--fx-ease); }
html.fx-armed [data-fx~="pointer/tilt"] [data-fx-glare] { transition: opacity 300ms var(--fx-ease); }