/* Pulse Pill v3. Routed Gothic is © Darren Embry, SIL Open Font License 1.1. */
@font-face {
  font-family: "Routed Gothic";
  src: url("./fonts/routed-gothic-v1.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.pulse-pill {
  position: fixed;
  left: 16px;
  bottom: 14px;
  z-index: 1000;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.45em;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 0.6em 0.85em 0.55em;
  overflow: hidden;
  color: #fff;
  font-family: "Routed Gothic", ui-monospace, monospace;
  font-size: 14.4px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(54, 0, 255, 0.55);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
}

.pulse-demo .pulse-pill {
  position: relative;
  left: auto;
  bottom: auto;
}

.pulse-pill .pulse-heart {
  display: block;
  flex: none;
  width: 0.8em;
  height: 0.8em;
  fill: currentColor;
  opacity: 0.35;
}

.pulse-pill .pulse-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pulse-pill.is-live .pulse-heart {
  will-change: opacity;
  animation: pulse-pill-fade var(--beat, 1s) ease-out infinite;
}

@keyframes pulse-pill-fade {
  0%, 8% { opacity: 1; }
  65%, 100% { opacity: 0.08; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-pill.is-live .pulse-heart {
    animation: none;
    opacity: 1;
  }
}