/*
 * Анимации рамки блока «Вы получите:» на странице продажи.
 *
 * Включаются только когда в инвентаре выбран хотя бы один предмет: страница ставит
 * на <html> атрибут data-payout-picked (его снимает sell-runtime.js, когда корзина
 * пустеет). data-payout-frame-always — режим примерки: держит анимацию включённой,
 * чтобы варианты можно было разглядеть, ничего не выбирая.
 *
 * Вариант выбирается атрибутом data-payout-frame="f1".."f20" на <html>; список,
 * переключатель вариантов и скорости — в /exact/sell-payout-frame.js (?frameSkins).
 *
 * Скорость задаётся переменной --pf-speed: это множитель длительности, поэтому 0.5 —
 * вдвое быстрее, 2 — вдвое медленнее. Панель пишет её в style элемента <html>.
 *
 * Разметку рамки размечает sell-runtime.js: data-payout-head — сам блок,
 * data-payout-line — волосяная линия сверху, data-payout-corner — четыре уголка.
 *
 * Варианты 11–20 — семейство «бегущей искры» из первого варианта: меняются число
 * искр, направление, длина хвоста, толщина кольца и характер движения.
 */

:root {
  --pf-accent: 34, 209, 126;
  --pf-corner: 44, 90, 69;
  --pf-speed: 1;
}

@media (prefers-reduced-motion: reduce) {
  html [data-payout-head],
  html [data-payout-head]::before,
  html [data-payout-head]::after,
  html [data-payout-head] [data-payout-line],
  html [data-payout-head] [data-payout-corner] { animation: none !important; }
}

/* Кольцо по периметру блока: фон вырезается маской, остаётся только рамка.
   На нём построены «искровые» варианты — 1 и 11–20. */
html:is([data-payout-picked], [data-payout-frame-always]):is(
  [data-payout-frame="f1"], [data-payout-frame="f8"], [data-payout-frame="f10"],
  [data-payout-frame="f11"], [data-payout-frame="f12"], [data-payout-frame="f13"],
  [data-payout-frame="f14"], [data-payout-frame="f15"], [data-payout-frame="f16"],
  [data-payout-frame="f17"], [data-payout-frame="f18"], [data-payout-frame="f19"],
  [data-payout-frame="f20"]) [data-payout-head]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  padding: 1px;
  border-radius: inherit;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Второе кольцо — для встречных искр (вариант 13). */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f13"] [data-payout-head]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  padding: 1px;
  border-radius: inherit;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ---- f1 · Бегущая искра -------------------------------------------------- */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f1"] [data-payout-head]::after {
  background: conic-gradient(from var(--pf-angle, 0deg),
    rgba(var(--pf-accent), 0) 0deg,
    rgba(var(--pf-accent), 0) 300deg,
    rgba(var(--pf-accent), 0.95) 345deg,
    rgba(255, 255, 255, 0.9) 358deg,
    rgba(var(--pf-accent), 0) 360deg);
  animation: pf-spin calc(2.6s * var(--pf-speed)) linear infinite;
}

/* ---- f2 · Пульс рамки ---------------------------------------------------- */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f2"] [data-payout-head] {
  animation: pf-pulse-border calc(1.9s * var(--pf-speed)) ease-in-out infinite;
}
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f2"] [data-payout-corner] {
  animation: pf-pulse-corner calc(1.9s * var(--pf-speed)) ease-in-out infinite;
}

/* ---- f3 · Раскрытие углов ------------------------------------------------ */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f3"] [data-payout-corner] {
  animation: pf-corner-grow calc(2.2s * var(--pf-speed)) ease-in-out infinite;
}

/* ---- f4 · Сканирующая линия ---------------------------------------------- */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f4"] [data-payout-line] {
  animation: pf-scan calc(2.8s * var(--pf-speed)) ease-in-out infinite;
}

/* ---- f5 · Неоновое свечение ---------------------------------------------- */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f5"] [data-payout-head] {
  animation: pf-neon calc(2.1s * var(--pf-speed)) ease-in-out infinite;
}

