/* A stationary sword mask confines the moving reflection to the metal alone. */
.brand { position: relative; }
.sword-glint {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 3;
  aspect-ratio: 1;
  opacity: 0;
  background: linear-gradient(120deg, transparent 46%, rgba(223,231,239,.20) 48%, rgba(255,255,255,.85) 50%, rgba(232,237,244,.20) 52%, transparent 54%);
  background-size: 300% 300%;
  background-repeat: no-repeat;
  -webkit-mask: url('sword-glint-mask.svg') center / 100% 100% no-repeat;
  mask: url('sword-glint-mask.svg') center / 100% 100% no-repeat;
  animation: sword-metallic-glint 5s linear infinite;
}
.brand > .sword-glint { width: 48px; height: 48px; left: 0; top: 50%; transform: translateY(-50%); }
.hero-mark > .sword-glint { width: min(100%, 480px); left: 50%; top: 50%; transform: translate(-50%, -50%); }
@keyframes sword-metallic-glint {
  0%, 4% { opacity: 0; background-position: 100% 100%; }
  6% { opacity: .82; }
  16% { opacity: .82; }
  20%, 100% { opacity: 0; background-position: 0% 0%; }
}
@media (max-width: 980px) {
  .hero-mark > .sword-glint { width: min(78vw, 390px); }
}
@media (max-width: 680px) {
  .brand > .sword-glint { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .sword-glint { animation: none; opacity: 0; }
}