/* ============================================================
   GEO-DOC · анимации главной · 0.1 · 15.10.2026
   Разметка — /partials/anim-*.html, поведение — /assets/anim.js.
   Цвета и шрифты — только токены geo-doc.css.
   Базовый стиль каждого элемента — конечный кадр сценария: его видно
   при prefers-reduced-motion и в режиме «статичный кадр». Кадры ключей
   описывают всю петлю; anim.js держит петлю на паузе, пока блок вне экрана.
   ============================================================ */

@property --gd-anim-n{syntax:'<integer>';inherits:false;initial-value:40}

.gd-anim{--gd-anim-t:6.5s;position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:480px;min-height:220px;padding:16px;border:1px solid var(--gd-line);border-radius:var(--gd-r-l);background:var(--gd-white);color:var(--gd-ink);font:400 13px/18px var(--gd-font);text-align:left;overflow:hidden;container-type:inline-size;-webkit-font-smoothing:antialiased}
.gd-anim,.gd-anim *,.gd-anim ::before,.gd-anim ::after{box-sizing:border-box}
.gd-anim *,.gd-anim ::before,.gd-anim ::after{animation-duration:var(--gd-anim-t);animation-timing-function:var(--gd-ease);animation-iteration-count:infinite;animation-fill-mode:both}
.gd-anim.is-paused *,.gd-anim.is-paused ::before,.gd-anim.is-paused ::after{animation-play-state:paused}
.gd-anim-still .gd-anim *,.gd-anim-still .gd-anim ::before,.gd-anim-still .gd-anim ::after{animation:none!important}
@media (prefers-reduced-motion:reduce){.gd-anim *,.gd-anim ::before,.gd-anim ::after{animation:none!important}}

/* — общее — */
.gd-anim-in{display:flex;flex-direction:column;gap:10px;min-width:0}
.gd-anim-cap{display:block;font-size:12px;line-height:16px;font-weight:500;color:var(--gd-label)}
.gd-anim-cap,.gd-anim-name,.gd-anim-sub,.gd-anim-src__v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-anim-swap{display:inline-grid}
.gd-anim-swap>*,.gd-anim-link__state>*,.gd-anim-mis__body>*{grid-area:1/1}
.gd-anim-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--gd-line);border-radius:var(--gd-r-m);background:var(--gd-white)}
.gd-anim-who{display:flex;align-items:center;gap:10px;min-width:0}
.gd-anim-who__t{display:flex;flex-direction:column;min-width:0}
.gd-anim-name{display:block;font-size:14px;line-height:18px;font-weight:700;color:var(--gd-blue-ink)}
.gd-anim-sub{display:block;font-size:12px;line-height:16px;color:var(--gd-label)}
.gd-anim .gd-slotchip{flex:none}
@container (max-width:399px){.gd-anim-name{font-size:13px}}