/* ---- f6 · Прорисовка рамки ----------------------------------------------- */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f6"] [data-payout-head]::before,
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f6"] [data-payout-head]::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 0;
  height: 1px;
  pointer-events: none;
  z-index: 6;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(var(--pf-accent), 0.9), transparent);
  animation: pf-draw calc(2.4s * var(--pf-speed)) ease-in-out infinite;
}
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f6"] [data-payout-head]::before { top: 0; }
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f6"] [data-payout-head]::after {
  bottom: -1px;
  animation-delay: calc(0.25s * var(--pf-speed));
}

/* ---- f7 · Бегущие углы --------------------------------------------------- */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f7"] [data-payout-corner] {
  animation: pf-corner-chase calc(2.4s * var(--pf-speed)) ease-in-out infinite;
}
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f7"] [data-payout-corner]:nth-of-type(1) { animation-delay: 0s; }
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f7"] [data-payout-corner]:nth-of-type(2) { animation-delay: calc(0.6s * var(--pf-speed)); }
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f7"] [data-payout-corner]:nth-of-type(4) { animation-delay: calc(1.2s * var(--pf-speed)); }
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f7"] [data-payout-corner]:nth-of-type(3) { animation-delay: calc(1.8s * var(--pf-speed)); }

/* ---- f8 · Градиентный контур --------------------------------------------- */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f8"] [data-payout-head]::after {
  inset: -1px;
  background: conic-gradient(from var(--pf-angle, 0deg),
    rgba(var(--pf-accent), 0.15),
    rgba(var(--pf-accent), 0.95),
    rgba(120, 255, 200, 0.9),
    rgba(var(--pf-accent), 0.15));
  animation: pf-spin calc(6s * var(--pf-speed)) linear infinite;
}

/* ---- f9 · Двойной контур ------------------------------------------------- */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f9"] [data-payout-head]::after {
  content: '';
  position: absolute;
  inset: -4px;
  pointer-events: none;
  z-index: 6;
  border: 1px solid rgba(var(--pf-accent), 0.5);
  border-radius: 10px;
  animation: pf-double calc(2.3s * var(--pf-speed)) ease-in-out infinite;
}

/* ---- f10 · Движущийся пунктир -------------------------------------------- */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f10"] [data-payout-head]::after {
  -webkit-mask: none;
  mask: none;
  padding: 0;
  background:
    repeating-linear-gradient(90deg, rgba(var(--pf-accent), 0.85) 0 8px, transparent 8px 16px) top/100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(var(--pf-accent), 0.85) 0 8px, transparent 8px 16px) bottom/100% 1px no-repeat,
    repeating-linear-gradient(0deg, rgba(var(--pf-accent), 0.85) 0 8px, transparent 8px 16px) left/1px 100% no-repeat,
    repeating-linear-gradient(0deg, rgba(var(--pf-accent), 0.85) 0 8px, transparent 8px 16px) right/1px 100% no-repeat;
  animation: pf-ants calc(0.9s * var(--pf-speed)) linear infinite;
}

/* ======== семейство «бегущей искры» ======================================= */

/* ---- f11 · Две искры ------------------------------------------------------
   Два огонька на противоположных сторонах кольца. */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f11"] [data-payout-head]::after {
  background: conic-gradient(from var(--pf-angle, 0deg),
    rgba(var(--pf-accent), 0) 0deg,
    rgba(var(--pf-accent), 0) 130deg,
    rgba(var(--pf-accent), 0.9) 168deg,
    rgba(255, 255, 255, 0.95) 180deg,
    rgba(var(--pf-accent), 0) 182deg,
    rgba(var(--pf-accent), 0) 310deg,
    rgba(var(--pf-accent), 0.9) 348deg,
    rgba(255, 255, 255, 0.95) 360deg);
  animation: pf-spin calc(3.2s * var(--pf-speed)) linear infinite;
}

/* ---- f12 · Искра с хвостом ------------------------------------------------
   Длинный кометный шлейф за головой. */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f12"] [data-payout-head]::after {
  background: conic-gradient(from var(--pf-angle, 0deg),
    rgba(var(--pf-accent), 0) 0deg,
    rgba(var(--pf-accent), 0) 180deg,
    rgba(var(--pf-accent), 0.18) 250deg,
    rgba(var(--pf-accent), 0.55) 320deg,
    rgba(var(--pf-accent), 0.95) 352deg,
    rgba(255, 255, 255, 1) 360deg);
  animation: pf-spin calc(2.8s * var(--pf-speed)) linear infinite;
}

