/* The plus one: a small pixel-type count in green light on a kept maker who has posted since you last looked.
   Green is the legend's live-or-new; it is light here, not a surface: green type with its glow on a scrap of ink,
   hairlined, so it reads over any picture. It arrives with one ring of light, sits still, and when the look has
   happened it lifts and travels into the Following button, which takes the light for a beat. */
#rot .po-chip {
  position: absolute; right: -9px; top: -9px;
  min-width: 22px; height: 18px; padding: 1px 5px 0; box-sizing: border-box;
  display: inline-grid; place-items: center;
  font: 800 12px/1 'Doto', var(--mono); letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: var(--g, #2BB673); text-shadow: 0 0 8px rgba(43, 182, 115, .85);
  background: rgba(14, 15, 18, .84); border: 1px solid rgba(255, 250, 248, .22); border-radius: 4px;
  pointer-events: none; z-index: 6; white-space: nowrap;
  animation: po-in .46s var(--os-settle, cubic-bezier(.22, .8, .22, 1)) both;
}
#rot .rc-channel-bug { overflow: visible; }
/* on the wheel's card: the corner of the face; on the creator grid's card: the top corner, over the cover */
#rot .rt-card > .po-chip { right: auto; left: 72px; top: 4px; }
#rot .rc-tv-card > .po-chip { right: 10px; top: 10px; z-index: 3; }
/* inline: after a name, or after an intent's word */
#rot .po-chip.po-inline { position: static; margin-left: 6px; vertical-align: middle; height: 16px; min-width: 18px; padding: 1px 4px 0; font-size: 11px; }
@keyframes po-in { 0% { opacity: 0; scale: .6; filter: brightness(1.8); } 55% { opacity: 1; scale: 1.14; } 100% { opacity: 1; scale: 1; filter: none; } }
/* announce: one ring of light as it arrives, then still */
#rot .po-chip::after { content: ''; position: absolute; inset: -3px; border-radius: 6px; border: 1px solid var(--g, #2BB673); opacity: 0; animation: po-ring .9s ease-out .25s 1; pointer-events: none; }
@keyframes po-ring { 0% { opacity: .85; scale: .92; } 100% { opacity: 0; scale: 1.8; } }
/* collect: lift, brighten, travel into the Following button */
#rot .po-chip.po-collect { animation: po-collect .72s cubic-bezier(.3, .7, .2, 1) both; }
#rot .po-chip.po-collect::after { animation: none; }
@keyframes po-collect {
  0% { translate: 0 0; scale: 1; opacity: 1; }
  28% { translate: 0 -10px; scale: 1.3; opacity: 1; text-shadow: 0 0 16px var(--g, #2BB673), 0 0 4px var(--g, #2BB673); }
  100% { translate: var(--po-dx, 0px) var(--po-dy, 0px); scale: .3; opacity: 0; }
}
#rot .rc-follow.po-took { animation: po-took .8s ease-out both; }
@keyframes po-took {
  0% { box-shadow: 0 0 0 0 rgba(43, 182, 115, 0); }
  18% { box-shadow: 0 0 0 3px rgba(43, 182, 115, .8), 0 0 18px rgba(43, 182, 115, .6); color: var(--g, #2BB673); }
  100% { box-shadow: 0 0 0 0 rgba(43, 182, 115, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #rot .po-chip, #rot .po-chip::after, #rot .po-chip.po-collect, #rot .rc-follow.po-took { animation: none; }
}