/* ═══════════════════════════════════════════════════════════════════════════
   ВРЕМЕННО: мемное оформление админки.

   Удаляется целиком и без следов — три штуки:
     1) этот файл
     2) static/js/admin-memes.js
     3) блок «МЕМЫ (временно)» в frontend/templates/admin/base.html

   Больше нигде ничего не правилось: разметку строит скрипт, поэтому шаблоны
   страниц админки о мемах не знают.

   Всё анимируется только через transform/opacity — DOM во время анимации не
   меняется, чтобы не засорять запись rrweb (у слоя ещё и класс `no-record`).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Фоновый слой ──────────────────────────────────────────────────────────
   z-index: -1 — это принципиально. Слой уезжает под содержимое: под сайдбар,
   под карточки, под таблицы. Мемы видны в отступах и пустотах страницы и
   физически не могут перекрыть ни текст, ни кнопку. */
.memes-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.memes-item {
  position: absolute;
  white-space: nowrap;
  user-select: none;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.02em;
  color: rgb(var(--rgb-accent) / .55);
  will-change: transform, opacity;
  animation: meme-drift var(--dur, 40s) linear var(--delay, 0s) infinite;
}
.memes-item.is-alt   { color: rgb(var(--rgb-text-muted) / .5); }
.memes-item.is-emoji { color: inherit; font-weight: 400; letter-spacing: 0; }

@keyframes meme-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); opacity: 0; }
  14%  { opacity: var(--op, .3); }
  86%  { opacity: var(--op, .3); }
  100% { transform: translate3d(var(--dx, 10vw), var(--dy, -10vh), 0)
                    rotate(calc(var(--rot, 0deg) + var(--spin, 8deg)));
         opacity: 0; }
}

/* ── Плашка в шапке: мем меняется сам, по клику — следующий ───────────────── */
.memes-badge {
  flex: none;
  border: 1px solid rgb(var(--rgb-accent) / .35);
  background: rgb(var(--rgb-accent) / .1);
  color: var(--color-accent);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.memes-badge:hover { background: rgb(var(--rgb-accent) / .18); }
.memes-badge.pop   { transform: scale(1.12) rotate(-2deg); }

/* ── Полоска в подвале сайдбара ────────────────────────────────────────────
   Сайдбар непрозрачный, фоновый слой под него не пролезает — а пусто там
   как раз есть. */
.memes-strip {
  margin-top: 10px;
  text-align: center;
  font-size: .95rem;
  letter-spacing: .18em;
  opacity: .75;
  user-select: none;
}
.memes-strip small {
  display: block;
  margin-top: 3px;
  font-size: .66rem;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  opacity: .8;
}

/* Мобильная админка: в шапке места нет — плашка ушла бы на вторую строку и
   развалила топбар. Фон и полоска в сайдбаре остаются. */
@media (max-width: 900px) {
  .memes-badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .memes-item { animation: none; opacity: var(--op, .3); }
  .memes-badge.pop { transform: none; }
}