/* ==========================================================================
   Sharer Attribution Band — Design System §5.7

   Horizontal strip identifying *who* shared content with the viewer.
   Pairs a Bebas-Neue avatar with a Sora line where the sharer's name is
   highlighted in Fraunces italic. A pulsing red dot signals "live / personal"
   context. Two variants:

     .sharer-band          — compact (top-of-page band, 28px avatar, single line)
     .sharer-band--rich    — rich    (centered hero context, 40px avatar,
                                       eyebrow stacked above line)

   Pulse animation honors the global prefers-reduced-motion rule from
   animation.css (collapses to ~0.01ms, dot still renders at full opacity).
   ========================================================================== */

.sharer-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 20px;
  background: var(--color-cream-card);
  border-bottom: 1px solid rgba(26, 13, 8, 0.08);
  text-align: center;
}

.sharer-band__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sharer-band__pulse {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
  animation: sharer-pulse 2s ease-in-out infinite;
}

@keyframes sharer-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.sharer-band__line {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--color-ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sharer-band__line strong {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 13px;
}

/* --- Rich variant — eyebrow stacked above line --- */
.sharer-band--rich .sharer-band__copy {
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.sharer-band--rich .sharer-band__eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-red);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sharer-band--rich .sharer-band__line {
  font-size: 13px;
}

.sharer-band--rich .sharer-band__line strong {
  font-size: 14px;
}

/* --- Inverse modifier — red bg, ivory copy.
       Use when the band sits below a hero/illustration and needs to read
       as a vivid attribution accent rather than a quiet top-of-page strip. --- */
.sharer-band--inverse {
  background: var(--color-red);
  border-bottom-color: rgba(0, 0, 0, 0.18);
}

.sharer-band--inverse .sharer-band__pulse {
  background: var(--color-ivory);
}

.sharer-band--inverse .sharer-band__line,
.sharer-band--inverse .sharer-band__line strong,
.sharer-band--inverse .sharer-band__eyebrow {
  color: var(--color-ivory);
}