/* focustrack · приёмы оформления: кнопка-сфера, наклон карточки, отклики на действие, светящиеся линии, шары ожидания,
   появление блоков, постер живого фона. Ни одного цвета значением — только переменные из css/variables.css и css/theme-dark.css;
   цвета приёмов — производные, поэтому смена основных в профиле перекрашивает всё здесь без правки этого файла.
   Подключается после css/fonts.css. Характер движения сдержанный: кривые без перелёта и отскока. */

/* ══ Живой фон: постер — запасной вид без холста ══ */
.qb-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; background: var(--bg-poster); pointer-events: none; }

/* ══ Кнопка-сфера: тело — небо сверху и тьма снизу, кромка по Френелю светлеет к краям, пятно идёт по границе ══ */
.btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-height); padding: 0 var(--space-4); border: var(--border-regular) solid transparent; border-radius: var(--radius-control);
  font-family: var(--font-text); font-size: var(--font-size-4); font-weight: var(--weight-medium); line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-rise) var(--motion-ease-rise), box-shadow var(--motion-normal) var(--motion-ease-rise), filter var(--motion-normal) var(--motion-ease-rise);
}
.btn-primary { color: var(--fb-primary-ink); box-shadow: 0 0 0 var(--border-thin) var(--action-primary-edge), var(--fb-shadow-rest);
  background: linear-gradient(180deg, var(--fb-primary-body-top) 0%, var(--fb-primary-body) 46%, var(--fb-primary-body-bottom) 100%) padding-box,
              linear-gradient(180deg, var(--fb-primary-rim) 0%, var(--fb-primary-rim-mid) 38%, var(--fb-primary-rim-mid) 62%, var(--fb-primary-rim) 100%) border-box; }
.btn-danger { color: var(--fb-danger-ink); box-shadow: var(--fb-shadow-rest);
  background: linear-gradient(180deg, var(--fb-danger-body-top) 0%, var(--fb-danger-body) 46%, var(--fb-danger-body-bottom) 100%) padding-box,
              linear-gradient(180deg, var(--fb-danger-rim) 0%, var(--fb-danger-rim-mid) 38%, var(--fb-danger-rim-mid) 62%, var(--fb-danger-rim) 100%) border-box; }
.btn-secondary { color: var(--fb-secondary-ink); box-shadow: var(--fb-shadow-secondary-rest);
  background: linear-gradient(180deg, var(--fb-secondary-body-top) 0%, var(--fb-secondary-body) 46%, var(--fb-secondary-body-bottom) 100%) padding-box,
              linear-gradient(180deg, var(--fb-secondary-rim) 0%, var(--fb-secondary-rim-mid) 38%, var(--fb-secondary-rim-mid) 62%, var(--fb-secondary-rim) 100%) border-box; }
/* блик под надписью: z-index −1 внутри isolation — поверх тела, под текстом */
.btn-primary::before, .btn-danger::before, .btn-secondary::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; background: radial-gradient(72% 120% at 28% -12%, var(--fb-glint), transparent 62%); }
.btn-secondary::before { background: radial-gradient(72% 120% at 28% -12%, var(--fb-glint-cool), transparent 62%); }
/* пятно по кромке: путь — граница самой кнопки; overflow не обрезаем */
@supports (offset-path: border-box) {
  .btn-primary::after, .btn-danger::after, .btn-secondary::after {
    content: ""; position: absolute; left: 0; top: 0; width: var(--fb-spot-size); height: var(--fb-spot-size); border-radius: 50%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, var(--fb-spot), transparent); opacity: var(--fb-spot-opacity);
    offset-path: border-box; offset-rotate: 0deg; offset-distance: 0%; transition: opacity var(--motion-normal) var(--motion-ease-fade);
    animation: fb-rim-travel var(--fb-spot-lap) linear infinite;
  }
  @keyframes fb-rim-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
  .btn:hover:not(:disabled)::after, [data-fb-state="hover"] .btn:not(:disabled)::after { opacity: 0; }
  .btn:disabled::after { animation: none; opacity: .3; }
}
.btn-primary:hover:not(:disabled), [data-fb-state="hover"] .btn-primary:not(:disabled) {
  transform: translateY(-1px); box-shadow: 0 0 0 var(--border-thin) var(--action-primary-edge), var(--fb-shadow-hover), 0 0 24px -6px var(--fb-glow-primary);
  background: linear-gradient(180deg, var(--fb-primary-body-hover-top) 0%, var(--fb-primary-body-hover) 46%, var(--fb-primary-body-hover-bottom) 100%) padding-box,
              linear-gradient(180deg, var(--fb-primary-rim-hover) 0%, var(--fb-primary-rim-mid) 38%, var(--fb-primary-rim-mid) 62%, var(--fb-primary-rim-hover) 100%) border-box; }
