/* cabinet/dashboard-fx.css — E-003 фон-паттерн + fade-in + counter animations.
   Применяется ко всем страницам кабинета (base.html → body.cabinet-body).
   Паттерн очень слабый (opacity 0.035), не мешает чтению форм.
*/

/* ============================================================
   Фон-паттерн: SVG inline через data: URL.
   8 иконок из темы продукта: еда, кроссовки, шаги, сердце,
   молния, огонь, искра, капля воды. Все на светло-розовом фоне.
   Размер тайла 800×800, покрывает экран с повтором.
   Цвет — pink-accent с прозрачностью, поверх #FFF8FB.
   ============================================================ */

body.cabinet-body {
  background-color: #FFF8FB;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'>\
<g fill='none' stroke='%23FF7BA3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.09'>\
<!-- sneaker 1 -->\
<g transform='translate(80,120) scale(1.2)'>\
<path d='M4 14c0 1 .6 2 2 2h18c3 0 4-2 4-4v-4c0-2-2-3-4-3h-6l-2-3H10L4 8v6z'/>\
<path d='M6 16v2M12 16v2M18 16v2'/>\
</g>\
<!-- food apple 1 -->\
<g transform='translate(260,60) scale(1.3)'>\
<path d='M12 4c-1 0-2 .5-3 1.5C8 6.5 7 7 5.5 7 3.5 7 2 9 2 11.5 2 15 5 20 8 20c1.5 0 2-.5 3-.5s1.5.5 3 .5c3 0 6-5 6-8.5 0-2.5-1.5-4.5-3.5-4.5-1.5 0-2.5.5-3.5 1.5-1-1-2-1.5-3-1.5z'/>\
<path d='M12 4V2M12 4l2-2'/>\
</g>\
<!-- heart 1 -->\
<g transform='translate(480,100) scale(1.1)'>\
<path d='M20.5 13.5c-1.5 2.5-5 5.5-8 7.5-3-2-6.5-5-8-7.5-2-3-1-6 1.5-7 2-1 4 0 5 1 .5.5 1 1 1.5 1.5.5-.5 1-1 1.5-1.5 1-1 3-2 5-1 2.5 1 3.5 4 1.5 7z'/>\
</g>\
<!-- lightning bolt 1 -->\
<g transform='translate(640,60) scale(1.2)'>\
<polygon points='13,2 4,14 11,14 10,22 20,10 13,10'/>\
</g>\
<!-- footprint 1 -->\
<g transform='translate(140,280) scale(1.1)'>\
<ellipse cx='8' cy='8' rx='5' ry='7'/>\
<circle cx='3' cy='17' r='1.5'/>\
<circle cx='6' cy='19' r='1.5'/>\
<circle cx='10' cy='20' r='1.5'/>\
<circle cx='13' cy='18' r='1.5'/>\
</g>\
<!-- spark 1 -->\
<g transform='translate(360,260) scale(1.3)'>\
<path d='M12 2l2.5 7L22 12l-7.5 3L12 22l-2.5-7L2 12l7.5-3z'/>\
</g>\
<!-- water drop 1 -->\
<g transform='translate(560,290) scale(1.2)'>\
<path d='M12 2c-4 6-8 10-8 14 0 4 3.5 6 8 6s8-2 8-6c0-4-4-8-8-14z'/>\
</g>\
<!-- fire 1 -->\
<g transform='translate(700,240) scale(1.1)'>\
<path d='M12 2c-3 4-5 7-5 11 0 4 2 7 5 7s5-3 5-7c0-2-1-3-2-4 0 2-1 3-2 3-1 0-1-2 0-4 1-2 1-4-1-6z'/>\
</g>\
<!-- second wave of icons, different positions -->\
<!-- sneaker 2 -->\
<g transform='translate(40,480) scale(1.15)'>\
<path d='M4 14c0 1 .6 2 2 2h18c3 0 4-2 4-4v-4c0-2-2-3-4-3h-6l-2-3H10L4 8v6z'/>\
</g>\
<!-- heart 2 -->\
<g transform='translate(220,520) scale(1)'>\
<path d='M20.5 13.5c-1.5 2.5-5 5.5-8 7.5-3-2-6.5-5-8-7.5-2-3-1-6 1.5-7 2-1 4 0 5 1 .5.5 1 1 1.5 1.5.5-.5 1-1 1.5-1.5 1-1 3-2 5-1 2.5 1 3.5 4 1.5 7z'/>\
</g>\
<!-- apple 2 -->\
<g transform='translate(440,540) scale(1.2)'>\
<path d='M12 4c-1 0-2 .5-3 1.5C8 6.5 7 7 5.5 7 3.5 7 2 9 2 11.5 2 15 5 20 8 20c1.5 0 2-.5 3-.5s1.5.5 3 .5c3 0 6-5 6-8.5 0-2.5-1.5-4.5-3.5-4.5-1.5 0-2.5.5-3.5 1.5-1-1-2-1.5-3-1.5z'/>\
</g>\
<!-- lightning 2 -->\
<g transform='translate(630,500) scale(1)'>\
<polygon points='13,2 4,14 11,14 10,22 20,10 13,10'/>\
</g>\
<!-- footprint 2 -->\
<g transform='translate(80,680) scale(1)'>\
<ellipse cx='8' cy='8' rx='5' ry='7'/>\
<circle cx='3' cy='17' r='1.5'/>\
<circle cx='6' cy='19' r='1.5'/>\
<circle cx='10' cy='20' r='1.5'/>\
<circle cx='13' cy='18' r='1.5'/>\
</g>\
<!-- spark 2 -->\
<g transform='translate(280,700) scale(1.1)'>\
<path d='M12 2l2.5 7L22 12l-7.5 3L12 22l-2.5-7L2 12l7.5-3z'/>\
</g>\
<!-- water 2 -->\
<g transform='translate(480,720) scale(1.1)'>\
<path d='M12 2c-4 6-8 10-8 14 0 4 3.5 6 8 6s8-2 8-6c0-4-4-8-8-14z'/>\
</g>\
<!-- fire 2 -->\
<g transform='translate(680,700) scale(1.1)'>\
<path d='M12 2c-3 4-5 7-5 11 0 4 2 7 5 7s5-3 5-7c0-2-1-3-2-4 0 2-1 3-2 3-1 0-1-2 0-4 1-2 1-4-1-6z'/>\
</g>\
</g>\
</svg>");
  background-repeat: repeat;
  background-size: 800px 800px;
  background-attachment: fixed; /* на фоне остаётся при скролле */
}

