/* teamdash · экран загрузки и заготовки экранов — по образцу курьерки GORBA.
   Контейнер и классы на <html> (splash-on, app-ready, splash-slow, splash-upd) — те же,
   что у курьерки (их CSS в gorba.css); картинки свои, про графики:
   сетка заполняется → две клетки меняются местами → часы доходят до 21:00, вечер закрыт.
   Каждая сцена — 2 с, по кругу; движение только transform/opacity и рисование линий. */

.splash{background:var(--bg)}
.splash-seq{width:176px;height:112px}
body.td-desk .splash-seq{width:240px;height:152px}
body.td-desk .splash-vis{transform:scale(1.36)}
.splash-it.td-spl-swap{animation-delay:2s}
.splash-it.td-spl-eve{animation-delay:4s}
.splash-sub{display:block!important}
body.td-desk .splash-name{font-size:26px}
/* подпись сцены меняется вместе с картинкой */
.td-spl-caps{position:relative;height:20px;margin-top:10px;width:260px}
.td-spl-cap{position:absolute;inset:0;font-size:13.5px;font-weight:600;color:var(--dim);opacity:0;animation:splashSeq 6s linear infinite}
.td-spl-cap:nth-child(2){animation-delay:2s}
.td-spl-cap:nth-child(3){animation-delay:4s}
.td-spl-note{margin-top:8px;font-size:13px;color:var(--accent-ink,var(--accent));min-height:18px}
.td-spl-note:empty{display:none}
html.splash-upd .td-spl-caps{display:none}

/* 1. сетка: клетки появляются по очереди, как раскладка 4/1 */
.td-sg-c{transform-box:fill-box;transform-origin:center;opacity:0;animation:tdSgPop 2s var(--td-spring,cubic-bezier(.34,1.32,.5,1)) infinite;animation-delay:calc(var(--i) * 70ms)}
.td-sg-t{font-family:var(--mono);font-size:10px;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none}
@keyframes tdSgPop{0%{opacity:0;transform:scale(.4)}10%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(1)}}

/* 2. перестановка: «В» и «21» меняются местами по дуге, затем галочка */
.td-ss-a{animation:tdSsA 2s cubic-bezier(.6,0,.3,1) infinite}
.td-ss-b{animation:tdSsB 2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes tdSsA{0%,18%{transform:none;opacity:1}55%,86%{transform:translate(72px,0);opacity:1}36%{transform:translate(36px,-18px)}100%{transform:translate(72px,0);opacity:0}}
@keyframes tdSsB{0%,18%{transform:none;opacity:1}55%,86%{transform:translate(-72px,0);opacity:1}36%{transform:translate(-36px,18px)}100%{transform:translate(-72px,0);opacity:0}}
.td-ss-arr{fill:none;stroke:var(--dim2);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:.0;animation:tdSsArr 2s ease infinite}
@keyframes tdSsArr{0%{opacity:0}10%,40%{opacity:1}55%,100%{opacity:0}}
.td-ss-okbg{fill:var(--green-t);transform-box:fill-box;transform-origin:center;animation:tdSsOkBg 2s ease infinite}
.td-ss-ok{fill:none;stroke:var(--green);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;animation:tdSsOk 2s ease infinite}
@keyframes tdSsOkBg{0%,52%{transform:scale(.3);opacity:0}64%,88%{transform:scale(1);opacity:1}100%{opacity:0}}
@keyframes tdSsOk{0%,58%{stroke-dashoffset:100}76%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}

/* 3. вечер: стрелка идёт к 21:00 (три четверти круга), справа отмечаются авто, вело, вело */
.td-se-track{fill:none;stroke:var(--line);stroke-width:6}
.td-se-arc{fill:none;stroke:var(--gs-p,#9900FF);stroke-width:6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-box:fill-box;transform-origin:center;animation:tdSeArc 2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes tdSeArc{0%{stroke-dashoffset:100}55%,90%{stroke-dashoffset:25}100%{stroke-dashoffset:25;opacity:0}}
.td-se-hand{stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;transform-box:view-box;transform-origin:50px 56px;animation:tdSeHand 2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes tdSeHand{0%{transform:rotate(0)}55%,100%{transform:rotate(270deg)}}
.td-se-hub{fill:var(--ink)}
.td-se-pill{opacity:0;transform-box:fill-box;transform-origin:left center;animation:tdSePill 2s var(--td-spring,cubic-bezier(.34,1.32,.5,1)) infinite;animation-delay:calc(var(--i) * 140ms + 700ms)}
.td-se-pill rect{fill:var(--green-t);stroke:var(--green);stroke-width:1.2}
.td-se-pill text{font-size:10px;font-weight:700;fill:var(--green);dominant-baseline:central}
@keyframes tdSePill{0%{opacity:0;transform:translateX(-6px)}12%{opacity:1;transform:none}70%{opacity:1}82%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  /* без смены картинок: одна сетка, уже заполненная */
  .splash-it.td-spl-grid,.td-spl-cap:first-child{opacity:1;animation:none}
  .splash-it.td-spl-swap,.splash-it.td-spl-eve,.td-spl-cap:not(:first-child){display:none}
  .td-sg-c{opacity:1;animation:none}
}

/* ── заготовка экрана, пока «грузятся» данные месяца или локации ── */
.td-skel{display:flex;flex-direction:column;gap:12px}
.td-sk{position:relative;overflow:hidden;background:var(--row);border-radius:var(--r-card)}
.td-sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--panel) 70%,transparent),transparent);animation:tdShim 1.15s ease-in-out infinite}
@keyframes tdShim{to{transform:translateX(100%)}}
.td-sk-hero{height:190px;border-radius:var(--r-sheet);background:color-mix(in srgb,var(--td-hero) 85%,var(--row))}
.td-sk-top{display:flex;flex-direction:column;gap:12px}
body.td-desk .td-sk-top{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(340px,1fr);gap:16px}
body.td-desk .td-sk-hero{height:300px}
.td-sk-side{display:none;height:300px}
body.td-desk .td-sk-side{display:block}
.td-sk-grid{display:grid;grid-template-columns:var(--td-name,96px) repeat(var(--cols),minmax(0,1fr));gap:4px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card)}
body.td-desk .td-sk-grid{grid-template-columns:200px repeat(var(--cols),minmax(0,1fr));gap:5px;padding:16px}
.td-sk-grid .td-sk{height:30px;border-radius:8px}
body.td-desk .td-sk-grid .td-sk{height:40px}
.td-sk-grid .td-sk.nm{border-radius:6px;height:14px;align-self:center;width:70%}
.td-sk-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body.td-desk .td-sk-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
.td-sk-kpis .td-sk{height:96px}
.td-sk-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
body.td-desk .td-sk-cards{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
.td-sk-cards .td-sk{height:300px}
@media (prefers-reduced-motion:reduce){ .td-sk::after{animation:none;display:none} }
/* заготовки контрастнее подложки в обеих темах; картинки крупнее на компьютере */
.td-sk{background:color-mix(in srgb,var(--ink) 7%,var(--panel))}
.td-sk-side{border:1px solid var(--line)}
body.td-desk .splash-seq{width:290px;height:184px}
body.td-desk .splash-vis{transform:scale(1.6)}
body.td-desk .splash-name{margin-top:28px}
/* пока первый экран не готов — пустой каркас не показываем, только фон и (после 0,4 с) экран загрузки */
html:not(.app-ready) #app{visibility:hidden}
/* без JavaScript каркас всё же виден — там сообщение noscript */