@layer components {
  /* Zohar's banner: the shared placements and tones, with a soft diagonal sheen over the bars and
     a gentle pulse leading the message. */
  .promo-banner { letter-spacing: 0.01em; }

  .promo-banner:is(.promo-banner--top, .promo-banner--below-header, .promo-banner--bottom) {
    background:
      radial-gradient(140% 180% at 18% -60%, oklch(100% 0 0 / 0.14), transparent 55%),
      linear-gradient(100deg,
        color-mix(in oklab, var(--banner-bg) 86%, oklch(0% 0 0) 14%),
        var(--banner-bg) 48%,
        color-mix(in oklab, var(--banner-bg) 80%, oklch(100% 0 0) 20%));
  }
  .promo-banner:is(.promo-banner--top, .promo-banner--below-header) {
    box-shadow: inset 0 -1px 0 oklch(100% 0 0 / 0.10), 0 10px 30px -18px oklch(0% 0 0 / 0.7);
  }

  .promo-banner:not(.promo-banner--corner) .promo-banner__message::before {
    content: "";
    display: inline-block;
    inline-size: 0.5em;
    block-size: 0.5em;
    margin-inline-end: 0.6em;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 0.05em;
    box-shadow: 0 0 0 0.15em color-mix(in oklab, currentColor 18%, transparent);
  }
  @media (prefers-reduced-motion: no-preference) {
    .promo-banner:not(.promo-banner--corner) .promo-banner__message::before { animation: promo-pulse 2.6s ease-in-out infinite; }
    @keyframes promo-pulse {
      0%, 100% { opacity: 0.55; transform: scale(0.8); }
      50%      { opacity: 1; transform: scale(1); }
    }
  }
}