/* Transmission of the day: one short message in a card, with a small signal pulse.
 * Markup: templates/partials/transmission.html; the message is picked by static/js/transmission.js.
 * The pulse is the only motion, and only where the visitor has not asked for less.
 */

.tx__card {
  position: relative; max-width: 42rem; margin-top: var(--space-6);
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-left: 0.25rem solid var(--amber-400);
}
.tx__card:hover { transform: none; box-shadow: var(--glow-indigo); }   /* a message to read, not a control to press */
.tx__item { margin: 0; }
.tx__text { margin: 0; padding: 0; }
.tx__text p {
  margin: 0; font: 600 var(--text-xl) / 1.35 var(--font-display); color: var(--text); text-wrap: balance;
}
.tx__from {
  margin-top: var(--space-4); font: 500 var(--text-sm) / 1.2 var(--font-pixel);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-300);
}
.tx__note { margin: var(--space-4) 0 0; }

/* Three little bars, like a signal meter */
.tx__signal { display: flex; align-items: flex-end; gap: 0.2rem; height: 1rem; margin-bottom: var(--space-4); }
.tx__signal i { width: 0.25rem; border-radius: 1px; background: var(--amber-400); box-shadow: var(--glow-amber); }
.tx__signal i:nth-child(1) { height: 40%; }
.tx__signal i:nth-child(2) { height: 70%; }
.tx__signal i:nth-child(3) { height: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .tx__signal i { animation: tx-pulse 1.8s ease-in-out infinite; transform-origin: bottom; }
  .tx__signal i:nth-child(2) { animation-delay: 0.2s; }
  .tx__signal i:nth-child(3) { animation-delay: 0.4s; }
  @keyframes tx-pulse { 0%, 100% { opacity: 0.45; transform: scaleY(0.7); } 50% { opacity: 1; transform: scaleY(1); } }
}

@media (forced-colors: active) {
  .tx__signal i { background: CanvasText; }
}