.btn-primary:active:not(:disabled), [data-fb-state="active"] .btn-primary:not(:disabled) {
  transform: translateY(1px) scale(.986); box-shadow: 0 0 0 var(--border-thin) var(--action-primary-edge), var(--fb-shadow-active); transition-duration: var(--motion-fall); transition-timing-function: var(--motion-ease-fall);
  background: linear-gradient(180deg, var(--fb-primary-body-active-top) 0%, var(--fb-primary-body-active) 50%, var(--fb-primary-body-active-bottom) 100%) padding-box,
              linear-gradient(180deg, var(--fb-primary-rim-active) 0%, var(--fb-primary-rim-mid) 40%, var(--fb-primary-rim-mid) 60%, var(--fb-primary-rim-active) 100%) border-box; }
.btn-danger:hover:not(:disabled), [data-fb-state="hover"] .btn-danger:not(:disabled) {
  transform: translateY(-1px); box-shadow: var(--fb-shadow-hover), 0 0 24px -6px var(--fb-glow-danger);
  background: linear-gradient(180deg, var(--fb-danger-body-hover-top) 0%, var(--fb-danger-body-hover) 46%, var(--fb-danger-body-hover-bottom) 100%) padding-box,
              linear-gradient(180deg, var(--fb-danger-rim-hover) 0%, var(--fb-danger-rim-mid) 38%, var(--fb-danger-rim-mid) 62%, var(--fb-danger-rim-hover) 100%) border-box; }
.btn-danger:active:not(:disabled), [data-fb-state="active"] .btn-danger:not(:disabled) {
  transform: translateY(1px) scale(.986); box-shadow: var(--fb-shadow-active); transition-duration: var(--motion-fall); transition-timing-function: var(--motion-ease-fall);
  background: linear-gradient(180deg, var(--fb-danger-body-active-top) 0%, var(--fb-danger-body-active) 50%, var(--fb-danger-body-active-bottom) 100%) padding-box,
              linear-gradient(180deg, var(--fb-danger-rim-active) 0%, var(--fb-danger-rim-mid) 40%, var(--fb-danger-rim-mid) 60%, var(--fb-danger-rim-active) 100%) border-box; }
/* второстепенная — собственные правила наведения и нажатия, иначе её перекрасит основная палитра */
.btn-secondary:hover:not(:disabled), [data-fb-state="hover"] .btn-secondary:not(:disabled) {
  transform: translateY(-1px); box-shadow: var(--fb-shadow-hover), 0 0 18px -6px var(--fb-glow-secondary);
  background: linear-gradient(180deg, var(--fb-secondary-body-hover-top) 0%, var(--fb-secondary-body-hover) 46%, var(--fb-secondary-body-hover-bottom) 100%) padding-box,
              linear-gradient(180deg, var(--fb-secondary-rim-hover) 0%, var(--fb-secondary-rim-mid) 38%, var(--fb-secondary-rim-mid) 62%, var(--fb-secondary-rim-hover) 100%) border-box; }
.btn-secondary:active:not(:disabled), [data-fb-state="active"] .btn-secondary:not(:disabled) {
  transform: translateY(1px) scale(.986); box-shadow: var(--fb-shadow-active); transition-duration: var(--motion-fall); transition-timing-function: var(--motion-ease-fall);
  background: linear-gradient(180deg, var(--fb-secondary-body-active-top) 0%, var(--fb-secondary-body-active) 50%, var(--fb-secondary-body-active-bottom) 100%) padding-box,
              linear-gradient(180deg, var(--fb-secondary-rim-active) 0%, var(--fb-secondary-rim-mid) 40%, var(--fb-secondary-rim-mid) 60%, var(--fb-secondary-rim-active) 100%) border-box; }
