/* ════════════════════════════════════════════════════════════════════
   CTA — финальный экран.

   Композиция: мега-надпись по центру, под ней вордмарк, кнопка доступа
   и текст про очередь. Фон — расходящиеся кольца (как круги от сигнала)
   и два акцентных ореола, дышащих в противофазе.

   Вся геометрия декора — текучая (clamp/vmax), контейнерных width в px
   нет. Собственные циклы секции двигают только transform и opacity —
   раскладку они не трогают.
   ════════════════════════════════════════════════════════════════════ */

.s-cta {
  position: relative;
  overflow: hidden;            /* кольца заведомо больше секции — клип по краю */
  display: grid;
  align-content: center;
  text-align: center;
  min-height: min(78vh, 860px);
  min-height: min(78svh, 860px); /* адресная строка мобильного не режет экран */
}

/* ── Декоративные слои ─────────────────────────────────────────────── */

/* Точечная сетка макета, но маска — по центру: экран здесь симметричный. */
.s-cta__dots {
  z-index: 0;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 48%, #000 0%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 66% at 50% 48%, #000 0%, transparent 100%);
}

.s-cta__rings {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;       /* центрируем без transform: он занят под data-reveal */
  overflow: hidden;
  pointer-events: none;
}
.s-cta__rings > svg {
  width: min(1400px, 118vmax); /* декоративная геометрия: круги от «сигнала» */
  height: auto;
  max-width: none;             /* перебивает базовый svg { max-width: 100% } */
}

/* Кольца дышат вразнобой: фаза приходит инлайново через --ring-delay. */
@keyframes ms-cta-ring {
  0%, 100% { transform: scale(0.97); opacity: 0.55; }
  50%      { transform: scale(1.02); opacity: 1; }
}
.s-cta__ring {
  fill: none;
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: ms-cta-ring calc(6s * var(--motion)) ease-in-out infinite;
  animation-delay: calc(var(--ring-delay, 0s) * var(--motion));
}
.s-cta__ring--1 { stroke: var(--c-line); }
.s-cta__ring--2 { stroke: color-mix(in srgb, var(--c-text) 8%, transparent); }
.s-cta__ring--3 { stroke: var(--c-line-soft); }
.s-cta__ring--4 { stroke: color-mix(in srgb, var(--c-text) 4.5%, transparent); }
.s-cta__ring--5 { stroke: color-mix(in srgb, var(--c-text) 3%, transparent); }

/* Пунктирное акцентное кольцо, медленно вращающееся (класс .ms-spin). */
.s-cta__spinner {
  fill: none;
  stroke: color-mix(in srgb, var(--c-accent) 26%, transparent);
  stroke-width: 1;
  stroke-dasharray: 2 26;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
}

/* Два ореола: зелёный и лиловый, слегка разведены по горизонтали. */
.s-cta__halo {
  top: 50%;
  width: clamp(280px, 54vw, 720px);
  height: clamp(220px, 42vw, 560px);
  translate: -50% -50%;   /* отдельное свойство: transform оставлен анимациям */
}
.s-cta__halo--a { left: calc(50% - clamp(40px, 11vw, 160px)); }
.s-cta__halo--b { left: calc(50% + clamp(40px, 11vw, 160px)); }

/* ── Контент ───────────────────────────────────────────────────────── */

.s-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}

/* Мега-надпись. Вариация общего .section__title, а не его подмена:
   базовые правила берутся из layout.css, здесь — только отличия. */
.s-cta__title {
  font-size: var(--fs-xxl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
}

/* Точки — акцент. Пульсацию даёт .ms-pulse-slow из animations.css. */
.s-cta__dot {
  color: var(--c-accent);
  text-shadow: 0 0 var(--sp-6) color-mix(in srgb, var(--c-accent) 55%, transparent);
}
.s-cta__dot--alt {
  color: var(--c-accent-2);
  text-shadow: 0 0 var(--sp-6) color-mix(in srgb, var(--c-accent-2) 55%, transparent);
}

.s-cta__wordmark {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-mono);
  color: var(--c-accent);
}

.s-cta__action { margin-top: var(--sp-2); }

/* Кнопка крупнее базовой: это последний призыв на странице.
   Поля текучие — на 360px кнопка с nowrap иначе упирается в края. */
.s-cta .s-cta__btn {
  max-width: 100%;
  padding-inline: clamp(var(--sp-5), 4vw, var(--sp-7));
  font-size: var(--fs-lg);
}

.s-cta__note {
  max-width: 62ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-muted);
}