/* — 1 · расписание не привязано — */
.gd-anim-link .gd-anim-in{gap:0}
.gd-anim-src{position:relative;display:flex;align-items:center;gap:10px;min-height:36px;padding:0 12px;border:1px solid var(--gd-blue);border-radius:var(--gd-r-s);background:var(--gd-blue-soft);animation-name:gd-anim-l-src}
.gd-anim-src__k{flex:none;font-size:12px;color:var(--gd-label)}
.gd-anim-src__v{min-width:0;font-family:var(--gd-font-num);font-weight:700}
.gd-anim-port{position:absolute;z-index:1;left:24px;width:12px;height:12px;border:2px solid var(--gd-blue);border-radius:50%;background:var(--gd-blue)}
.gd-anim-src .gd-anim-port{bottom:-7px;animation-name:gd-anim-l-p1}
.gd-anim-wire{position:relative;height:30px}
.gd-anim-wire::before,.gd-anim-wire::after{content:"";position:absolute;left:30px;top:0;bottom:0;width:2px}
.gd-anim-wire::before{border-left:2px dashed var(--gd-line)}
.gd-anim-wire::after{background:var(--gd-blue);transform-origin:50% 0;animation-name:gd-anim-l-wire;animation-timing-function:ease-in-out}
.gd-anim-link__card{border-color:var(--gd-blue);animation-name:gd-anim-l-card}
.gd-anim-link__card .gd-anim-port{top:-7px;animation-name:gd-anim-l-p2}
.gd-anim-link__card .gd-anim-port::after{content:"";position:absolute;inset:-4px;border:2px solid var(--gd-blue);border-radius:50%;opacity:0;animation-name:gd-anim-l-ring}
.gd-anim-link__miss{color:var(--gd-error);font-weight:600;opacity:0;animation-name:gd-anim-l-out}
.gd-anim-link__hit{color:var(--gd-blue-deep);font-weight:600;animation-name:gd-anim-l-in}
.gd-anim-link__state{display:grid;align-items:center;min-height:32px}
.gd-anim-link__empty{display:flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--gd-r-s);background:var(--gd-off);font-weight:600;opacity:0;animation-name:gd-anim-l-empty}
.gd-anim-link__slots{display:flex;gap:6px;min-width:0}
.gd-anim-link__slots>*{animation-name:gd-anim-l-chip}
.gd-anim-link__slots>:nth-child(2){animation-delay:.1s}
.gd-anim-link__slots>:nth-child(3){animation-delay:.2s}
.gd-anim-link__slots>:nth-child(4){animation-delay:.3s}
.gd-anim .gd-anim-more{display:none}
@container (min-width:400px){.gd-anim .gd-anim-more{display:inline-flex}}

@keyframes gd-anim-l-src{0%,6%,96%,100%{border-color:var(--gd-line);background:var(--gd-white)}12%,88%{border-color:var(--gd-blue);background:var(--gd-blue-soft)}}
@keyframes gd-anim-l-p1{0%,6%,96%,100%{background:var(--gd-white);transform:none}11%{background:var(--gd-blue);transform:scale(1.4)}16%,88%{background:var(--gd-blue);transform:none}}
@keyframes gd-anim-l-wire{0%,14%{transform:scaleY(0);opacity:1}30%,88%{transform:scaleY(1);opacity:1}94%{transform:scaleY(1);opacity:0}95%,100%{transform:scaleY(0);opacity:0}}
@keyframes gd-anim-l-p2{0%,29%,96%,100%{border-color:var(--gd-gray);background:var(--gd-white);transform:none}32%{border-color:var(--gd-blue);background:var(--gd-blue);transform:scale(1.6)}36%,88%{border-color:var(--gd-blue);background:var(--gd-blue);transform:none}}
@keyframes gd-anim-l-ring{0%,30%{opacity:0;transform:none}31%{opacity:.9;transform:none}44%,100%{opacity:0;transform:scale(2.6)}}
@keyframes gd-anim-l-card{0%,30%,96%,100%{border-color:var(--gd-line)}34%,88%{border-color:var(--gd-blue)}}
@keyframes gd-anim-l-out{0%,30%,96%,100%{opacity:1}34%,88%{opacity:0}}
@keyframes gd-anim-l-in{0%,30%,96%,100%{opacity:0}34%,88%{opacity:1}}
@keyframes gd-anim-l-empty{0%,32%,98%,100%{opacity:1;transform:none}38%,90%{opacity:0;transform:translateY(-4px)}}
@keyframes gd-anim-l-chip{0%,37%{opacity:0;transform:translateY(6px) scale(.92)}43%,82%{opacity:1;transform:none}87%,100%{opacity:0;transform:none}}

