/* AniFrame — своя рамка аватара из конструктора (static/js/anime-frame.js).
   Бокс рамки — 132% аватара (inset -16%), как у остальных рамок; родитель
   задаёт position: relative и круглый аватар. Анимируются только
   transform/opacity целых слоёв — содержимое растеризуется один раз. */
.af-fx { position: absolute; inset: -16%; pointer-events: none; z-index: 2; --spd: 1; }
.af-fx .af-l { position: absolute; inset: 0; will-change: transform, opacity; }
.af-fx svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Статичное превью (миниатюры): без анимации и без чередующихся кадров */
.af-static .af-l { animation: none !important; will-change: auto; }
.af-static .af-alt { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { .af-fx .af-l, .af-fx path { animation: none !important; } .af-fx .af-alt { opacity: 0 !important; } }

@keyframes af-spin { to { transform: rotate(360deg); } }
@keyframes af-spinR { to { transform: rotate(-360deg); } }
@keyframes af-breathe { from { opacity: .45; transform: scale(.985); } to { opacity: 1; transform: scale(1.015); } }
@keyframes af-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes af-flip3 { 0% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
@keyframes af-charge { 0%, 40% { opacity: 0; } 84% { opacity: .55; } 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes af-bolt { 0%, 85.5% { opacity: 0; transform: scale(.86); } 86% { opacity: 1; transform: scale(1); } 88% { opacity: .15; } 89.5% { opacity: 1; } 93%, 100% { opacity: 0; transform: scale(1.04); } }
@keyframes af-shake { 0%, 85.5%, 93%, 100% { transform: none; } 86.5% { transform: translate(1%, -.6%) scale(1.03); } 87.5% { transform: translate(-.8%, .7%); } 88.5% { transform: translate(.6%, .5%) scale(1.02); } 90% { transform: translate(-.4%, -.3%); } }
@keyframes af-hot { 0%, 78% { opacity: 0; } 80% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes af-kick { 0%, 79% { transform: scale(1); } 81% { transform: scale(1.1); } 92%, 100% { transform: scale(1); } }
@keyframes af-pulse { 0%, 100% { opacity: .25; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.02); } }

/* «Аниме-ДНК» до 10 серий — бледный зародыш, без движения */
.af-dna-locked { opacity: .35; filter: grayscale(.6); }
.af-dna-locked .af-l { animation: none !important; }

/* Подсказка «что к чему» при наведении на ДНК */
.af-dna-tip { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none; white-space: nowrap;
  padding: 6px 10px; border-radius: 10px; background: rgba(12, 12, 16, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .12); color: #fff; font: 600 13px/1.2 system-ui, sans-serif; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
.af-dna-hit { position: absolute; inset: -16%; z-index: 4; border-radius: 50%; }
.af-dna-tip i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }

/* ===== Рамка в списках и шапке (AniFrame.decorate): встроенный режим ===== */
.af-host { position: relative; display: inline-flex; flex-shrink: 0; vertical-align: middle; }
.af-host > .af-avatar { border-radius: 50% !important; transform: scale(.76); }
.af-fx.af-inner { inset: 0; }

/* ===== Редактор в настройках профиля ===== */
.af-ed { display: grid; gap: 14px; margin-top: 10px; text-align: left; }
.af-g { display: grid; gap: 8px; }
.af-t { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-gray-500, #8b8b93); }
.af-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.af-chip { border: 1px solid rgba(255,255,255,.14); background: transparent; color: inherit; border-radius: 999px; padding: 5px 11px;
  font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.af-chip:hover { border-color: rgba(255,255,255,.3); }
.af-chip[aria-pressed="true"] { border-color: var(--color-accent, #d82d7e); background: rgba(216,45,126,.18); }
.af-chip.af-locked { opacity: .5; }
.af-pal { display: inline-flex; align-items: center; gap: 5px; }
.af-pal i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.af-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.af-hint { font-size: 12px; color: var(--color-gray-500, #8b8b93); }
.af-ed input[type=range] { width: 100%; max-width: 260px; accent-color: var(--color-accent, #d82d7e); }
.af-ed input[type=color] { width: 40px; height: 30px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; background: none; padding: 2px; cursor: pointer; }
.af-ed input[type=color]:disabled { opacity: .4; cursor: not-allowed; }
.af-actions { margin-top: 4px; }