/* Матрица — общая для сайта и Mini App (web/static/matrix.js). Цвета — из переменных страницы, с запасными значениями. */
.matrix-fig{position:relative;margin:0;aspect-ratio:1;
  --m-line:var(--eye,#8FA9BC);--m-lamp:var(--lamp,#F4B45C);--m-ink:var(--lamp-ink,#241603);--m-fill:var(--room-2,#1C1F24);
  --m-text:var(--bone,#EEE7DB);--m-soft:var(--bone-soft,#B9B0A3);--m-dim:var(--bone-dim,#8E877D);--m-font:var(--sans,"Onest",system-ui,sans-serif)}
.matrix-fig svg{width:100%;height:100%;overflow:visible;display:block;-webkit-tap-highlight-color:transparent}
.matrix-fig .ln{fill:none;stroke:var(--m-line);stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.matrix-fig .ln.main{opacity:.9}
.matrix-fig .ln.dash{stroke-dasharray:14 12;opacity:.45}
.matrix-fig .glow{fill:url(#dr-glow);pointer-events:none}
.matrix-fig .dot{opacity:1;cursor:pointer;outline:none;transform-box:fill-box;transform-origin:center}  /* видны всегда, кроме постепенной сборки (.reveal) */
.matrix-fig .dot .pt{fill:var(--m-fill);stroke:rgba(143,169,188,.7);stroke-width:3;transition:fill .25s,stroke .25s,opacity .35s}
.matrix-fig .dot text{font:600 38px var(--m-font);fill:var(--m-text);text-anchor:middle;dominant-baseline:central;pointer-events:none;font-variant-numeric:tabular-nums;transition:fill .25s,opacity .35s}
.matrix-fig .dot.minor text{font-size:28px;fill:var(--m-soft)}
.matrix-fig .dot.same .pt{stroke:var(--m-lamp);stroke-width:4}
.matrix-fig .dot.same text{fill:var(--m-lamp)}
.matrix-fig .dot.center .pt{fill:var(--m-lamp);stroke:none}
.matrix-fig .dot.center text{fill:var(--m-ink);font-size:62px;font-weight:700}
.matrix-fig .dot .ring{opacity:0;transition:opacity .45s;pointer-events:none}
.matrix-fig .dot:hover .pt,.matrix-fig .dot.on-tip .pt{stroke:var(--m-text);stroke-width:4}
/* возрастной круг */
.matrix-fig .agelbl{font:500 24px var(--m-font);fill:var(--m-dim);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.matrix-fig .dot.age .pt{fill:var(--m-line);stroke:none}
.matrix-fig .dot.age .hit{fill:transparent}
.matrix-fig .dot.age text{font-size:30px;font-weight:600;fill:var(--m-soft)}
.matrix-fig .dot.age.now .pt{fill:var(--m-lamp)}
.matrix-fig .dot.age.now text{fill:var(--m-lamp)}
.matrix-fig .dot.age:hover .pt,.matrix-fig .dot.age.on-tip .pt{fill:var(--m-text);stroke:none}
.matrix-fig .dot.age:hover text,.matrix-fig .dot.age.on-tip text{fill:var(--m-text)}
/* подсказка ожидания (hot) и точки сферы (lit) — ореол лампы */
.matrix-fig .dot.hot .ring,.matrix-fig .dot.lit .ring{opacity:1;animation:dr-breathe 2.4s ease-in-out infinite}
.matrix-fig .dot.hot .pt,.matrix-fig .dot.lit .pt{stroke:var(--m-lamp);stroke-width:4}
/* зона: её точки горят, остальное притушено */
.matrix-fig.zoned .dot:not(.in-zone):not(.center) .pt,.matrix-fig.zoned .dot:not(.in-zone):not(.center) text{opacity:.28}
.matrix-fig.zoned .ln{opacity:.3;transition:opacity .35s}
.matrix-fig.zoned .dot.in-zone .ring{opacity:1}
.matrix-fig.zoned .dot.in-zone .pt{stroke:var(--m-lamp);stroke-width:5}
/* постепенная сборка: точки скрыты, пока их не покажут; show(..., drop) — всплывают */
.matrix-fig.reveal .dot:not(.age):not(.on){opacity:0}
.matrix-fig .dot.drop{animation:dr-drop .75s cubic-bezier(.3,.7,.3,1) both}
/* первая отрисовка: линии чертятся, точки появляются, центр загорается последним */
.matrix-fig.draw .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:dr-draw 1.3s cubic-bezier(.16,1,.3,1) forwards}
.matrix-fig.draw .ln.dash{stroke-dasharray:none;stroke-dashoffset:0;opacity:0;animation:dr-fade .6s ease forwards}
.matrix-fig.draw:not(.reveal) .dot{opacity:0;animation:dr-pop .5s cubic-bezier(.16,1,.3,1) forwards}
.matrix-fig.draw.reveal .dot.age{opacity:0;animation:dr-pop .5s cubic-bezier(.16,1,.3,1) forwards}
.matrix-fig.draw .glow{opacity:0;animation:dr-fade 1.2s ease-out forwards}
@keyframes dr-draw{to{stroke-dashoffset:0}}
@keyframes dr-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes dr-fade{to{opacity:1}}
@keyframes dr-drop{0%{opacity:0;transform:scale(2.4)}55%{opacity:1;transform:scale(.92)}78%{transform:scale(1.05)}100%{opacity:1;transform:none}}
@keyframes dr-breathe{50%{opacity:.65}}
/* подсказка при касании */
.matrix-tip{position:absolute;z-index:3;width:max-content;max-width:260px;padding:10px 14px;border-radius:12px;background:#EEE7DB;color:#15171B;
  font:14px/1.4 var(--m-font);box-shadow:0 12px 30px -8px rgba(0,0,0,.6);transform:translate(-50%,calc(-100% - 14px));pointer-events:none;text-align:left}
.matrix-tip b{display:block;font-size:15px;font-weight:650}
.matrix-tip .arc{display:block;margin:1px 0 8px;font-size:13px;color:#8a4f0c;font-weight:600}
.matrix-tip .pm{display:block;font-size:14px;line-height:1.35;color:#1e1c19}
.matrix-tip .pm+.pm{margin-top:6px}
.matrix-tip .pm i{display:block;font-style:normal;font-size:11px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:#4f7a52}
.matrix-tip .pm.minus i{color:#a3483a}
.matrix-tip[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .matrix-fig.draw .ln{animation:none;stroke-dashoffset:0}
  .matrix-fig.draw .dot,.matrix-fig.draw .glow,.matrix-fig .dot.drop{animation:none;opacity:1}
  .matrix-fig .dot.hot .ring,.matrix-fig .dot.lit .ring{animation:none}
}