/* Делоскоп — «Глубина и свет» (vizual-v1, часть А, 17.10.2026).
   Подключает tests/sobrat_shapku.py на всех страницах последним стилем — поэтому переопределяет токены ds.css.
   Один главный эффект на экран: фон дышит еле заметно, тени глубже, стекло — у шапки и примера отчёта.
   Фон двигаем только transform (без filter:blur на весь экран — мягкость дают сами радиальные пятна,
   телефон не греется); зерно — простой слой с прозрачностью, без mix-blend-mode. */
:root{
 --shadow:0 1px 1px rgba(29,29,31,.03),0 8px 24px rgba(29,29,31,.06),0 32px 64px -24px rgba(29,29,31,.10);
 --shadow-hover:0 1px 1px rgba(29,29,31,.04),0 10px 30px rgba(29,29,31,.075),0 40px 80px -24px rgba(29,29,31,.125)
}
body::before{content:"";position:fixed;z-index:-2;inset:-12%;pointer-events:none;
 background:radial-gradient(42% 38% at 22% 18%,rgba(234,241,253,.95),rgba(234,241,253,0) 70%),
  radial-gradient(38% 34% at 82% 64%,rgba(243,239,230,.95),rgba(243,239,230,0) 70%);
 opacity:.9;animation:dyhanie 18s ease-in-out infinite alternate;will-change:transform}
body::after{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;opacity:.035;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23z)'/%3E%3C/svg%3E")}
@keyframes dyhanie{from{transform:translate3d(-2%,-1.5%,0)}to{transform:translate3d(2%,1.5%,0)}}