/* — 2 · два расписания, в поиск уходит одно — */
.gd-anim-part__head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:600}
.gd-anim-num{font-family:var(--gd-font-num);font-size:32px;line-height:36px;font-weight:800;letter-spacing:-.02em;color:var(--gd-blue);font-variant-numeric:tabular-nums;transform-origin:100% 50%;counter-reset:gd-anim-n var(--gd-anim-n);animation-name:gd-anim-p-num}
.gd-anim-num::after{content:counter(gd-anim-n)}
.gd-anim-part__grps{display:flex;align-items:flex-start;padding:6px 0 30px}
.gd-anim-grp{position:relative;display:grid;gap:4px;min-width:0}
.gd-anim-grp--a{flex:3 1 0;grid-template-columns:repeat(3,minmax(0,1fr))}
.gd-anim-grp--b{flex:7 1 0;grid-template-columns:repeat(7,minmax(0,1fr));margin-left:4px;animation-name:gd-anim-p-gap}
.gd-anim-grp i{display:block;height:14px;border-radius:3px;background:var(--gd-blue)}
.gd-anim-grp--b i{animation-name:gd-anim-p-tile}
.gd-anim-grp--b i:nth-child(7n+2){animation-delay:.04s}
.gd-anim-grp--b i:nth-child(7n+3){animation-delay:.08s}
.gd-anim-grp--b i:nth-child(7n+4){animation-delay:.12s}
.gd-anim-grp--b i:nth-child(7n+5){animation-delay:.16s}
.gd-anim-grp--b i:nth-child(7n+6){animation-delay:.2s}
.gd-anim-grp--b i:nth-child(7n){animation-delay:.24s}
.gd-anim-grp--b::before{content:"";position:absolute;inset:-5px;border:1.5px dashed var(--gd-gray);border-radius:var(--gd-r-s);opacity:0;animation-name:gd-anim-p-fade}
.gd-anim-grp__tag{position:absolute;left:-5px;top:calc(100% + 10px);font-size:12px;line-height:16px;color:var(--gd-label);white-space:nowrap;opacity:0;animation-name:gd-anim-p-fade}
.gd-anim-grp__tag b{font-family:var(--gd-font-num);font-weight:800;color:var(--gd-ink)}

@keyframes gd-anim-p-num{0%,22%{--gd-anim-n:12;opacity:1;transform:none}38%{--gd-anim-n:40;transform:scale(1.12)}46%,88%{--gd-anim-n:40;opacity:1;transform:none}92%{--gd-anim-n:40;opacity:0}93%,95%{--gd-anim-n:12;opacity:0}100%{--gd-anim-n:12;opacity:1}}
@keyframes gd-anim-p-gap{0%,20%,96%,100%{margin-left:18px}36%,88%{margin-left:4px}}
@keyframes gd-anim-p-tile{0%,20%,96%,100%{opacity:.28}34%,88%{opacity:1}}
@keyframes gd-anim-p-fade{0%,20%,96%,100%{opacity:1}30%,88%{opacity:0}}

/* — 3 · МИС не ответила — */
.gd-anim-st{display:flex;align-items:center;gap:8px;font-weight:600}
.gd-anim-dot{position:relative;flex:none;width:10px;height:10px;border-radius:50%;background:var(--gd-success);animation-name:gd-anim-m-dot}
.gd-anim-dot::after{content:"";position:absolute;inset:-2px;border:2px solid var(--gd-success);border-radius:50%;opacity:0;animation-name:gd-anim-m-ring}
.gd-anim-mis__off{color:var(--gd-error);opacity:0;animation-name:gd-anim-m-out}
.gd-anim-mis__on{color:var(--gd-success-ink);animation-name:gd-anim-m-in}
.gd-anim-mis__body{display:grid;align-items:start}
.gd-anim .gd-anim-mis__alert{display:block;padding:10px 12px;font-size:13px;line-height:19px;opacity:0;animation-name:gd-anim-m-alert}
.gd-anim-mis__ok{display:flex;flex-wrap:wrap;align-items:center;gap:6px;animation-name:gd-anim-m-ok}
.gd-anim .gd-anim-mis__btn{pointer-events:none;animation-name:gd-anim-m-btn}