.btn:focus-visible, [data-fb-state="focus"] .btn:not(:disabled) { outline: var(--border-strong) solid var(--border-focus); outline-offset: 2px; }
.btn:disabled, [data-fb-state="disabled"] .btn { opacity: .45; filter: saturate(.5); transform: none; cursor: not-allowed; }
/* ожидание: шары вместо надписи, ширина не меняется */
.btn.is-busy { color: transparent; pointer-events: none; }
.btn.is-busy::after { display: none; }
.btn .am-orbs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
.btn-primary .am-orbs > i::before, .btn-danger .am-orbs > i::before { background: var(--action-primary-text); }
.btn-secondary .am-orbs > i::before { background: var(--text-primary); }
.btn .am-orbs > i:nth-of-type(2)::before { background: var(--brand-accent); }

/* ══ Шары ожидания: движется псевдоэлемент, сам узел стоит ══ */
.am-orbs { display: inline-flex; gap: 5px; pointer-events: none; }
.am-orbs > i { position: relative; width: var(--am-orb); height: var(--am-orb); }
.am-orbs > i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: am-breathe 1.5s ease-in-out infinite; }
.am-orbs > i:nth-of-type(2)::before { animation-delay: -1.3s; }
.am-orbs > i:nth-of-type(3)::before { animation-delay: -1.1s; }
@keyframes am-breathe { 0%, 100% { transform: scale(.6); opacity: .45; } 50% { transform: scale(1); opacity: 1; } }

/* ══ Светящиеся линии: перелив — сдвиг фона на размер фона, стык без шва ══ */
.gl-underline { display: block; height: var(--gl-thin); background-image: linear-gradient(90deg, var(--gl-ramp)); background-size: 200% 100%; animation: gl-slide var(--gl-speed) linear infinite; }
@keyframes gl-slide { to { background-position: -200% 0; } }
.gl-shimmer { position: relative; display: block; height: 2px; border-radius: 1px; background: var(--gl-track); overflow: hidden; }
.gl-shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--gl-beam), transparent); animation: gl-sweep 4s ease-in-out infinite; }
@keyframes gl-sweep { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

/* ══ Наклон карточки: перспектива на родителе, переход — только на возврат, блик слабый ══ */
.tc-stage { perspective: var(--tc-perspective); }
.tc-card { position: relative; overflow: hidden; --tc-x: .5; --tc-y: .5; transform-origin: 50% 50%;
  --tc-transform: rotateX(calc((var(--tc-y) - .5) * var(--tc-tilt) * 2)) rotateY(calc((var(--tc-x) - .5) * var(--tc-tilt) * -2));
  --tc-dx: calc((.5 - var(--tc-x)) * var(--tc-shadow)); --tc-dy: calc((.5 - var(--tc-y)) * var(--tc-shadow));
  transform: var(--tc-transform); transition: transform 0s, box-shadow 0s; }
.tc-card[data-tc-active], .tc-card.is-hover { will-change: transform; box-shadow: var(--tc-dx) var(--tc-dy) 28px -8px var(--tc-shadow-color), 0 1px 2px var(--tc-shadow-contact); }
.tc-card.is-hover { --tc-x: .78; --tc-y: .3; }
.tc-card:not([data-tc-active]) { transition: transform var(--tc-return) var(--uf-ease), box-shadow var(--tc-return) var(--uf-ease); }
.tc-glare { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(45% 60% at calc(var(--tc-x) * 100%) calc(var(--tc-y) * 100%), var(--tc-glare-color), transparent 60%); }
.tc-card:focus-visible, .tc-card:focus-within { transform: none; }
@media (hover: none) { .tc-card:not(.is-hover) { transform: none; } .tc-card:not(.is-hover) .tc-glare { display: none; } }

/* ══ Отклики на действие ══ */
.uf-ring { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; color: var(--uf-ring); }
.uf-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.uf-ring circle { fill: none; stroke-width: 8; }
.uf-ring .uf-ring-track { stroke: var(--border-divider); }
.uf-ring .uf-ring-value { stroke: currentColor; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--uf-value, 1) * 100); transition: stroke-dashoffset .8s var(--uf-ease); }
.uf-count { font-variant-numeric: tabular-nums; }
.uf-skeleton { display: grid; gap: 6px; width: 100%; }
.uf-skeleton > i { position: relative; display: block; height: 10px; border-radius: var(--radius-sm); background: var(--uf-track); overflow: hidden; }
.uf-skeleton > i:nth-child(2) { width: 72%; }
.uf-skeleton > i:nth-child(3) { width: 48%; }
.uf-skeleton > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--uf-beam), transparent); animation: uf-sweep 1.6s linear infinite; }
@keyframes uf-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.uf-tip { position: relative; }
.uf-tip > .uf-tip-body { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 6px); opacity: 0; pointer-events: none; white-space: nowrap; border-radius: var(--radius-sm); padding: 3px 9px; font-family: var(--font-text); font-size: var(--font-size-2); font-weight: var(--weight-regular); line-height: 1.5; background: var(--uf-tip-bg); color: var(--uf-tip-ink); z-index: 4;
  transition: opacity .16s var(--motion-ease-fade), transform .16s var(--motion-ease-enter); }