/* ---- f13 · Встречные искры ------------------------------------------------
   Две искры на двух кольцах едут навстречу друг другу. */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f13"] [data-payout-head]::after {
  background: conic-gradient(from var(--pf-angle, 0deg),
    rgba(var(--pf-accent), 0) 0deg,
    rgba(var(--pf-accent), 0) 320deg,
    rgba(var(--pf-accent), 0.9) 352deg,
    rgba(255, 255, 255, 0.95) 360deg);
  animation: pf-spin calc(3s * var(--pf-speed)) linear infinite;
}
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f13"] [data-payout-head]::before {
  background: conic-gradient(from var(--pf-angle-back, 0deg),
    rgba(120, 255, 200, 0) 0deg,
    rgba(120, 255, 200, 0) 320deg,
    rgba(120, 255, 200, 0.9) 352deg,
    rgba(255, 255, 255, 0.95) 360deg);
  animation: pf-spin-back calc(3s * var(--pf-speed)) linear infinite;
}

/* ---- f14 · Мягкая волна ---------------------------------------------------
   Широкое размытое свечение вместо точки — рамка «дышит» по кругу. */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f14"] [data-payout-head]::after {
  background: conic-gradient(from var(--pf-angle, 0deg),
    rgba(var(--pf-accent), 0.05) 0deg,
    rgba(var(--pf-accent), 0.05) 120deg,
    rgba(var(--pf-accent), 0.65) 240deg,
    rgba(var(--pf-accent), 0.05) 360deg);
  animation: pf-spin calc(4.5s * var(--pf-speed)) linear infinite;
}

/* ---- f15 · Искра против часовой ------------------------------------------- */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f15"] [data-payout-head]::after {
  background: conic-gradient(from var(--pf-angle-back, 0deg),
    rgba(var(--pf-accent), 0) 0deg,
    rgba(var(--pf-accent), 0) 300deg,
    rgba(var(--pf-accent), 0.95) 345deg,
    rgba(255, 255, 255, 0.9) 358deg,
    rgba(var(--pf-accent), 0) 360deg);
  animation: pf-spin-back calc(2.6s * var(--pf-speed)) linear infinite;
}

/* ---- f16 · Четыре искры ---------------------------------------------------
   Четыре огонька через 90° — по одному на каждый угол. */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f16"] [data-payout-head]::after {
  background: conic-gradient(from var(--pf-angle, 0deg),
    rgba(var(--pf-accent), 0) 0deg, rgba(var(--pf-accent), 0) 68deg,
    rgba(255, 255, 255, 0.95) 90deg, rgba(var(--pf-accent), 0) 92deg,
    rgba(var(--pf-accent), 0) 158deg,
    rgba(255, 255, 255, 0.95) 180deg, rgba(var(--pf-accent), 0) 182deg,
    rgba(var(--pf-accent), 0) 248deg,
    rgba(255, 255, 255, 0.95) 270deg, rgba(var(--pf-accent), 0) 272deg,
    rgba(var(--pf-accent), 0) 338deg,
    rgba(255, 255, 255, 0.95) 360deg);
  animation: pf-spin calc(4s * var(--pf-speed)) linear infinite;
}

/* ---- f17 · Толстая искра --------------------------------------------------
   То же движение, но кольцо в два пикселя — рамка заметнее. */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f17"] [data-payout-head]::after {
  padding: 2px;
  background: conic-gradient(from var(--pf-angle, 0deg),
    rgba(var(--pf-accent), 0) 0deg,
    rgba(var(--pf-accent), 0) 310deg,
    rgba(var(--pf-accent), 0.9) 348deg,
    rgba(255, 255, 255, 1) 360deg);
  animation: pf-spin calc(2.6s * var(--pf-speed)) linear infinite;
}

/* ---- f18 · Искра по углам -------------------------------------------------
   Движение рывками: огонёк перепрыгивает от угла к углу, а не скользит. */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f18"] [data-payout-head]::after {
  background: conic-gradient(from var(--pf-angle, 0deg),
    rgba(var(--pf-accent), 0) 0deg,
    rgba(var(--pf-accent), 0) 300deg,
    rgba(var(--pf-accent), 0.95) 345deg,
    rgba(255, 255, 255, 0.9) 358deg,
    rgba(var(--pf-accent), 0) 360deg);
  animation: pf-spin calc(2.4s * var(--pf-speed)) steps(4, end) infinite;
}

