/* re:premium AI — лента айфонов вместо логотипа, пока Claude работает (22.10.2026).
 * Логотип в шапке меню — статичный, как во второй панели (cloudcli-dev): канонический
 * design/logo/repremium-logo-full*.svg высотой 28 px, квадрат вендора скрыт (ставит ensureLogo в dist/index.html).
 * Пока в открытом чате идёт ответ (html.rp-ai-busy, ставит /reprem-ai-logo.js), логотип плавно гаснет
 * и на его месте бежит лента айфонов /reprem-ai-phones.webp (нарисована GPT, исходники — art/ai-logo-20261022/).
 * Лента — псевдоэлемент: бандл перерисовывает шапку с нуля, поэтому в DOM ничего не вставляем.
 * Знак-плашка и «AI» (версии 1–2 этого дня) сняты по слову пользователя. */

h1.truncate.tracking-tight.text-foreground:has(> img[data-rp-logo]) {
  position: relative;
  overflow: visible;
}
h1.truncate.tracking-tight.text-foreground > img[data-rp-logo] { transition: opacity var(--dur-base) var(--ease); }

/* лента: высота как у логотипа (28 px), повтор каждые 136 px (544×112 картинки при высоте 28); видна только при работе */
h1.truncate.tracking-tight.text-foreground:has(> img[data-rp-logo])::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: url("/reprem-ai-phones.webp") 0 50% / auto 28px repeat-x;
  -webkit-mask: linear-gradient(90deg, transparent, black 14%, black 86%, transparent);
          mask: linear-gradient(90deg, transparent, black 14%, black 86%, transparent);
  transition: opacity var(--dur-base) var(--ease);
}

html.rp-ai-busy h1.truncate.tracking-tight.text-foreground > img[data-rp-logo] { opacity: 0; }
html.rp-ai-busy h1.truncate.tracking-tight.text-foreground:has(> img[data-rp-logo])::after {
  opacity: 1;
  animation: rp-ai-phones 3s linear infinite;
}

@keyframes rp-ai-phones { to { background-position: -136px 50%; } }

/* без лишнего движения, если так настроено в системе: лента при работе видна неподвижной */
@media (prefers-reduced-motion: reduce) {
  html.rp-ai-busy h1.truncate.tracking-tight.text-foreground:has(> img[data-rp-logo])::after { animation: none; }
}