/* ============================================================
   КОГДА УДОБНО — embeddable animated brand mark (rotation + pick)
   namespaced .bs-* ; relies on site --acid / --ink from v2.css
   ============================================================ */
.bs, [data-brand-mark] { --bs-acid: #6cb52e; --bs-square: #6cb52e; --bs-mark: #15160f; }
:root[data-theme="dark"] .bs, :root[data-theme="dark"] [data-brand-mark] { --bs-square: #15160f; --bs-mark: #6cb52e; }

.bs-lockup { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
.bs-iconwrap { position: relative; flex: none; width: clamp(72px, 9vw, 128px); aspect-ratio: 1; }
.bs-icon { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.bs-icon.active { opacity: 1; }
.bs-icon svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 12px rgba(108,181,46,.30)); }
.bs-icon path, .bs-icon circle, .bs-icon rect, .bs-icon line { vector-effect: non-scaling-stroke; }

.bs-draw {
  fill: none; stroke: var(--bs-acid); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 1); stroke-dashoffset: var(--len, 1);
  transition: stroke-dashoffset var(--dur, 900ms) cubic-bezier(.22,1,.36,1);
  transition-delay: var(--d, 0ms);
}
.bs-icon.play .bs-draw { stroke-dashoffset: 0; }
.bs-draw.thick { stroke-width: 8.5; }

.bs-pop { transform-box: fill-box; transform-origin: center; opacity: 0; }
.bs-icon.play .bs-pop { animation: bsPop .55s cubic-bezier(.2,1.5,.4,1) both; animation-delay: var(--d,0ms); }
@keyframes bsPop { 0%{opacity:0;transform:scale(.2)} 60%{opacity:1} 100%{opacity:1;transform:scale(1)} }
.bs-fillacid { fill: var(--bs-acid); }

/* ===== official brand mark ===== */
.bs-sq { fill: var(--bs-square); transform-box: fill-box; transform-origin: center; opacity: 0; }
.bs-icon.play .bs-sq { animation: bsSq .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes bsSq { 0% { opacity: 0; transform: scale(.62); } 100% { opacity: 1; transform: scale(1); } }
.bs-chev { stroke: var(--bs-mark); stroke-width: 14; }
.bs-fillmark { fill: var(--bs-mark); }
/* underscore blinks like a terminal cursor once it has drawn on */
.bs-icon.play .bs-us { animation: bsBlink 1.1s steps(1) 1700ms infinite; }
/* ===== official wordmark (vector — exact glyphs incl. Д) ===== */
.bs-wmsvg { display: block; height: clamp(80px, 10vw, 140px); width: auto; }
.bs-wmsvg path, .bs-wmsvg polygon { fill: var(--bone, #15160f); }
.bs-wm.hold .bs-wmsvg { opacity: 0; }
.bs-wm.anim .bs-wmsvg { animation: bsWmIn .75s cubic-bezier(.22,1,.36,1) both; }
@keyframes bsWmIn { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
/* static mark in nav / footer */
[data-brand-mark] .bs-sq2 { fill: var(--bs-square); }
[data-brand-mark] .bs-mk { fill: none; stroke: var(--bs-mark); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
[data-brand-mark] .bs-dt { fill: var(--bs-mark); }
@media (prefers-reduced-motion: reduce) {
  .bs-sq, .bs-chev, .bs-pop, .bs-fillmark, .bs-wmsvg { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; animation: none !important; transition: none !important; }
}

.bs-wt { font-family: var(--ff-mono, "JetBrains Mono", monospace); font-weight: 700; font-size: 15px; fill: #8a8c8f; opacity: 0; }
.bs-icon.play .bs-wt { animation: bsFade .3s ease both; animation-delay: var(--d,0ms); }
.bs-wt.hl { fill: var(--bs-acid); }
@keyframes bsFade { from{opacity:0} to{opacity:1} }

.bs-cursor.blink { animation: bsBlink 1s steps(1) infinite; }
@keyframes bsBlink { 50%{opacity:0} }

.bs-icon.dots-go .bs-sdot { animation: bsBob 1.3s cubic-bezier(.22,1,.36,1) infinite; }
.bs-icon.dots-go .bs-sdot:nth-of-type(2) { animation-delay: .18s; }
@keyframes bsBob { 0%,100%{transform:translateY(0)} 35%{transform:translateY(-6px)} }
.bs-sdot { transform-box: fill-box; transform-origin: center; }

.bs-knob { transform-box: fill-box; transform-origin: center; transform: translateX(-42px) scale(.86); fill: #54585c; }
.bs-icon.play .bs-knob { animation: bsKnob .62s cubic-bezier(.5,1.6,.4,1) both; animation-delay: var(--d,0ms); }
@keyframes bsKnob { 0%{transform:translateX(-42px) scale(.86);fill:#54585c} 100%{transform:translateX(0) scale(1);fill:var(--bs-acid)} }
.bs-track { fill: var(--bs-acid); opacity: 0; }
.bs-icon.play .bs-track { animation: bsTrack .4s ease both; animation-delay: var(--d,0ms); }
@keyframes bsTrack { from{opacity:0} to{opacity:.14} }

/* wordmark */
.bs-text { display: flex; flex-direction: column; gap: clamp(4px,.5vw,8px); }
.bs-wm { display: flex; flex-direction: column; line-height: .86; font-family: "Montserrat", var(--ff-disp, sans-serif); }
.bs-line { font-weight: 800; font-size: clamp(30px, 4.6vw, 66px); letter-spacing: -0.01em; white-space: nowrap; }
.bs-ch { display: inline-block; color: var(--bone, #f2f0ea); }
.bs-ch.sp { width: .28em; }
.bs-wm.hold .bs-ch { opacity: 0; animation: none; }
.bs-wm.anim .bs-ch { opacity: 0; animation: bsChIn .5s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--cd,0ms); }
@keyframes bsChIn {
  0%   { opacity:0; transform:translateY(.5em) scale(.96); filter:blur(5px); color:var(--bs-acid); }
  55%  { filter:blur(0); color:var(--bs-acid); }
  100% { opacity:1; transform:none; filter:none; color:var(--bone, #f2f0ea); }
}
.bs-tag {
  font-family: var(--ff-mono, monospace); font-weight: 600; font-size: clamp(10px,1.15vw,14px);
  letter-spacing: .2em; text-transform: uppercase; color: #8a8c8f; display: flex; align-items: center;
  min-height: 1.4em; margin-top: clamp(3px,.5vw,7px);
}
.bs-tag__txt { white-space: pre; }
.bs-tag__cursor { display:inline-block; width:.56em; height:1.02em; background:var(--bs-acid); margin-left:3px; box-shadow:0 0 8px rgba(200,242,60,.5); animation: bsBlink 1s steps(1) infinite; }
.bs-tag.done .bs-tag__cursor { opacity:0; transition:opacity .4s; }

/* ===== picker rail ===== */
.bs-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: clamp(20px,2.6vw,30px); }
.bs-pick__lbl { font-family: var(--ff-mono, monospace); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8a8c8f; margin-right: 4px; }
.bs-pbtn { position: relative; width: 50px; height: 40px; border: 1px solid rgba(242,240,234,.14); background: rgba(242,240,234,.03); border-radius: 9px; display: grid; place-items: center; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; padding: 0; }
.bs-pbtn:hover { border-color: rgba(242,240,234,.3); transform: translateY(-2px); }
.bs-pbtn svg { width: 24px; height: 24px; }
.bs-pbtn.on { border-color: var(--bs-acid); background: rgba(200,242,60,.08); }
.bs-pbtn.on::after { content: "✓"; position: absolute; top: -7px; right: -7px; width: 16px; height: 16px; background: var(--bs-acid); color: var(--ink, #0a0b0c); border-radius: 50%; font-size: 10px; display: grid; place-items: center; font-family: var(--ff-mono, monospace); }
.bs-mini { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border: 1px solid rgba(242,240,234,.14); background: transparent; border-radius: 999px; font-family: var(--ff-mono, monospace); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--bone, #f2f0ea); cursor: pointer; transition: border-color .2s, color .2s; }
.bs-mini:hover { border-color: rgba(242,240,234,.3); }
.bs-mini svg { width: 14px; height: 14px; }
.bs-mini.on .bs-mini__pause { display: inline; } .bs-mini.on .bs-mini__play { display: none; }
.bs-mini__pause { display: none; }

/* ===== brand mark in nav / footer ===== */
[data-brand-mark] { display: inline-flex; align-items: center; justify-content: center; }
[data-brand-mark] svg { display: block; }
.bar__brand { display: inline-flex; align-items: center; gap: 11px; }
.bar__mark { width: 26px; height: 26px; }
.bar__mark svg { width: 100%; height: 100%; }
.foot__mark { width: 54px; height: 54px; margin-bottom: 18px; }
.foot__mark svg { width: 100%; height: 100%; }

@media (max-width: 920px) {
  .bs-lockup { gap: 16px; }
}
@media (max-width: 560px) {
  .bs-pbtn { width: 44px; height: 36px; }
  .bs-pick__lbl { width: 100%; margin-bottom: 2px; }
}