/* Направление «Пульс» — живые данные.
   Одна фирменная деталь: линия пульса. Она проходит под шапкой, бьётся в герое на каждый новый чек,
   рисует прогресс показа решения; окно приложения едва заметно «дышит» в такт.
   Всё остальное спокойно: Playfair Display в заголовках, Montserrat в тексте, цифры — JetBrains Mono.
   Цвета — только токены темы, поэтому одинаково точно в Пергаменте и в Ночи.
   Эффекты на JS — assets/js/fx/puls.js. */

[data-dir="puls"] {
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --display-w: 600;
  --display-track: -0.015em;
  --display-lh: 1.06;
  --display-scale: .9;
  --hero-scale: .96;
  --eyebrow-track: .16em;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --pl-line: color-mix(in srgb, var(--text) 16%, transparent);
  --pl-hair: color-mix(in srgb, var(--line) 80%, transparent);
}
[data-dir="puls"][data-mode="light"] {
  --shadow: 0 1px 2px rgba(49, 43, 36, .04), 0 10px 26px -18px rgba(49, 43, 36, .22);
  --shadow-lg: 0 34px 70px -38px rgba(49, 43, 36, .38), 0 1px 3px rgba(49, 43, 36, .05);
}

/* ── Типографика ───────────────────────────────────────────────── */
[data-dir="puls"] .display em,
[data-dir="puls"] .svc-s em,
[data-dir="puls"] .pain-after em { font-style: italic; }
[data-dir="puls"] .eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; }
[data-dir="puls"] .eyebrow .ic { width: 15px; height: 15px; }
[data-dir="puls"] .hero-title,
[data-dir="puls"] .sec-title,
[data-dir="puls"] .cover-title,
[data-dir="puls"] .slide-title,
[data-dir="puls"] .final-title { text-wrap: balance; }

/* цифры — моноширинным, табличными: читаются как показания прибора.
   Внутри окна приложения не трогаем: моноширинный шире и распирает узкие плитки демо. */
[data-dir="puls"] .kpi-v:not(.app *),
[data-dir="puls"] .plate-v,
[data-dir="puls"] .mp-v:not(.app *),
[data-dir="puls"] .case-count,
[data-dir="puls"] .step-n,
[data-dir="puls"] .pain-n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
[data-dir="puls"] .kpi-v:not(.app *) { font-weight: 600; font-size: 20px; }
[data-dir="puls"] .plate-v { font-weight: 500; font-size: 28px; line-height: 1.1; }
[data-dir="puls"] .mp-v:not(.app *) { font-weight: 600; }
[data-dir="puls"] .kpi-l:not(.app *),
[data-dir="puls"] .plate-l,
[data-dir="puls"] .hp-label { font-family: var(--font-mono); font-weight: 500; letter-spacing: .1em; }

/* ── Поверхности: тонкие линии, мало тени ──────────────────────── */
[data-dir="puls"] .card,
[data-dir="puls"] .kpi { box-shadow: none; border-color: var(--pl-hair); }
[data-dir="puls"] .glass { box-shadow: var(--shadow); }
[data-dir="puls"] .sec-alt { background: var(--bg-2); border-top: 1px solid var(--pl-hair); border-bottom: 1px solid var(--pl-hair); }
[data-dir="puls"] .btn-pri { box-shadow: 0 8px 22px -12px var(--glow); }

/* ── Шапка: её нижняя граница — живая кардиограмма (fx: .pl-ecg) ── */
[data-dir="puls"] .top { border-bottom-color: transparent; }
[data-dir="puls"] .pl-ecg {
  position: absolute; left: 0; right: 0; bottom: -7px; height: 22px;
  pointer-events: none; z-index: 1;
}
[data-dir="puls"] .pl-ecg canvas { display: block; width: 100%; height: 100%; }