/* тени в три слоя; подъём при наведении — только там, где есть мышь */
.card,.report.ex,.vhod,.pr-gl a,.osn-card{box-shadow:var(--shadow)}
.report{box-shadow:var(--shadow)}
.search,.check{box-shadow:var(--shadow)}
.card,.report.ex,.vhod,.pr-gl a,.search,.check{transition:box-shadow var(--slow,240ms) var(--ease,cubic-bezier(.2,.7,.2,1)),transform var(--slow,240ms) var(--ease,cubic-bezier(.2,.7,.2,1)),border-color .2s}
@media (hover:hover){
 .card:hover,.report.ex:hover,.vhod:hover,.pr-gl a:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
 .search:hover,.check:hover{box-shadow:var(--shadow-hover)}
 .search:focus-within,.check:focus-within{box-shadow:var(--shadow-hover),0 0 0 3px var(--accent,#0B63E5)}
}

/* shapka-plotnee-v1: при 72 % текст полосы и страницы читался сквозь шапку (просвет 14–17 из 255). 94 % фона темы с размытием —
   просвет не больше 3; 94 % без размытия — 14, поэтому размытие оставлено. */
/* стекло: шапка после 8 px прокрутки (класс ставит shapka.js) и пример отчёта на главной */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .shapka.is-scrolled{background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);border-bottom-color:rgba(29,29,31,.06)}
 .report.ex{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.6)}
 @media (hover:hover){.report.ex:hover{box-shadow:var(--shadow-hover),inset 0 0 0 1px rgba(255,255,255,.6)}}
 /* vizual-v3.1b: пока ждём ответ (и при заходе по адресу отчёта) стекло снимаем — Chromium считает границы блока с backdrop-filter
    шире самого блока, и смена примера на отчёт засчитывалась сдвигом вёрстки (CLS 0,17–0,39). Видно не будет: пример в это время приглушён. */
 .report.ex.loading,.rezhim-otcheta .report.ex{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ===== «Живой Индекс» (часть Б): кольцо 1–99 в перспективе. Разметку ставит /js/zhivoj-indeks.js ===== */
@property --p{syntax:'<number>';inherits:true;initial-value:0}
.zhi{--zona-cvet:var(--ok,#16723F);--d:132px;display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.zhi[data-zona=warn]{--zona-cvet:var(--warn,#9A5B00)}
.zhi[data-zona=high]{--zona-cvet:var(--high,#C2410C)}
.zhi[data-zona=bad]{--zona-cvet:var(--bad,#B3261E)}
.zhi__scena{position:relative;width:var(--d);height:var(--d);perspective:900px}
.zhi__kolco{position:absolute;inset:0;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform 600ms var(--ease,cubic-bezier(.2,.7,.2,1));border-radius:50%}
.zhi__fon,.zhi__duga{position:absolute;inset:0;border-radius:50%;-webkit-mask:radial-gradient(farthest-side,transparent 79%,#000 80%);mask:radial-gradient(farthest-side,transparent 79%,#000 80%)}
/* шкала-дуга 270° (снизу слева → снизу справа); зоны методики v1: 1–29, 30–49, 50–69, 70–99 — доли от 75 % круга */
.zhi__fon{opacity:.28;background:conic-gradient(from 225deg,var(--bad,#B3261E) 0 22%,var(--high,#C2410C) 0 37.1%,var(--warn,#9A5B00) 0 52.3%,var(--ok,#16723F) 0 75%,transparent 0)}
.zhi__duga{background:conic-gradient(from 225deg,var(--zona-cvet) calc(var(--p)*.7576%),transparent 0)}
.zhi__svet{position:absolute;inset:8%;border-radius:50%;box-shadow:0 0 40px -10px var(--zona-cvet);opacity:.35;transform:translateZ(-1px)}
.zhi__strelka{position:absolute;left:50%;top:50%;width:2px;height:50%;margin-left:-1px;transform-origin:50% 0;transform:rotate(calc(45deg + var(--p)*2.7273deg));pointer-events:none}
.zhi__strelka::after{content:"";position:absolute;left:-3px;bottom:-1px;width:8px;height:8px;border-radius:50%;background:var(--ink,#1D1D1F);box-shadow:0 0 0 3px #fff}
.zhi__chislo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:calc(var(--d)*.34);font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--ink,#1D1D1F);font-variant-numeric:tabular-nums;transform:translateZ(24px)}
.zhi__chislo small{font-size:.32em;font-weight:500;color:var(--muted,#6B6B70);margin-left:2px}
.zhi__pod::before{content:"Индекс Делоскопа · 1–99"}
/* пример (компания вымышленная): вместо числа — знак зоны цветом зоны */
.ex-ix .zhi__chislo::before{content:"";width:30%;height:30%;background:var(--zona-cvet);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.zhi__pod{font-size:12px;color:var(--ink-2,#48484C);white-space:nowrap}
.zhi.is-idet{transition:--p 1.2s var(--ease,cubic-bezier(.2,.7,.2,1))}
/* пример на главной: кольцо сверху колонки; на 390 — слева от «Уровень риска» */
.ex-ix .zhi{align-self:flex-start;--d:120px}
/* vizual-v3.1c: кольцо примера лежит в разметке; без JS (нет класса est-js из <head> главной) — сразу до базы методики */
html:not(.est-js) .ex-ix .zhi{--p:72}
@media (max-width:720px){.ex-ix .zhi{--d:96px;flex-basis:100%;flex-direction:row;gap:14px}.ex-ix .zhi__pod{white-space:normal}}
/* отчёт: число Индекса переезжает в центр кольца (тот же узел — текст отчёта не меняется) */
.ot-ix .zhi{--d:168px;align-self:flex-start;margin:4px 0}
.ot-ix .zhi .ot-ix__big{font-size:48px;line-height:1}
.ot-ix .zhi .ot-ix__big small{font-size:15px}
.ot-ix--zhi .ot-ix__sh{display:none}
@media (max-width:860px){.ot-ix--zhi{align-items:center}.ot-ix .zhi{--d:132px;align-self:center}.ot-ix .zhi .ot-ix__big{font-size:32px}}

/* ===== Сборка при прокрутке (часть В): классы ставит /js/zhivoj-indeks.js; без JS всё видно сразу ===== */
@supports (animation-timeline:view()){
 .sobir{animation:vstat both linear;animation-timeline:view();animation-range:entry calc(var(--i,0)*6%) entry calc(60% + var(--i,0)*6%)}
}
@keyframes vstat{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
.zhi-io .sobir{transition:opacity .6s var(--ease,cubic-bezier(.2,.7,.2,1)),transform .6s var(--ease,cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--i,0)*60ms)}
.zhi-io .sobir:not(.is-vidno){opacity:0;transform:translateY(24px) scale(.985)}

/* запасные пути */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.report.ex{background:#fff}}
@media (prefers-reduced-motion:reduce){
 body::before{animation:none;transform:none}
 .card,.report.ex,.vhod,.pr-gl a,.search,.check{transition:none}
 .card:hover,.report.ex:hover,.vhod:hover,.pr-gl a:hover{transform:none}
 .zhi__kolco{transition:none;transform:none}
 .zhi.is-idet{transition:none}
 .sobir,.zhi-io .sobir,.zhi-io .sobir:not(.is-vidno){animation:none;transition:none;opacity:1;transform:none}
}
@media print{body::before,body::after{display:none}.report.ex{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}