/* Слайдер «вайрфрейм / запущено» для страниц проектов (из прототипа 3 первого экрана). Разметка — components/ba-slider.html */
.hp-ba { margin: 0; }
.hp-ba__box { --x: 100%; position: relative; aspect-ratio: 1200 / 899; border-radius: var(--radius); overflow: hidden; background: #8E8E93; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.hp-ba__box img, .hp-ba__box svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hp-ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.hp-ba__line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); pointer-events: none; }
.hp-ba__knob { position: absolute; top: 50%; left: var(--x); display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, .15); font-size: 14px; letter-spacing: -.1em; }
.hp-ba__knob:focus-visible { outline: 2px solid var(--select); outline-offset: 2px; }
.hp-ba__tag { position: absolute; top: 12px; padding: 5px 8px; border-radius: 6px; font-size: 12px; line-height: 1; transition: opacity var(--fast) var(--ease); pointer-events: none; }
.hp-ba__tag--before { left: 12px; background: #fff; color: var(--muted); opacity: var(--tb, 1); }
.hp-ba__tag--after { right: 12px; background: rgba(24, 24, 27, .8); color: #fff; opacity: var(--ta, 1); }
.hp-ba figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: var(--text-caption); color: var(--muted); }
.hp-ba figcaption b { font-weight: 400; color: var(--ink); }
@media (max-width: 960px) { .hp-ba figcaption { flex-direction: column; gap: 2px; } }