/* ==========================================================================
   acx-dial42b.css — вариант 4.2b: циферблат контуров, шильдики бликуют
   Система «Автоцентр» на 1С / «Систематика»
   --------------------------------------------------------------------------
   Идея: не карточки и не «камень», а приборная шкала. Кольцо из пяти секторов,
   на кольце — горизонтальные шильдики разделов, вписанные в тот же металл.
   Двигается только свет и тень: сам блок и кольцо стоят на месте.

   Отличие от 4.0: шильдики не просто лежат на металле — они бликуют вместе с
   кольцом. Пока блик кольца идёт мимо шильдика, по шильдику едет полоса света,
   а сам он разгорается и гаснет: свет у блока один, и металл один.

   Чего здесь СОЗНАТЕЛЬНО нет:
     * ни одного :hover на кольце и на шильдиках — это декорация, не меню;
     * ни одной кнопки внутри — весь блок это одна ссылка <a>;
     * ни рисок, ни поворотов кольца — только игра света и тени.

   Что можно крутить под себя:
     --acxd-lang   — угол блика кольца (пишет скрипт);
     --acxd-lit и --acxd-lsx — блик на шильдике (пишет скрипт);
     LABEL_W/LABEL_TRAVEL в acx-dial42b.js — размер окна отклика шильдика
     и размах хода полосы по нему.
   ========================================================================== */

