@media (hover: hover) and (pointer: fine) {
  #Logo {
    position: relative;
    overflow: hidden;
  }

  #Logo img {
    transition: filter .3s ease, transform .3s ease;
  }

  #Logo::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(110deg, transparent 0%, rgba(82,142,255,.25) 20%, rgba(190,226,255,1) 48%, rgba(82,142,255,.5) 78%, transparent 100%) no-repeat -58% 0 / 58% 100%;
    -webkit-mask: url("../img/logo.svg") center / contain no-repeat;
    mask: url("../img/logo.svg") center / contain no-repeat;
    filter: drop-shadow(0 0 6px rgba(110,176,255,.9));
    opacity: 0;
  }

  #Logo:hover img,
  #Logo:focus-visible img {
    filter: brightness(1.2);
    transform: translateY(-1px);
  }

  #Logo:hover::after,
  #Logo:focus-visible::after {
    animation: logo-light-sweep .55s ease-out;
  }

  @keyframes logo-light-sweep {
    0% { background-position: -58% 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { background-position: 158% 0; opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  #Logo img { transition: none; }
  #Logo::after { animation: none !important; }
}