/* Карточки и формы должны иметь непрозрачный белый фон, чтобы
   паттерн не просвечивал внутри — но это уже и так настроено
   в cabinet.css (.card { background: #fff }). Ничего не ломаем. */

/* ============================================================
   Fade-in stagger: каждый .card всплывает с задержкой.
   Работает на всех страницах, где есть .card или [data-fx-fade].
   Задержка: индексная через CSS переменную --fx-i (ставит JS).
   ============================================================ */

@keyframes fxFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* По умолчанию элемент невидим — JS после загрузки навешивает .fx-visible,
   и анимация запускается. Если JS отключён — сразу видно (см. .no-js ниже). */
.fx-fade {
  opacity: 0;
  transform: translateY(12px);
}
.fx-fade.fx-visible {
  animation: fxFadeUp 0.45s cubic-bezier(0.22, 0.9, 0.28, 1) forwards;
  animation-delay: calc(var(--fx-i, 0) * 70ms);
}

/* ============================================================
   Counter animation (только dashboard — включается через data-атрибут).
   JS сам подменяет текст. Стилевого контроля не требуется.
   ============================================================ */

/* ============================================================
   Accessibility: prefers-reduced-motion — отключаем все эффекты.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fx-fade,
  .fx-fade.fx-visible {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Fallback для no-JS: если JS не прогрузился за 200ms,
   показываем карточки как есть (через <noscript> это сложно, поэтому
   используем таймаут в JS с fallback-классом на <html>). */
html.no-fx .fx-fade {
  opacity: 1;
  transform: none;
  animation: none;
}