.uf-tip:hover > .uf-tip-body, .uf-tip:focus-within > .uf-tip-body, .uf-tip.is-open > .uf-tip-body { opacity: 1; transform: translate(-50%, 0); transition-delay: .35s; }
.uf-tip.is-open > .uf-tip-body { transition-delay: 0s; }
.uf-ripple { position: relative; overflow: hidden; }
.uf-ripple-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--uf-ripple); transform: translate(-50%, -50%) scale(0); pointer-events: none; animation: uf-ripple .7s ease-out forwards; }
@keyframes uf-ripple { to { transform: translate(-50%, -50%) scale(18); opacity: 0; } }
.uf-acc > .uf-acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--uf-ease); }
.uf-acc[open] > .uf-acc-body { grid-template-rows: 1fr; }
.uf-acc > .uf-acc-body > * { overflow: hidden; min-height: 0; }
.uf-shake[data-uf-shake] { animation: uf-shake .5s ease-in-out; }
@keyframes uf-shake { 0%, 100% { transform: none; } 15% { transform: translateX(-7px); } 35% { transform: translateX(6px); } 55% { transform: translateX(-4px); } 75% { transform: translateX(3px); } 90% { transform: translateX(-1px); } }
.uf-pulse { position: relative; display: inline-grid; place-items: center; }
.uf-pulse::before, .uf-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: uf-pulse 2.2s ease-out infinite; }
.uf-pulse::after { animation-delay: -1.1s; }
@keyframes uf-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(2.4); opacity: 0; } }

/* ══ Появление блоков: один раз, каскад не длиннее 600 мс ══ */
.er-up { animation: er-in var(--er-time) var(--uf-ease) both; animation-delay: calc(var(--er-i, 0) * 60ms); }
@keyframes er-in { from { opacity: 0; transform: translateY(var(--er-rise)); } to { opacity: 1; transform: none; } }

/* ══ Просьба уменьшить движение: «*» не покрывает псевдоэлементы — они перечислены явно ══ */
@media (prefers-reduced-motion: reduce) {
  .btn::before, .btn::after, .gl-underline, .gl-shimmer::after, .uf-skeleton > i::after, .uf-pulse::before, .uf-pulse::after, .uf-ripple-dot, .uf-shake[data-uf-shake], .er-up { animation: none !important; transition: none !important; }
  .am-orbs > i::before { animation: none !important; transform: scale(.85); opacity: .8; }
  .btn, .uf-acc > .uf-acc-body, .uf-tip > .uf-tip-body, .uf-ring .uf-ring-value { transition: none !important; }
  .tc-card { transform: none !important; transition: none !important; }
}