/* ============================================================
   Фон, не зависящий от раскрытия, и выдвижение пункта как книги.
   Включается атрибутом data-kniga="on" на <html>.
   ============================================================ */

/* ---------- 1. ФОН БОЛЬШЕ НЕ «ПРИБЛИЖАЕТСЯ» ----------
   Было: слой со снимком занимал раздел целиком (inset:0). Раскрыли
   список — раздел стал вдвое выше, и cover растянул снимок скачком
   в 1,73 раза. Отсюда и наезд, и падение чёткости.
   Стало: высота слоя задана и не зависит от содержимого. Масштаб
   снимка постоянный, при раскрытии вообще ничего не двигается. */
html[data-kniga="on"] .section-services::after{
  inset: auto;
  left: 0; right: 0; top: 0;
  height: clamp(640px, 82vh, 1040px);
  background-position: center top;
}
html[data-kniga="on"] .section-team::after{
  height: clamp(300px, 46vh, 520px);   /* было 52% от высоты раздела */
}

/* ---------- 2. ПУНКТ ВЫДВИГАЕТСЯ, КАК КНИГА С ПОЛКИ ---------- */
html[data-kniga="on"] .acc-trigger,
html[data-kniga="on"] .svc-acc-trigger{
  position: relative;
  transition: transform .44s cubic-bezier(.22,.74,.26,1),
              box-shadow .44s cubic-bezier(.22,.74,.26,1),
              background .3s;
  will-change: transform;
}
/* корешок: тонкая золотая кромка, появляется слева при выдвижении */
html[data-kniga="on"] .acc-trigger::before,
html[data-kniga="on"] .svc-acc-trigger::before{
  content: '';
  position: absolute;
  left: -20px; top: 10%; bottom: 10%;
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), rgba(var(--gold-rgb), .2));
  opacity: 0;
  transform: scaleY(.5);
  transform-origin: 50% 50%;
  transition: opacity .34s, transform .44s cubic-bezier(.22,.74,.26,1);
}
/* сам сдвиг и тень — будто том вынули из плотного ряда */
html[data-kniga="on"] .acc-item.open > .acc-trigger,
html[data-kniga="on"] .svc-acc-item.open > .svc-acc-trigger{
  transform: translateX(20px);
  box-shadow: -16px 0 30px -12px rgba(var(--scrim-rgb), .75);
}
html[data-kniga="on"] .acc-item.open > .acc-trigger::before,
html[data-kniga="on"] .svc-acc-item.open > .svc-acc-trigger::before{
  opacity: 1;
  transform: none;
}
/* при наведении том чуть выступает — видно, что его можно вынуть */
html[data-kniga="on"] .acc-item:not(.open) > .acc-trigger:hover,
html[data-kniga="on"] .svc-acc-item:not(.open) > .svc-acc-trigger:hover{
  transform: translateX(7px);
}
/* содержимое выезжает следом за корешком */
html[data-kniga="on"] .acc-body,
html[data-kniga="on"] .svc-acc-body{
  transition: max-height .44s cubic-bezier(.22,.74,.26,1),
              transform .44s cubic-bezier(.22,.74,.26,1),
              opacity .34s;
  transform: translateX(0);
  opacity: .4;
}
html[data-kniga="on"] .acc-item.open > .acc-body,
html[data-kniga="on"] .svc-acc-item.open > .svc-acc-body{
  transform: translateX(20px);
  opacity: 1;
}

@media (max-width: 700px){
  /* на узком экране сдвигаем меньше — иначе текст упирается в край */
  html[data-kniga="on"] .acc-item.open > .acc-trigger,
  html[data-kniga="on"] .svc-acc-item.open > .svc-acc-trigger{ transform: translateX(11px); }
  html[data-kniga="on"] .acc-item.open > .acc-body,
  html[data-kniga="on"] .svc-acc-item.open > .svc-acc-body{ transform: translateX(11px); }
  html[data-kniga="on"] .acc-trigger::before,
  html[data-kniga="on"] .svc-acc-trigger::before{ left: -11px; }
  html[data-kniga="on"] .section-services::after{ height: clamp(420px, 58vh, 680px); }
}

/* уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce){
  html[data-kniga="on"] .acc-trigger,
  html[data-kniga="on"] .svc-acc-trigger,
  html[data-kniga="on"] .acc-body,
  html[data-kniga="on"] .svc-acc-body{ transition-duration: .01ms !important; }
}

/* ---------- переключатель показа ---------- */
.kn-ui{position:fixed;left:16px;bottom:16px;z-index:600;display:flex;flex-direction:column;gap:7px;
  padding:12px;border-radius:14px;background:rgba(4,12,22,.93);border:1px solid rgba(var(--text-rgb),.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.9);font-family:var(--f-body)}
.kn-ui b{font-family:var(--f-display);font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(var(--text-rgb),.4);margin-bottom:2px}
.kn-ui button{display:block;width:100%;text-align:left;cursor:pointer;padding:9px 13px;border-radius:9px;
  border:1px solid rgba(var(--text-rgb),.12);background:none;color:rgba(var(--text-rgb),.72);
  font:inherit;font-size:13px;transition:background .2s,border-color .2s,color .2s}
.kn-ui button:hover{color:var(--text);border-color:rgba(var(--text-rgb),.3)}
.kn-ui button.on{background:rgba(var(--accent-rgb),.18);border-color:var(--accent);color:var(--accent-hi)}
@media (max-width:900px){.kn-ui{left:10px;bottom:10px;padding:9px}.kn-ui button{font-size:12px;padding:8px 10px}}