/* ArneIron footer badge
   The wordmark is a GLYPH (image), the label beside it is plain localisable text.
   Drop this in, then use the markup from arneiron-badge.html. */

.arneiron-badge {
  --ab-h: 34px;                     /* glyph height — the one knob you usually touch */
  --ab-plate: #0b0304;
  --ab-edge: rgba(255, 64, 48, 0.22);
  --ab-label: #9b7a76;
  --ab-glow: 255, 78, 58;

  display: inline-flex;
  align-items: center;
  gap: calc(var(--ab-h) * 0.42);
  padding: calc(var(--ab-h) * 0.36) calc(var(--ab-h) * 0.52);
  background: var(--ab-plate);
  border: 1px solid var(--ab-edge);
  border-radius: calc(var(--ab-h) * 0.30);
  text-decoration: none;
  line-height: 1;
  transition: border-color 220ms ease, transform 220ms ease;
}

.arneiron-badge:hover,
.arneiron-badge:focus-visible {
  border-color: rgba(255, 64, 48, 0.55);
  transform: translateY(-1px);
}

.arneiron-badge:focus-visible {
  outline: 2px solid rgba(255, 96, 72, 0.9);
  outline-offset: 3px;
}

.arneiron-badge__label {
  font: 600 calc(var(--ab-h) * 0.33) / 1 ui-monospace, "SFMono-Regular", "Share Tech Mono", monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ab-label);
  white-space: nowrap;
  transition: color 220ms ease;
}

.arneiron-badge:hover .arneiron-badge__label { color: #d8b3ad; }

/* glyph + its live glow share one positioning context */
.arneiron-badge__mark {
  position: relative;
  display: block;
  height: var(--ab-h);
  aspect-ratio: 720 / 304;          /* the crop's true ratio */
  flex: none;
}

.arneiron-badge__mark img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--ab-h) * 0.10);
}

/* the dot over the i — position measured from the artwork, do not nudge blindly */
.arneiron-badge__glow {
  position: absolute;
  left: 71.11%;
  top: 35.20%;
  width: calc(var(--ab-h) * 0.62);
  height: calc(var(--ab-h) * 0.62);
  margin: calc(var(--ab-h) * -0.31) 0 0 calc(var(--ab-h) * -0.31);
  pointer-events: none;
  border-radius: 50%;
  opacity: var(--ab-i, 0.55);
  background:
    radial-gradient(circle,
      rgba(255, 245, 238, 0.95) 0%,
      rgba(var(--ab-glow), 0.85) 22%,
      rgba(var(--ab-glow), 0.34) 46%,
      rgba(var(--ab-glow), 0) 72%);
}

/* CSS-only fallback: if the script never runs, the dot still breathes */
@media (prefers-reduced-motion: no-preference) {
  .arneiron-badge:not([data-ab-live]) .arneiron-badge__glow {
    animation: arneiron-breathe 4.2s ease-in-out infinite;
  }
}

@keyframes arneiron-breathe {
  0%, 100% { opacity: 0.42; }
  50%      { opacity: 0.92; }
}

/* Motion-sensitive users get a steady dot, never a pulse. */
@media (prefers-reduced-motion: reduce) {
  .arneiron-badge__glow { animation: none !important; opacity: 0.7 !important; }
  .arneiron-badge:hover { transform: none; }
}

/* light-background hosts */
.arneiron-badge--light {
  --ab-plate: #14090a;
  --ab-edge: rgba(140, 16, 20, 0.35);
}