/* Bronze reflections appear only while a pointer is over a large heading. */
@media (hover: hover) and (pointer: fine) {
  h1:hover, h2:hover {
    color: transparent !important;
    background-image: linear-gradient(112deg, #76452e 0%, #ad7050 23%, #d8a17b 39%, #fff0d9 46%, #bf8460 51%, #815038 61%, #d2a17c 78%, #875035 100%);
    background-size: 230% 100%;
    background-position: 75% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none !important;
    filter: drop-shadow(0 1px 0 #80513922) drop-shadow(0 0 9px #c3936924);
    animation: bronze-reflection 2.8s ease-in-out infinite alternate;
  }
  h1:hover *, h2:hover * {
    color: inherit !important;
    -webkit-text-fill-color: inherit;
    text-shadow: none !important;
  }
}
@keyframes bronze-reflection {
  from { background-position: 100% 50%; }
  to { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  h1:hover, h2:hover { animation: none; background-position: 48% 50%; }
}