.fx-shine {
  --fx-shine-dur: 2100ms;
  --fx-shine-ease: cubic-bezier(.2,.8,.2,1);
}

/* le reflet */
.fx-shine::after {
  content: '';
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  transform: translateX(-60%) rotate(12deg);
  opacity: 0;
  pointer-events: none;
}

/* Hover / focus */
.fx-shine:hover::after,
.fx-shine:focus-visible::after,
.fx-shine.fx-visible::after {
  opacity: 1;
  animation: fxShineSweep var(--fx-shine-dur) var(--fx-shine-ease) forwards;
}

@keyframes fxShineSweep {
  to { transform: translateX(60%) rotate(12deg); }
}