/* Cipher text (see scripts/cipher.js). Each glyph keeps its real character for layout and
   screen readers; while scrambled the real character is transparent and the noise glyph is painted on top. */
.cx { position: relative; }
.cx--on { color: transparent !important; -webkit-text-fill-color: transparent; }
.cx--on::after {
  content: attr(data-g) / "";
  position: absolute; inset-inline: -0.1em; top: 0; text-align: center;
  color: color-mix(in srgb, var(--signal) 78%, var(--paper));
  -webkit-text-fill-color: currentColor;
  font-weight: 500;
  pointer-events: none;
}
/* the read head: the next glyph to resolve, in full ink */
.cx--head::after { color: var(--paper); }
/* inside the dark console / any dark surface, use the code palette */
.a-console .cx--on::after { color: color-mix(in srgb, var(--signal-2) 85%, var(--code-text)); }

/* ---------- hero: live rotating line ---------- */
.cx-strap {
  display: inline-flex; align-items: center; gap: 12px; max-width: 100%;
  margin: 0 0 18px; padding-block: 8px; padding-inline: 10px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--t-sm); color: var(--paper);
}
.cx-strap__tag {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--signal-dim); color: var(--signal);
  font-size: 11px; letter-spacing: .1em; font-weight: 500; direction: ltr;
}
.cx-strap__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: cx-pulse 1.8s var(--ease) infinite; }
@keyframes cx-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.cx-strap__line { min-width: 0; font-weight: 500; transition: opacity .3s var(--ease); }
.cx-strap__n { flex: none; font-size: 11px; color: var(--paper-3); font-variant-numeric: tabular-nums; direction: ltr; }
@media (max-width: 560px) {
  .cx-strap { border-radius: var(--radius); align-items: flex-start; }
  .cx-strap__n { display: none; }
}

/* footer closing line rotates too; keep its box steady between sentences of different length */
.c-footer__line[data-cipher-rotate] { min-height: 2.5em; }