/* The original logo determines layout; this light is clipped to its alpha. */
.logo-sheen { position: relative; }
.logo-sheen > img { display: block; width: 100%; height: auto; }
.logo-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: linear-gradient(110deg, transparent 42%, #9cd8ff42 46%, #ffffff 50%, #9cd8ff42 54%, transparent 58%) 150% 0 / 200% 100% no-repeat;
  -webkit-mask: url('/assets/fss-chrome.png') center / 100% 100% no-repeat;
  mask: url('/assets/fss-chrome.png') center / 100% 100% no-repeat;
  mask-mode: alpha;
}
.logo-sheen.logo > img { height: 100%; object-fit: cover; object-position: center 53%; }
.logo-sheen.logo::after {
  -webkit-mask-image: url('/card/fss-logo.png');
  mask-image: url('/card/fss-logo.png');
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center 53%;
  mask-position: center 53%;
}
@media (prefers-reduced-motion: no-preference) {
  .logo-sheen.is-shining::after { animation: logo-sheen 6.4s ease-in-out both; }
  .logo-sheen.is-paused::after { animation-play-state: paused; }
}
@keyframes logo-sheen {
  0% { background-position: 150% 0; opacity: 0; }
  20%, 75% { opacity: .62; }
  100% { background-position: -50% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce), print {
  .logo-sheen::after { display: none; animation: none; }
}

.logo-sheen > img { -webkit-user-drag: none; -webkit-touch-callout: none; }