/* The wrapper keeps the existing .brand-logo sizing at every breakpoint. */
.brand-gold {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.brand-gold > img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

/* Luminance clips the light to the actual gold artwork, not the black PNG. */
@supports (mask-mode: luminance) {
  @media (prefers-reduced-motion: no-preference) {
    .brand-gold::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(110deg, transparent 44%, #fff5cf 50%, transparent 56%);
      background-size: 300% 100%;
      background-repeat: no-repeat;
      mask-image: url("/assets/millers-restaurant-logo.png");
      mask-mode: luminance;
      mask-size: contain;
      mask-position: center;
      mask-repeat: no-repeat;
      opacity: 0;
      animation: millers-gold-light 1.6s ease-in-out .4s 1 both;
    }
  }
}

@keyframes millers-gold-light {
  0% { background-position: 100% 0; opacity: 0; }
  20% { opacity: .65; }
  75% { opacity: .65; }
  100% { background-position: 0% 0; opacity: 0; }
}