/* ── Главная ───────────────────────────────────────────────────── */
[data-dir="puls"] .hero-pulse { display: none; }               /* заменена живой линией */
[data-dir="puls"] .hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 78% 42%, var(--glow), transparent 70%);
  opacity: .55;
}
[data-dir="puls"] .pl-hero {
  position: absolute; left: 0; right: 0; bottom: 18px; height: 150px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
[data-dir="puls"] .pl-hero canvas { display: block; width: 100%; height: 100%; }
[data-dir="puls"] .hero-plates .plate { border-radius: var(--radius); }
[data-dir="puls"] .hero-plates .plate-v[data-profit] { color: var(--ok); }
[data-dir="puls"] .plate.pl-tick { animation: pl-tick .9s cubic-bezier(.2, .7, .2, 1); }
@keyframes pl-tick {
  0% { box-shadow: var(--shadow), 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  100% { box-shadow: var(--shadow), 0 0 0 10px transparent; }
}
[data-dir="puls"] .step-n { font-size: 15px; font-weight: 600; color: var(--accent); margin-bottom: 18px; }
[data-dir="puls"] .step-n::after {
  content: ""; display: block; height: 14px; margin-top: 10px; width: 64px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 14'%3E%3Cpath d='M0 9h24l3-1 3-7 4 12 3-6 3 2h24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 64px 14px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 14'%3E%3Cpath d='M0 9h24l3-1 3-7 4 12 3-6 3 2h24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 64px 14px;
  opacity: .7;
}
[data-dir="puls"] .cc-prev { border-color: var(--pl-hair); }

/* ── Страницы решения ──────────────────────────────────────────── */
[data-dir="puls"] .case-nav { background: var(--bg); border-bottom-color: var(--pl-hair); }
[data-dir="puls"] .cn-item.on { box-shadow: none; }
[data-dir="puls"] .plate { border-radius: var(--radius); }

/* прогресс показа — линия пульса (fx: .pl-prog); полоски остаются невидимыми мишенями для нажатий */
[data-dir="puls"] .case-prog { position: relative; height: 28px; align-items: stretch; gap: 0; }
[data-dir="puls"] .case-prog a { height: auto; border-radius: 0; background: transparent !important; position: relative; z-index: 2; }
[data-dir="puls"] .case-prog a:hover::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: var(--accent); opacity: .5;
}
[data-dir="puls"] .pl-prog { position: absolute; inset: 0; pointer-events: none; }
[data-dir="puls"] .pl-prog svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
[data-dir="puls"] .pl-prog path { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
[data-dir="puls"] .pl-prog-base path { stroke: var(--pl-line); }
[data-dir="puls"] .pl-prog-on { position: absolute; inset: 0; clip-path: inset(-6px calc(100% - var(--pl-p, 0%)) -6px 0); transition: clip-path .7s cubic-bezier(.2, .7, .2, 1); }
[data-dir="puls"] .pl-prog-on path { stroke: var(--accent); stroke-width: 2; }
[data-dir="puls"] .pl-prog-dot {
  position: absolute; top: 64.3%; left: var(--pl-p, 0%); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 12px var(--glow);
  transition: left .7s cubic-bezier(.2, .7, .2, 1);
}

/* окно приложения «дышит»: мягкое свечение за рамкой в такт пульсу шапки (fx ставит .pl-breath) */
[data-dir="puls"] .slide-device { position: relative; }
[data-dir="puls"] .slide-device::before {
  content: ""; position: absolute; inset: -1px; border-radius: calc(var(--radius-lg) + 1px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 38px 4px var(--glow);
  opacity: 0; pointer-events: none; transition: opacity 1.6s ease-out;
}
[data-dir="puls"] .slide-device.pl-breath::before { opacity: .9; transition-duration: .35s; }
[data-dir="puls"] .slide-device > .app { position: relative; }
[data-dir="puls"] .app { border-color: var(--pl-hair); }
[data-dir="puls"] .app-live { font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; }

/* итог */
[data-dir="puls"] .outcome { box-shadow: none; }
[data-dir="puls"] .outcome-i { background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }

@media (max-width: 600px) {
  [data-dir="puls"] .pl-hero { height: 110px; bottom: 8px; }
  [data-dir="puls"] .plate-v { font-size: 24px; }
  [data-dir="puls"] .pl-ecg { bottom: -6px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-dir="puls"] .slide-device::before { transition: none; }
}