/* Status light – breathing glow (IN PROGRESS)
   Pure CSS. Animate opacity + transform on a ::after halo (not box-shadow).
   Color: set --status-color, or inherit via currentColor.
   Usage: <span class="status-light status-light--live" style="--status-color:#e2203d"></span>
          or add .status-light--live to an existing .dot
*/

.status-light,
.status-light--live {
  --status-color: currentColor;
  --status-size: 12px;
  --status-glow-max: 0.55;
  --status-pulse: 2.6s;

  position: relative;
  display: inline-block;
  width: var(--status-size);
  height: var(--status-size);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--status-color);
  color: var(--status-color);
  vertical-align: middle;
  box-shadow: 0 0 0 0 transparent; /* reserved; glow lives on ::after */
}

/* Soft core ring so the light reads on dark surfaces even at rest */
.status-light--live {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-color) 35%, transparent);
}

/* Halo: scale + opacity only (compositor-friendly) */
.status-light--live::after {
  content: "";
  position: absolute;
  inset: -150%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--status-color) 70%, transparent) 0%,
    color-mix(in srgb, var(--status-color) 28%, transparent) 42%,
    transparent 70%
  );
  opacity: 0.28;
  transform: scale(0.72);
  pointer-events: none;
  will-change: transform, opacity;
  animation: status-light-breathe var(--status-pulse) ease-in-out infinite;
}

/* Tiny brightness pulse on the core (opacity only) */
.status-light--live {
  animation: status-light-core var(--status-pulse) ease-in-out infinite;
}

@keyframes status-light-breathe {
  0%,
  100% {
    opacity: 0.22;
    transform: scale(0.7);
  }
  50% {
    opacity: var(--status-glow-max);
    transform: scale(1.15);
  }
}

@keyframes status-light-core {
  0%,
  100% {
    opacity: 0.82;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

/* Existing joelha.si timeline dots: opt-in with the same modifier */
.progress .dot.status-light--live,
.dot.status-light--live {
  background: var(--status-color, var(--red, currentColor));
  border: 0;
  /* live pages used a hollow ring; filled + glow reads better on dark */
}

@media (prefers-reduced-motion: reduce) {
  .status-light--live,
  .status-light--live::after {
    animation: none !important;
    will-change: auto;
  }

  .status-light--live {
    opacity: 1;
    transform: none;
    /* static soft glow – no pulse */
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--status-color) 40%, transparent),
      0 0 10px 2px color-mix(in srgb, var(--status-color) 45%, transparent);
  }

  .status-light--live::after {
    opacity: 0.4;
    transform: scale(1);
  }
}