@keyframes gd-anim-m-dot{0%,40%,94%,100%{background:var(--gd-error)}44%,88%{background:var(--gd-success)}}
@keyframes gd-anim-m-ring{0%,5%{opacity:0;transform:none;border-color:var(--gd-error)}6%{opacity:.9;transform:none;border-color:var(--gd-error)}18%{opacity:0;transform:scale(2.6);border-color:var(--gd-error)}19%,23%{opacity:0;transform:none;border-color:var(--gd-error)}24%{opacity:.9;transform:none;border-color:var(--gd-error)}36%{opacity:0;transform:scale(2.6);border-color:var(--gd-error)}37%,42%{opacity:0;transform:none;border-color:var(--gd-success)}43%{opacity:.9;transform:none;border-color:var(--gd-success)}56%,100%{opacity:0;transform:scale(2.6);border-color:var(--gd-success)}}
@keyframes gd-anim-m-out{0%,40%,94%,100%{opacity:1}44%,88%{opacity:0}}
@keyframes gd-anim-m-in{0%,40%,94%,100%{opacity:0}44%,88%{opacity:1}}
@keyframes gd-anim-m-alert{0%,42%,97%,100%{opacity:1;transform:none}48%,91%{opacity:0;transform:translateY(-6px)}}
@keyframes gd-anim-m-ok{0%,48%,90%,100%{opacity:0;transform:translateY(6px)}55%,85%{opacity:1;transform:none}}
@keyframes gd-anim-m-btn{0%,53%{transform:scale(.9)}59%{transform:scale(1.05)}63%,100%{transform:none}}

