/* fx.css · hover/lift, rises slightly · owner: Lizzy East · all rights reserved */

/* The shadow is a layer that fades in, so box-shadow itself never animates. */
[data-fx~="hover/lift"] { position: relative; isolation: isolate; }
[data-fx~="hover/lift"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--fx-lift-shadow, 0 18px 36px -18px rgb(0 0 0 / 0.45));
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  [data-fx~="hover/lift"] { transition: translate var(--fx-hover-dur, 220ms) var(--fx-ease); }
  [data-fx~="hover/lift"]::after { transition: opacity var(--fx-hover-dur, 220ms) var(--fx-ease); }
}
@media (hover: hover) and (pointer: fine) {
  [data-fx~="hover/lift"]:hover { translate: 0 calc(var(--fx-lift, 4px) * -1); }
  [data-fx~="hover/lift"]:hover::after { opacity: 1; }
}
[data-fx~="hover/lift"]:focus-visible { translate: 0 calc(var(--fx-lift, 4px) * -1); }
[data-fx~="hover/lift"]:focus-visible::after { opacity: 1; }