/* ============================================================================
   .qs-sparkled — a heading flanked by gradient rules that end in a sparkle.

   Add the class to any heading element:
       <h3 class="heading-h3 qs-sparkled">Who We <em>Serve</em></h3>

   The rules are ::before / ::after inline-blocks, so the heading keeps normal
   inline flow and inline children (<em>, <span>) are untouched. Tune per page
   with --qs-rule-w (rule length) and --qs-rule-gap (space to the text).

   Used by industries.html and about.html. Loaded per page, not globally.
   ============================================================================ */

.qs-sparkled {
  --qs-rule-w: clamp(44px, 10vw, 168px);
  --qs-rule-gap: clamp(12px, 1.5vw, 22px);
  /* 4-point sparkle capping each rule, inlined so it costs no request. */
  --qs-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 6.6 4.7 10.6 12 12-7.3 1.4-11.3 5.4-12 12-.7-6.6-4.7-10.6-12-12C7.3 10.6 11.3 6.6 12 0z' fill='%23b981ed'/%3E%3C/svg%3E");
  text-align: center;
}

.qs-sparkled::before,
.qs-sparkled::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: var(--qs-rule-w);
  height: 14px;
  background:
    var(--qs-sparkle) no-repeat right center / 12px 12px,
    linear-gradient(to right,
      rgba(73, 40, 253, 0) 0%,
      rgba(73, 40, 253, .6) 45%,
      rgba(185, 129, 237, 1) 100%) no-repeat left center / calc(100% - 19px) 1px;
  filter: drop-shadow(0 0 7px rgba(185, 129, 237, .38));
  animation: qs-twinkle 5s ease-in-out infinite;
}

.qs-sparkled::before { margin-right: var(--qs-rule-gap); }

/* Mirrored so its sparkle also sits on the inner edge, nearest the text. */
.qs-sparkled::after {
  margin-left: var(--qs-rule-gap);
  transform: scaleX(-1);
  animation-duration: 5.8s;
}

@keyframes qs-twinkle {
  0%, 100% { opacity: .6; }
  50%      { opacity: 1; }
}

@media screen and (max-width: 479px) {
  /* The rules eat the heading's line on phones; keep the sparkles, drop the rules. */
  .qs-sparkled::before,
  .qs-sparkled::after {
    width: 12px;
    background-size: 12px 12px, 0 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qs-sparkled::before,
  .qs-sparkled::after { animation: none; opacity: 1; }
}