/* Preserve the supplied logo artwork and illuminate only its silver 4. */
.brand-sparkle {
  display: inline-block;
  position: relative;
  flex: none;
  line-height: 0;
}

.brand-sparkle::before,
.brand-sparkle::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@supports (mask-mode: luminance) {
  .brand-sparkle::before {
    background-image:
      radial-gradient(circle, #fff 0 .65px, #fff9 .9px, transparent 1.7px),
      radial-gradient(circle, #f5f5f5 0 .8px, #fff6 1.1px, transparent 1.9px),
      radial-gradient(circle, #fff 0 .5px, transparent 1.3px),
      linear-gradient(110deg, #bcbcbc 0%, #f4f4f4 18%, #b2b2b2 32%, #fff 44%, #f7f7f7 49%, #a8a8a8 57%, #eeeeee 76%, #bcbcbc 100%);
    background-size: 23px 29px, 41px 37px, 59px 47px, 240% 100%;
    background-position: 0 0, 13px 19px, 31px 7px, 100% 50%;
    background-repeat: repeat, repeat, repeat, no-repeat;
    mask-image: url('/assets/4gloss-logo-new.png');
    mask-mode: luminance;
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    clip-path: inset(0 70% 0 0);
    opacity: .85;
  }
}

.brand-sparkle::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m10 1 1.4 7.6L19 10l-7.6 1.4L10 19l-1.4-7.6L1 10l7.6-1.4Z' fill='%23f7f7f7'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='white'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m10 1 1.4 7.6L19 10l-7.6 1.4L10 19l-1.4-7.6L1 10l7.6-1.4Z' fill='%23f7f7f7'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='white'/%3E%3C/svg%3E");
  background-size: 9px 9px, 7px 7px;
  background-position: 18% 20%, 22% 68%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 3px #e6e6e688);
  opacity: 0;
}

@keyframes brand-silver-shimmer {
  from { background-position: 0 0, 13px 19px, 31px 7px, 100% 50%; }
  to { background-position: 23px -29px, -28px 56px, 90px 54px, 0% 50%; }
}

@keyframes brand-silver-glint {
  0%, 14%, 52%, 100% { opacity: 0; }
  31% { opacity: .95; }
}

@media (prefers-reduced-motion: no-preference) {
  .brand-sparkle::before {
    animation: brand-silver-shimmer 8s ease-in-out infinite alternate;
  }
  .brand-sparkle::after {
    animation: brand-silver-glint 4.7s ease-in-out -1.1s infinite;
  }
  footer .brand-sparkle::after { animation-delay: -2.8s; }
}

@media (forced-colors: active) {
  .brand-sparkle::before,
  .brand-sparkle::after { display: none; }
}