/* ---- f19 · Белая искра ----------------------------------------------------
   Холодный огонёк по тёмно-зелёной рамке. */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f19"] [data-payout-head]::after {
  background: conic-gradient(from var(--pf-angle, 0deg),
    rgba(var(--pf-corner), 0.75) 0deg,
    rgba(var(--pf-corner), 0.75) 330deg,
    rgba(255, 255, 255, 1) 356deg,
    rgba(200, 255, 230, 0.9) 360deg);
  animation: pf-spin calc(2.2s * var(--pf-speed)) linear infinite;
}

/* ---- f20 · Двухцветная искра ----------------------------------------------
   Зелёная голова и бирюзовый хвост. */
html:is([data-payout-picked], [data-payout-frame-always])[data-payout-frame="f20"] [data-payout-head]::after {
  background: conic-gradient(from var(--pf-angle, 0deg),
    rgba(var(--pf-accent), 0) 0deg,
    rgba(var(--pf-accent), 0) 200deg,
    rgba(80, 220, 255, 0.35) 280deg,
    rgba(80, 220, 255, 0.8) 330deg,
    rgba(var(--pf-accent), 1) 354deg,
    rgba(255, 255, 255, 1) 360deg);
  animation: pf-spin calc(3.4s * var(--pf-speed)) linear infinite;
}

/* ---- ключевые кадры ------------------------------------------------------ */

@property --pf-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --pf-angle-back {
  syntax: '<angle>';
  initial-value: 360deg;
  inherits: false;
}

@keyframes pf-spin {
  to { --pf-angle: 360deg; }
}

@keyframes pf-spin-back {
  from { --pf-angle-back: 360deg; }
  to { --pf-angle-back: 0deg; }
}

@keyframes pf-pulse-border {
  0%, 100% { border-bottom-color: #1e1e24; box-shadow: none; }
  50% { border-bottom-color: rgba(var(--pf-accent), 0.75); box-shadow: inset 0 -1px 12px -6px rgba(var(--pf-accent), 0.9); }
}

@keyframes pf-pulse-corner {
  0%, 100% { border-color: rgb(var(--pf-corner)) !important; opacity: 0.75; }
  50% { border-color: rgba(var(--pf-accent), 1) !important; opacity: 1; }
}

@keyframes pf-corner-grow {
  0%, 100% { width: 10px; height: 10px; border-color: rgb(var(--pf-corner)) !important; }
  50% { width: 22px; height: 22px; border-color: rgba(var(--pf-accent), 0.95) !important; }
}

@keyframes pf-scan {
  0% { transform: translateY(0); opacity: 0.35; }
  45% { opacity: 1; }
  50% { transform: translateY(var(--pf-scan-distance, 64px)); opacity: 1; }
  95% { opacity: 1; }
  100% { transform: translateY(0); opacity: 0.35; }
}

@keyframes pf-neon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--pf-accent), 0); }
  50% { box-shadow: 0 0 18px -2px rgba(var(--pf-accent), 0.45), inset 0 0 14px -8px rgba(var(--pf-accent), 0.6); }
}

@keyframes pf-draw {
  0% { width: 0; opacity: 0; }
  30% { opacity: 1; }
  60%, 80% { width: 100%; opacity: 1; }
  100% { width: 0; opacity: 0; }
}

@keyframes pf-corner-chase {
  0%, 70%, 100% { border-color: rgb(var(--pf-corner)) !important; filter: none; }
  12% { border-color: rgba(var(--pf-accent), 1) !important; filter: drop-shadow(0 0 5px rgba(var(--pf-accent), 0.9)); }
}

@keyframes pf-double {
  0%, 100% { inset: -4px; opacity: 0.25; }
  50% { inset: -8px; opacity: 0.8; }
}

@keyframes pf-ants {
  to { background-position: top 0 left 16px, bottom 0 left 16px, left 0 top 16px, right 0 top 16px; }
}