.acxd {
  /* --- палитра сайта ------------------------------------------------- */
  --acxd-accent: #ef7c3e;
  --acxd-accent-dark: #e76c29;
  --acxd-brown: #933605;
  --acxd-cream: #fff9eb;
  --acxd-cream-2: #fdf3df;
  --acxd-ink: #333333;
  --acxd-ink-soft: #6f6459;

  /* --- состояние: эти переменные пишет скрипт ------------------------ */
  --acxd-lang: 200deg;      /* направление света (для conic-gradient) */
  --acxd-light: .95;        /* яркость блика */
  --acxd-shx: 0px;          /* тень под кольцом */
  --acxd-shy: 18px;
  --acxd-px: 0px;           /* параллакс фонового декора */
  --acxd-py: 0px;
  --acxd-mx: 50%;           /* световое пятно на фоне */
  --acxd-my: 40%;

  /* --- производные ---------------------------------------------------- */
  --acxd-radius: 24px;
  --acxd-font: "Montserrat", "Segoe UI", system-ui, -apple-system,
                "Helvetica Neue", Arial, sans-serif;

  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  padding: clamp(22px, 2.8vw, 44px) clamp(16px, 2.4vw, 34px) clamp(20px, 2.6vw, 40px);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: var(--acxd-radius);
  background:
    radial-gradient(120% 130% at 50% -20%, #ffffff 0%, var(--acxd-cream) 42%, var(--acxd-cream-2) 100%);
  box-shadow: 0 30px 70px -36px rgba(109, 39, 4, .42),
              0 8px 22px -14px rgba(109, 39, 4, .24);
  color: var(--acxd-ink);
  font-family: var(--acxd-font);
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.acxd *,
.acxd *::before,
.acxd *::after { box-sizing: border-box; }

.acxd:focus { outline: none; }

.acxd:focus-visible {
  outline: 3px solid rgba(239, 124, 62, .55);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Декор фона
   -------------------------------------------------------------------------- */

.acxd__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.acxd__glow {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(48px);
  opacity: .5;
  transform: translate3d(calc(var(--acxd-px) * var(--k, 1)),
                         calc(var(--acxd-py) * var(--k, 1)), 0);
  will-change: transform;
}

.acxd__glow--1 {
  --k: 2.6;
  left: -6%; top: -12%;
  width: 46%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(239, 124, 62, .5), rgba(239, 124, 62, 0) 68%);
}

.acxd__glow--2 {
  --k: 2.0;
  right: -8%; top: 2%;
  width: 42%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(214, 166, 88, .5), rgba(214, 166, 88, 0) 68%);
}

.acxd__glow--3 {
  --k: 3.0;
  left: 22%; bottom: -24%;
  width: 54%; aspect-ratio: 1.4;
  background: radial-gradient(circle, rgba(147, 54, 5, .22), rgba(147, 54, 5, 0) 70%);
}

.acxd__grid {
  position: absolute;
  inset: -10%;
  display: block;
  opacity: .5;
  background-image:
    linear-gradient(to right, rgba(147, 54, 5, .10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(147, 54, 5, .10) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(70% 65% at var(--acxd-mx) var(--acxd-my),
              #000 0%, rgba(0, 0, 0, .3) 46%, transparent 78%);
          mask-image: radial-gradient(70% 65% at var(--acxd-mx) var(--acxd-my),
              #000 0%, rgba(0, 0, 0, .3) 46%, transparent 78%);
  transform: translate3d(calc(var(--acxd-px) * -1.2), calc(var(--acxd-py) * -1.2), 0);
  will-change: transform, mask-image;
}

.acxd__spot {
  position: absolute;
  inset: 0;
  display: block;
  background: radial-gradient(32% 34% at var(--acxd-mx) var(--acxd-my),
              rgba(255, 255, 255, .85) 0%,
              rgba(255, 244, 222, .45) 44%,
              rgba(255, 244, 222, 0) 74%);
  mix-blend-mode: soft-light;
}

/* --------------------------------------------------------------------------
   Шапка блока
   -------------------------------------------------------------------------- */

.acxd__head {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 660px;
  margin: 0 auto clamp(4px, 1vw, 14px);
  text-align: center;
}

.acxd__eyebrow {
  display: block;
  margin: 0 0 8px;
  font-size: clamp(11px, .95vw, 13px);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acxd-accent-dark);
}

.acxd__title {
  display: block;
  margin: 0 0 8px;
  font-size: clamp(23px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--acxd-brown);
  /* тень заголовка уезжает туда же, куда и тень кольца: свет один на весь блок */
  text-shadow: calc(var(--acxd-shx) * .18) calc(var(--acxd-shy) * .16) 0 rgba(239, 124, 62, .22);
}

.acxd__lead {
  display: block;
  margin: 0 auto;
  max-width: 520px;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.5;
  color: var(--acxd-ink-soft);
}

/* --------------------------------------------------------------------------
   Сцена: кольцо-циферблат. Стоит на месте — двигается только свет.
   -------------------------------------------------------------------------- */

.acxd__stage {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 540px);
  margin: clamp(2px, .8vw, 10px) auto 0;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
}

/* мягкая тень: всегда с противоположной от света стороны */
.acxd__shadow {
  position: absolute;
  left: 50%;
  top: 83%;
  z-index: 0;
  display: block;
  width: 42%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(109, 39, 4, .34), rgba(109, 39, 4, 0) 72%);
  filter: blur(10px);
  transform: translate(-50%, -50%) translate(var(--acxd-shx), var(--acxd-shy));
  will-change: transform;
}

/* Слой кольца. Позиция статична: ни поворота, ни сдвига. */
.acxd__tilt {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}

/* --- тело кольца: внешний радиус 46%, внутренний 29% --------------------- */

.acxd__band {
  position: absolute;
  inset: 4%;
  display: block;
  border-radius: 50%;
  -webkit-mask: radial-gradient(closest-side, #0000 61%, #000 61.4%);
          mask: radial-gradient(closest-side, #0000 61%, #000 61.4%);
  will-change: transform;
}

/* база: металл. Пять секторов читаются сменой тона, радиальный градиент
   даёт округлость — канты темнее середины, как у трубы. */
.acxd__band-base {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  background:
    radial-gradient(closest-side,
      rgba(255, 236, 206, .34) 61.4%,
      rgba(255, 255, 255, 0) 74%,
      rgba(46, 14, 0, .34) 94%,
      rgba(46, 14, 0, .52) 100%),
    conic-gradient(from -90deg,
      #c05a22 0deg, #c96328 62deg,
      #b3501d 72deg, #d2732e 134deg,
      #ab4a1a 144deg, #c46226 206deg,
      #a34315 216deg, #cc6c2b 278deg,
      #b55520 288deg, #bc5a22 350deg,
      #c05a22 360deg);
}

/* блик: узкое горячее ядро + холодный контрблик с другой стороны.
   screen складывает свет с металлом — это честный блик, а не «покраска». */
.acxd__band-light {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  opacity: var(--acxd-light);
  background:
    conic-gradient(from calc(var(--acxd-lang) - 20deg),
      rgba(255, 255, 255, 0) 0deg,
      rgba(255, 231, 194, .26) 10deg,
      rgba(255, 251, 242, .95) 20deg,
      rgba(255, 229, 190, .26) 32deg,
      rgba(255, 255, 255, 0) 56deg),
    conic-gradient(from calc(var(--acxd-lang) + 146deg),
      rgba(255, 255, 255, 0) 0deg,
      rgba(255, 222, 186, .24) 16deg,
      rgba(255, 255, 255, 0) 48deg);
  mix-blend-mode: screen;
}

/* затемнение: уезжает в сторону, обратную свету */
.acxd__band::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  background:
    conic-gradient(from calc(var(--acxd-lang) - 10deg),
      rgba(255, 255, 255, 0) 0deg,
      rgba(80, 26, 0, .16) 70deg,
      rgba(64, 20, 0, .30) 145deg,
      rgba(80, 26, 0, .16) 220deg,
      rgba(255, 255, 255, 0) 300deg,
      rgba(255, 255, 255, 0) 360deg);
}

/* --- центр: светлое поле. Светло — значит, читается ----------------------- */

.acxd__disc {
  position: absolute;
  inset: 21%;
  z-index: 1;
  display: block;
  border-radius: 50%;
  background:
    radial-gradient(closest-side,
      #fffdf8 0%, #fdf5e6 58%, #f7e6c8 86%, #eddab7 100%);
  box-shadow:
    inset calc(var(--acxd-shx) * .65) calc(var(--acxd-shy) * .55) 30px -14px rgba(109, 39, 4, .38),
    inset 0 12px 24px -12px rgba(109, 39, 4, .34),
    inset 0 -8px 18px -12px rgba(109, 39, 4, .22),
    0 0 0 1px rgba(147, 54, 5, .14);
}

/* Скользящий отсвет внутри поля — реагирует на направление света. */
.acxd__disc::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  background:
    conic-gradient(from calc(var(--acxd-lang) + 6deg),
      rgba(255, 255, 255, 0) 0deg,
      rgba(255, 232, 198, .55) 30deg,
      rgba(255, 255, 255, 0) 86deg);
  -webkit-mask: radial-gradient(closest-side, #0000 78%, #000 100%);
          mask: radial-gradient(closest-side, #0000 78%, #000 100%);
}

/* --- канты кольца --------------------------------------------------------- */

.acxd__edge {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.acxd__edge--out {
  inset: 3.4%;
  border: 1.5px solid rgba(255, 240, 216, .55);
  box-shadow:
    0 0 0 .5px rgba(109, 39, 4, .18),
    0 14px 26px -14px rgba(109, 39, 4, .55);
}

.acxd__edge--in {
  inset: 20.4%;
  border: 1px solid rgba(147, 54, 5, .16);
  box-shadow:
    0 0 0 .5px rgba(255, 240, 216, .55),
    inset 0 0 12px -4px rgba(147, 54, 5, .22);
}

/* --- центр: не подпись раздела, а «марка» прибора ------------------------ */

.acxd__core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: block;
  width: 42%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.acxd__mark {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 22px;
  margin-bottom: 6px;
}

.acxd__mark i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffc48c, var(--acxd-accent-dark));
  opacity: .95;
}

.acxd__mark i:nth-child(1) { height: 9px; }
.acxd__mark i:nth-child(2) { height: 20px; }
.acxd__mark i:nth-child(3) { height: 13px; }

.acxd__core-name {
  display: block;
  font-size: clamp(11px, 2.6cqw, 18px);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acxd-brown);
}

.acxd__core-sub {
  display: block;
  margin-top: 3px;
  font-size: clamp(8.5px, 1.8cqw, 12.5px);
  letter-spacing: .04em;
  color: var(--acxd-ink-soft);
}

/* --------------------------------------------------------------------------
   Шильдики разделов: горизонтальные, лежат НА кольце.
   Фон — тот же металл, что и кольцо, поэтому они читаются как его часть.
   Наведения нет: это декорация.
   -------------------------------------------------------------------------- */

.acxd__label {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: block;
  margin: 0;
  padding: .42em 1.05em;
  border-radius: 999px;
  /* --x / --y задаёт скрипт: точка на средней линии кольца */
  transform: translate(-50%, -50%);
  font-size: clamp(9.5px, 2.15cqw, 13.5px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #3f1400;
  background: linear-gradient(180deg, #eda464 0%, #d47a33 46%, #b9591d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 234, 204, .8),
    inset 0 -2px 3px rgba(74, 24, 0, .32),
    0 2px 6px -2px rgba(74, 24, 0, .45);
  text-shadow: 0 1px 0 rgba(255, 214, 170, .35);
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
  will-change: left, top;
  /* Полоса блика уезжает за край шильдика — обрезаем по скруглению. */
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Блик на шильдике: тот же свет, что идёт по кольцу.
   Шильдик горизонтальный, свет скользит по нему слева направо — значит, блик
   это вертикальная полоса, которая едет вдоль шильдика. Скрипт пишет две
   переменные:
     --acxd-lit — насколько шильдик сейчас поймал свет, 0..1;
     --acxd-lsx — сдвиг полосы, в % ширины шильдика: 0 — середина,
                  ±50 — край, дальше полосу срезает скругление шильдика.

   Полоса лежит ПОД текстом (::before с z-index: -1): свет ложится на металл и
   на надпись не попадает. Иначе на пике блика буквы выцветают в белое — а это
   название раздела, его читают.
   screen складывает свет с металлом: получается подсветка, а не покраска.
   -------------------------------------------------------------------------- */

.acxd__label::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
  opacity: var(--acxd-lit, 0);
  /* Узкое горячее ядро и мягкие «усы»: полоса, а не заливка. */
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 244, 222, .12) 26%,
      rgba(255, 252, 246, .55) 39%,
      rgba(255, 255, 255, .98) 50%,
      rgba(255, 252, 246, .55) 61%,
      rgba(255, 244, 222, .12) 74%,
      rgba(255, 255, 255, 0) 100%);
  /* Полоса идёт по всей высоте шильдика и гаснет только у самых краёв:
     металл круглый, но свет режет его насквозь. */
  -webkit-mask-image: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0%, #000 22%, #000 78%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0%, #000 22%, #000 78%, rgba(0, 0, 0, 0) 100%);
  transform: translateX(calc(var(--acxd-lsx, 0) * 1%));
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   Приглашение: блок — ссылка
   -------------------------------------------------------------------------- */

.acxd__cue {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: max-content;
  max-width: 100%;
  margin: clamp(10px, 1.8vw, 22px) auto 0;
  padding: 9px 18px;
  border: 1px solid rgba(147, 54, 5, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 600;
  color: var(--acxd-brown);
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

/* .acxd__cue {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: max-content;
  max-width: 100%;
  margin: clamp(10px, 1.8vw, 22px) auto 0;
  padding: 9px 18px;
  border: 1px solid rgba(147, 54, 5, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 600;
  color: var(--acxd-brown);
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
} */

.acxd__cue-arrow {
  position: relative;
  display: block;
  width: 16px;
  height: 8px;
}

.acxd__cue-arrow::before,
.acxd__cue-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  display: block;
  background: var(--acxd-accent-dark);
}

.acxd__cue-arrow::before {
  left: 0; right: 3px; height: 1.5px;
  transform: translateY(-50%);
}

.acxd__cue-arrow::after {
  right: 0; width: 6px; height: 6px;
  border-top: 1.5px solid var(--acxd-accent-dark);
  border-right: 1.5px solid var(--acxd-accent-dark);
  background: none;
  transform: translateY(-50%) rotate(45deg);
}

/* Единственный :hover — на приглашении: это честная подсказка «блок — ссылка».
   Кольцо и шильдики на наведение не реагируют. */
.acxd:hover .acxd__cue {
  background: rgba(255, 255, 255, .95);
  border-color: rgba(239, 124, 62, .45);
  /* transform: translateY(-1px); */
}

.acxd:hover .acxd__cue-arrow { animation: acxd-nudge .6s ease-in-out infinite alternate; }

@keyframes acxd-nudge {
  from { transform: translateX(0); }
  to   { transform: translateX(3px); }
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

@media (max-width: 1023px) {
  .acxd { --acxd-radius: 18px; }
}

@media (max-width: 760px) {
  .acxd {
    --acxd-radius: 16px;
    padding: 18px 14px 20px;
  }

  .acxd__title { font-size: clamp(20px, 6.2vw, 27px); }
  .acxd__lead { font-size: 12.5px; }

  .acxd__glow { filter: blur(34px); opacity: .42; }
  .acxd__grid { background-size: 40px 40px; opacity: .38; }
  .acxd__spot { display: none; }

  .acxd__stage { width: 100%; max-width: 340px; }

  /* Шильдики остаются на кольце и на телефоне: только компактнее. */
  .acxd__label {
    font-size: clamp(8.5px, 2.45cqw, 12px);
    padding: .40em .9em;
    letter-spacing: .06em;
  }

  .acxd__disc { inset: 22%; }
  .acxd__edge--in { inset: 21.4%; }
}

@media (max-width: 400px) {
  .acxd__label {
    font-size: clamp(8px, 2.6cqw, 10.5px);
    padding: .38em .8em;
    letter-spacing: .04em;
  }

  .acxd__cue { padding: 8px 14px; }
}

/* ==========================================================================
   Доступность и системные предпочтения
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .acxd__glow,
  .acxd__grid { transform: none !important; }

  .acxd__spot { display: none; }

  .acxd:hover .acxd__cue { transform: none; }
  .acxd:hover .acxd__cue-arrow { animation: none; }
}