/* ============================================================
   BT PULSE · brand.css — логотипы, цветовые варианты, анимации
   Всё векторное (inline SVG) + CSS-переменные. Реюзабельно
   в приложении, лендинге и любых standalone-страницах.
   ============================================================ */

/* ---------- Размеры ---------- */
.bk-logo { display: inline-block; vertical-align: middle; line-height: 0; }
.bk-logo svg { width: 100%; height: 100%; display: block; }
.bk-16 { width: 16px; height: 16px; }
.bk-24 { width: 24px; height: 24px; }
.bk-32 { width: 32px; height: 32px; }
.bk-40 { width: 40px; height: 40px; }
.bk-64 { width: 64px; height: 64px; }
.bk-96 { width: 96px; height: 96px; }
.bk-160 { width: 160px; height: 160px; }
.bk-240 { width: 240px; height: 240px; }

/* ---------- Цветовые варианты ----------
   Переменные: f1..f6 — грани кристалла (по часовой от верхней),
   core/сore2 — ядро, glow — свечение, edge — контуры, node — узлы. */
.bk-pulse { /* дефолт — палитра с бренд-борда */
  --bk-f1: #B49BFF; --bk-f2: #6D8BFF; --bk-f3: #4A3AD0;
  --bk-f4: #7A3FC8; --bk-f5: #8B5CF6; --bk-f6: #9D8CFF;
  --bk-core: #E9E2FF; --bk-core2: #A78BFA;
  --bk-glow: rgba(167,139,250,.5); --bk-edge: rgba(233,226,255,.75);
  --bk-node: #C4B5FD; --bk-line: rgba(196,181,253,.55);
  --bk-grad-a: #8B5CF6; --bk-grad-b: #F472B6;
}
.bk-aurora {
  --bk-f1: #A9C3FF; --bk-f2: #5B8CFF; --bk-f3: #2F49C8;
  --bk-f4: #6D4FD0; --bk-f5: #8B5CF6; --bk-f6: #8FA8FF;
  --bk-core: #E6ECFF; --bk-core2: #8B5CF6;
  --bk-glow: rgba(91,140,255,.5); --bk-edge: rgba(230,236,255,.75);
  --bk-node: #A9C3FF; --bk-line: rgba(169,195,255,.55);
  --bk-grad-a: #5B8CFF; --bk-grad-b: #8B5CF6;
}
.bk-rose {
  --bk-f1: #FFC2E0; --bk-f2: #F472B6; --bk-f3: #C2388A;
  --bk-f4: #E0653A; --bk-f5: #FB923C; --bk-f6: #FF9ECB;
  --bk-core: #FFF0F8; --bk-core2: #FB923C;
  --bk-glow: rgba(244,114,182,.5); --bk-edge: rgba(255,240,248,.75);
  --bk-node: #FFC2E0; --bk-line: rgba(255,194,224,.55);
  --bk-grad-a: #F472B6; --bk-grad-b: #FB923C;
}
.bk-emerald {
  --bk-f1: #A7F3E0; --bk-f2: #2DD4BF; --bk-f3: #0F8A76;
  --bk-f4: #5FA313; --bk-f5: #84CC16; --bk-f6: #6EE7C8;
  --bk-core: #ECFDF5; --bk-core2: #84CC16;
  --bk-glow: rgba(45,212,191,.5); --bk-edge: rgba(236,253,245,.75);
  --bk-node: #A7F3E0; --bk-line: rgba(167,243,224,.55);
  --bk-grad-a: #2DD4BF; --bk-grad-b: #84CC16;
}
.bk-porcelain { /* для светлых фонов */
  --bk-f1: #C7D2FE; --bk-f2: #4F6BFF; --bk-f3: #2F3FB8;
  --bk-f4: #6D28D9; --bk-f5: #8B5CF6; --bk-f6: #93A5FF;
  --bk-core: #FFFFFF; --bk-core2: #8B5CF6;
  --bk-glow: rgba(79,107,255,.35); --bk-edge: rgba(47,63,184,.45);
  --bk-node: #4F6BFF; --bk-line: rgba(79,107,255,.45);
  --bk-grad-a: #4F6BFF; --bk-grad-b: #8B5CF6;
}
.bk-mono { /* монохром — одним цветом (currentColor) */
  --bk-f1: currentColor; --bk-f2: currentColor; --bk-f3: currentColor;
  --bk-f4: currentColor; --bk-f5: currentColor; --bk-f6: currentColor;
  --bk-core: currentColor; --bk-core2: currentColor;
  --bk-glow: transparent; --bk-edge: currentColor;
  --bk-node: currentColor; --bk-line: currentColor;
  --bk-grad-a: currentColor; --bk-grad-b: currentColor;
}
.bk-mono .bk-facet { opacity: .28; }
.bk-mono .bk-facet:nth-child(odd) { opacity: .5; }