/* — 4 · путь номерка: МИС → geo-doc → поиск → сайт — */
.gd-anim-path{--gd-anim-t:6s;max-width:960px}
.gd-anim-path__track{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.gd-anim-path__line{position:absolute;left:12.5%;right:12.5%;top:17px;height:2px;background:var(--gd-line)}
.gd-anim-path__fill{position:absolute;inset:0;background:var(--gd-blue);transform-origin:0 50%;animation-name:gd-anim-r-fx;animation-timing-function:ease-in-out}
.gd-anim-path__rail{position:absolute;z-index:2;left:0;right:0;top:18px;height:0;transform:translateX(75%);animation-name:gd-anim-r-x;animation-timing-function:ease-in-out}
.gd-anim-path__tok{position:absolute;left:12.5%;top:0;height:18px;padding:0 6px;border-radius:var(--gd-r-pill);background:var(--gd-blue);color:var(--gd-white);font:800 10px/18px var(--gd-font-num);letter-spacing:.02em;white-space:nowrap;box-shadow:var(--gd-sh-raise);transform:translate(-50%,-50%);animation-name:gd-anim-r-tok}
.gd-anim-path__node{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:0 6px;text-align:center}
.gd-anim-path__dot{position:relative;z-index:1;display:flex;flex:none;align-items:center;justify-content:center;width:36px;height:36px;border:2px solid var(--gd-blue);border-radius:50%;background:var(--gd-blue-tint);color:var(--gd-blue-deep);font:800 13px/1 var(--gd-font-num)}
.gd-anim-path__dot::after{content:"";position:absolute;inset:-2px;border:2px solid var(--gd-blue);border-radius:50%;opacity:0;animation-name:gd-anim-r-ring;animation-delay:calc(var(--k,0) * var(--gd-anim-t) * .24)}
.gd-anim-path__node:nth-of-type(1) .gd-anim-path__dot{animation-name:gd-anim-r-v1}
.gd-anim-path__node:nth-of-type(2) .gd-anim-path__dot{animation-name:gd-anim-r-v2}
.gd-anim-path__node:nth-of-type(3) .gd-anim-path__dot{animation-name:gd-anim-r-v3}
.gd-anim-path__node:nth-of-type(4) .gd-anim-path__dot{animation-name:gd-anim-r-v4}
.gd-anim-path__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.gd-anim-path__txt b{font-family:var(--gd-font-num);font-size:14px;line-height:18px;font-weight:800;color:var(--gd-blue)}
.gd-anim-path__txt span{font-size:12px;line-height:16px;color:var(--gd-graphite)}
@media (max-width:720px){
  .gd-anim-path__track{grid-template-columns:none;grid-auto-rows:1fr}
  .gd-anim-path__line{left:17px;right:auto;top:12.5%;bottom:12.5%;width:2px;height:auto}
  .gd-anim-path__fill{transform-origin:50% 0;animation-name:gd-anim-r-fy}
  .gd-anim-path__rail{left:18px;right:auto;top:0;bottom:0;width:0;height:auto;transform:translateY(75%);animation-name:gd-anim-r-y}
  .gd-anim-path__tok{left:0;top:12.5%}
  .gd-anim-path__node{flex-direction:row;gap:12px;padding:6px 0;text-align:left}
}
@container (max-width:419px){
  .gd-anim-path__track{grid-template-columns:none;grid-auto-rows:1fr}
  .gd-anim-path__line{left:17px;right:auto;top:12.5%;bottom:12.5%;width:2px;height:auto}
  .gd-anim-path__fill{transform-origin:50% 0;animation-name:gd-anim-r-fy}
  .gd-anim-path__rail{left:18px;right:auto;top:0;bottom:0;width:0;height:auto;transform:translateY(75%);animation-name:gd-anim-r-y}
  .gd-anim-path__tok{left:0;top:12.5%}
  .gd-anim-path__node{flex-direction:row;gap:12px;padding:6px 0;text-align:left}
}

@keyframes gd-anim-r-x{0%,8%{transform:none}24%,32%{transform:translateX(25%)}48%,56%{transform:translateX(50%)}72%,100%{transform:translateX(75%)}}
@keyframes gd-anim-r-y{0%,8%{transform:none}24%,32%{transform:translateY(25%)}48%,56%{transform:translateY(50%)}72%,100%{transform:translateY(75%)}}
@keyframes gd-anim-r-fx{0%,8%{transform:scaleX(0);opacity:1}24%,32%{transform:scaleX(.3333)}48%,56%{transform:scaleX(.6667)}72%,88%{transform:scaleX(1);opacity:1}94%{transform:scaleX(1);opacity:0}95%,100%{transform:scaleX(0);opacity:0}}
@keyframes gd-anim-r-fy{0%,8%{transform:scaleY(0);opacity:1}24%,32%{transform:scaleY(.3333)}48%,56%{transform:scaleY(.6667)}72%,88%{transform:scaleY(1);opacity:1}94%{transform:scaleY(1);opacity:0}95%,100%{transform:scaleY(0);opacity:0}}
@keyframes gd-anim-r-tok{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}4%,84%{opacity:1;transform:translate(-50%,-50%)}90%,100%{opacity:0;transform:translate(-50%,-50%) scale(.6)}}
@keyframes gd-anim-r-ring{0%{opacity:0;transform:none}1%{opacity:.8;transform:none}12%,100%{opacity:0;transform:scale(1.7)}}
@keyframes gd-anim-r-v1{0%,96%,100%{border-color:var(--gd-line);background:var(--gd-white);color:var(--gd-label)}2%,90%{border-color:var(--gd-blue);background:var(--gd-blue-tint);color:var(--gd-blue-deep)}}
@keyframes gd-anim-r-v2{0%,22%,96%,100%{border-color:var(--gd-line);background:var(--gd-white);color:var(--gd-label)}24%,90%{border-color:var(--gd-blue);background:var(--gd-blue-tint);color:var(--gd-blue-deep)}}
@keyframes gd-anim-r-v3{0%,46%,96%,100%{border-color:var(--gd-line);background:var(--gd-white);color:var(--gd-label)}48%,90%{border-color:var(--gd-blue);background:var(--gd-blue-tint);color:var(--gd-blue-deep)}}
@keyframes gd-anim-r-v4{0%,70%,96%,100%{border-color:var(--gd-line);background:var(--gd-white);color:var(--gd-label)}72%,90%{border-color:var(--gd-blue);background:var(--gd-blue-tint);color:var(--gd-blue-deep)}}