.btn {
  position: relative;
}

.btn,
.fixed-btn {
  overflow: hidden;
}

.btn::after,
.fixed-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-100%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover::after,
  .btn:focus-visible::after,
  .btn:active::after,
  .fixed-btn:hover::after,
  .fixed-btn:active::after {
    animation: button-shine 0.65s ease-out;
  }

  @keyframes button-shine {
    to {
      transform: translateX(100%);
    }
  }
}

@media (max-width: 640px) {
  .floating-tools {
    flex-direction: column;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .btn::after,
  .fixed-btn::after,
  .btn:hover::after,
  .btn:focus-visible::after,
  .btn:active::after,
  .fixed-btn:hover::after,
  .fixed-btn:active::after {
    animation: button-shine-loop 4s ease-in-out infinite;
  }

  @keyframes button-shine-loop {
    0%, 70% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
}