/* auto — следует за активной темой приложения (var(--accent) и т.д.) */
.bk-auto {
  --bk-f1: color-mix(in srgb, var(--accent) 45%, #fff);
  --bk-f2: var(--accent);
  --bk-f3: color-mix(in srgb, var(--accent) 65%, #000);
  --bk-f4: color-mix(in srgb, var(--accent-2) 70%, #000);
  --bk-f5: var(--accent-2);
  --bk-f6: color-mix(in srgb, var(--accent-2) 55%, #fff);
  --bk-core: var(--text);
  --bk-core2: var(--accent-2);
  --bk-glow: var(--glow);
  --bk-edge: color-mix(in srgb, var(--text) 70%, transparent);
  --bk-node: color-mix(in srgb, var(--accent) 60%, #fff);
  --bk-line: color-mix(in srgb, var(--accent) 50%, transparent);
  --bk-grad-a: var(--accent);
  --bk-grad-b: var(--accent-2);
}

/* ---------- Анимации ---------- */
@keyframes bkCorePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }
@keyframes bkSpin { to { transform: rotate(360deg); } }
@keyframes bkSpinRev { to { transform: rotate(-360deg); } }
@keyframes bkDraw { to { stroke-dashoffset: 0; } }
@keyframes bkFlow { to { stroke-dashoffset: -120; } }
@keyframes bkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7%); } }
@keyframes bkBlink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes bkShimmer { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes bkGlowPulse { 0%, 100% { opacity: .5; } 50% { opacity: .12; } }

/* Применение: классы на контейнер .bk-logo или на сам svg */
.bk-anim-core .bk-core,
.bk-anim-core.bk-core { animation: bkCorePulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bk-anim-glow .bk-glow { animation: bkGlowPulse 2.4s ease-in-out infinite; }
.bk-anim-spin .bk-shell,
.bk-anim-spin.bk-shell { animation: bkSpin 14s linear infinite; transform-box: fill-box; transform-origin: center; }
.bk-anim-spin-rev .bk-shell { animation: bkSpinRev 14s linear infinite; transform-box: fill-box; transform-origin: center; }
.bk-anim-spin-slow .bk-shell { animation: bkSpin 30s linear infinite; transform-box: fill-box; transform-origin: center; }
.bk-anim-float { animation: bkFloat 3.6s ease-in-out infinite; }
.bk-anim-blink .bk-node { animation: bkBlink 1.8s ease-in-out infinite; }
.bk-anim-blink .bk-node:nth-child(2n) { animation-delay: .3s; }
.bk-anim-blink .bk-node:nth-child(3n) { animation-delay: .6s; }
.bk-anim-blink .bk-node:nth-child(4n) { animation-delay: .9s; }
.bk-anim-shimmer .bk-facet { animation: bkShimmer 2.8s ease-in-out infinite; }
.bk-anim-shimmer .bk-facet:nth-child(2) { animation-delay: .45s; }
.bk-anim-shimmer .bk-facet:nth-child(3) { animation-delay: .9s; }
.bk-anim-shimmer .bk-facet:nth-child(4) { animation-delay: 1.35s; }
.bk-anim-shimmer .bk-facet:nth-child(5) { animation-delay: 1.8s; }
.bk-anim-shimmer .bk-facet:nth-child(6) { animation-delay: 2.25s; }

/* Линия прорисовки (draw-on): pathLength=100 обязателен на path */
.bk-anim-draw .bk-stroke { stroke-dasharray: 100; stroke-dashoffset: 100; animation: bkDraw 1.6s ease-out forwards; }
.bk-anim-draw .bk-stroke:nth-of-type(2) { animation-delay: .25s; }
.bk-anim-draw .bk-stroke:nth-of-type(3) { animation-delay: .5s; }
.bk-anim-draw .bk-stroke:nth-of-type(4) { animation-delay: .75s; }
/* Пульс-линия бегущая (ECG flow) */
.bk-anim-flow .bk-pulse-line { stroke-dasharray: 14 8; animation: bkFlow 1.4s linear infinite; }

/* Уважение prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .bk-logo *, .bk-logo { animation: none !important; }
}

/* ---------- Витрина брендбука ---------- */
.bkb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.bkb-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bkb-cell .bkb-stage { display: grid; place-items: center; min-height: 110px; width: 100%; border-radius: 10px; }
.bkb-cell .bkb-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); text-align: center; }
.bkb-light .bkb-stage { background: #EEF0F7; }
.bkb-dark .bkb-stage { background: #06080F; }
.bkb-row { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.bkb-sizes { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.bkb-sizes > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bkb-sizes .bkb-label { font-size: 10px; }
pre.bkb-code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); overflow-x: auto; }