/* ═══════════════════════════════════════════════════════════════════════════
   PixelDesk Kit «Воздух» · Живой интерфейс · v3 · 2026-10-10
   Подключать сразу ПОСЛЕ kit.css (и motion.js — сразу после kit.js). Только движение и свет: размеры,
   цвета и раскладку kit не меняет. Принцип — «не навязчиво, но живо»:
   короткие (120–420 мс) мягкие переходы, свет только от бренд-синего.
   На касании (hover:none) и при «уменьшить движение» — тихий режим.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --pd-m-press:.97;                       /* сжатие при нажатии */
  --pd-m-in:420ms;                        /* появление */
  --pd-m-ease-out:cubic-bezier(.16,1,.3,1);
  /* №5 (15.10): плитка не поднимается и кадр не приближается; дымку за курсором заменило пятно на точечной сетке (kit.css §30) */
}

/* ───────────── 1. Свет за курсором ─────────────
   Пятно под курсором на точечной сетке — kit.css §30 (.pd-bg/.pd-spots), двигает его motion.js (только transform).
   Под открытым окном задачи и листами пятно гаснет — смотрим ролик, а не эффект (строка закреплена тестом): */
body.pd-lock .pd-spots,html.pd-has-viewer .pd-spots{opacity:0}

/* ───────────── 2. Блик на рамках у курсора ─────────────
   motion.js вставляет <i class="pd-rim"> в карточки и ставит --pd-lx/--pd-ly
   (координаты курсора внутри) и --pd-ro (0…1 — насколько курсор близко).
   Светится только кант 1px (маска), сам кадр не подкрашивается. */
html.pd-scrolling .pd-rim{opacity:0!important;transition:opacity .12s}
.pd-rim{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:7;padding:1px;
  opacity:var(--pd-ro,0);transition:opacity .35s var(--pd-ease);
  background:radial-gradient(var(--pd-rr,220px) circle at var(--pd-lx,-999px) var(--pd-ly,-999px),rgba(140,205,255,.80),rgba(8,102,255,.38) 38%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* Поверхности (док, карточки, KPI) — ещё и еле заметная заливка светом изнутри */
.pd-rim--fill::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(420px circle at var(--pd-lx,-999px) var(--pd-ly,-999px),rgba(59,139,255,.07),transparent 60%);
  -webkit-mask:none;mask:none}
.pd-rim--fill{padding:0;-webkit-mask:none;mask:none;background:none}
.pd-rim--fill::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:radial-gradient(var(--pd-rr,260px) circle at var(--pd-lx,-999px) var(--pd-ly,-999px),rgba(140,205,255,.80),rgba(8,102,255,.38) 38%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* ───────────── 3. Отклик на наведение и нажатие ───────────── */
.pd-btn,.pd-go,.pd-chip,.pd-iconbtn,.pd-filter,.pd-seg__btn,.pd-nav__item,.pd-thumb,.pd-ref,.pd-modelcard{
  transition:background-color var(--pd-t) var(--pd-ease),color var(--pd-t) var(--pd-ease),
    box-shadow var(--pd-t) var(--pd-ease),transform var(--pd-t-fast) var(--pd-ease),opacity var(--pd-t) var(--pd-ease)}
.pd-btn:active:not(:disabled):not(.is-disabled),.pd-go:active:not(:disabled):not(.is-blocked),.pd-chip:active,
.pd-iconbtn:active,.pd-filter:active,.pd-seg__btn:active,.pd-thumb:active{transform:scale(var(--pd-m-press))}
.pd-nav__item:active{transform:scale(.985)}
.pd-nav__item>.pd-i{transition:color var(--pd-t) var(--pd-ease),transform var(--pd-t) var(--pd-m-ease-out)}
.pd-nav__item:hover>.pd-i{transform:translateX(1px) scale(1.06)}

/* Главная кнопка: свет усиливается, по ней пробегает один блик */
.pd-go{overflow:hidden;isolation:isolate}
.pd-go:hover:not(:disabled):not(.is-blocked){box-shadow:var(--pd-glow-hi)}
.pd-go::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 66%);
  transform:translateX(-120%)}
.pd-go:hover:not(:disabled):not(.is-blocked)::after{transform:translateX(120%);transition:transform .9s var(--pd-m-ease-out)}

/* Плитка (№5, b2 .tile:hover): без подъёма, приближения и свечения — только рамка ступенью светлее (kit.css §13).
   Нажатие — лёгкое сжатие */
.pd-poster{transition:transform .12s var(--pd-ease)}
.pd-tile:active .pd-poster{transform:scale(.99)}
.pd-tile__ov{transition:opacity var(--pd-t) var(--pd-ease)}
.pd-tile__acts>*{transform:translateY(6px);opacity:0;transition:transform .3s var(--pd-m-ease-out),opacity .25s var(--pd-ease)}
.pd-tile:hover .pd-tile__acts>*,.pd-tile:focus-within .pd-tile__acts>*,.pd-tile.is-hover .pd-tile__acts>*{transform:none;opacity:1}
.pd-tile:hover .pd-tile__acts>*:nth-child(2){transition-delay:30ms}
.pd-tile:hover .pd-tile__acts>*:nth-child(3){transition-delay:60ms}
.pd-tile__play{transition:background-color var(--pd-t)}

/* Док оживает, когда в нём пишут — тень фокуса в kit.css §30, без перехода (анимация тени — перерисовка стекла каждый кадр) */

/* ───────────── 4. Появление ─────────────
   motion.js ставит .pd-in и --pd-i (порядковый номер, до 12) плиткам, дням,
   карточкам — первый экран проявляется волной, дальше мягко появляются только
   новые плитки (перерисовка с теми же плитками не мигает). */
.pd-in{animation:pd-rise var(--pd-m-in) var(--pd-m-ease-out) both;animation-delay:calc(var(--pd-i,0) * 28ms)}
@keyframes pd-rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.pd-in-fade{animation:pd-fade .5s var(--pd-ease) both}

/* ───────────── 5. Работа в процессе — «дышит» ─────────────
   Анимируется только opacity псевдоэлемента (кант и мягкое свечение изнутри) — без перерисовки тени на каждом кадре. */
.pd-poster.is-running::before{content:"";position:absolute;inset:0;z-index:6;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(94,208,250,.55),inset 0 0 28px rgba(94,208,250,.16);opacity:.4;animation:pd-breathe 2.8s ease-in-out infinite}
@keyframes pd-breathe{0%,100%{opacity:.4}50%{opacity:1}}
.pd-tile:hover .pd-poster.is-running::before{animation-play-state:paused}
/* Полоса прогресса переливается и растёт плавно, а не ступеньками опроса */
.pd-progress:not(.pd-progress--indet) i{background:linear-gradient(90deg,var(--pd-accent),var(--pd-sky),var(--pd-accent));
  background-size:200% 100%;animation:pd-flow 2.4s linear infinite;transition:width .9s var(--pd-m-ease-out)}
@keyframes pd-flow{from{background-position:0 0}to{background-position:-200% 0}}

/* ───────────── 6. «Готово» — одна вспышка ───────────── */
.pd-tile.is-flash .pd-poster{animation:pd-ready 1.6s var(--pd-m-ease-out) 1}
@keyframes pd-ready{
  0%{box-shadow:0 0 0 0 rgba(8,102,255,.0),0 14px 34px rgba(0,0,0,.28)}
  18%{box-shadow:0 0 0 2px var(--pd-accent),0 0 0 8px rgba(8,102,255,.28),0 0 40px rgba(94,208,250,.25)}
  100%{box-shadow:0 0 0 2px var(--pd-accent),0 0 0 14px rgba(8,102,255,0),0 14px 34px rgba(0,0,0,.28)}}

/* ───────────── 7. Цифры перетекают ───────────── */
.pd-count{font-variant-numeric:tabular-nums}
.pd-count.is-ticking{color:#fff;text-shadow:0 0 18px rgba(94,208,250,.35);transition:text-shadow .6s var(--pd-ease)}

/* ───────────── 8. Тихий режим ───────────── */
@media (hover:none){
  .pd-spots,.pd-rim{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pd-in,.pd-in-fade{animation:none}
  .pd-poster.is-running::before,.pd-progress i{animation:none}
  .pd-poster.is-running::before{opacity:1}
  .pd-tile:active .pd-poster{transform:none}
  .pd-go::after{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. Скорость (спека §7) — поверх правил выше: вечные и покадровые анимации — только transform и opacity
   ═══════════════════════════════════════════════════════════════════════════ */
/* переходы без box-shadow: тень меняется сразу (одна перерисовка), а не на каждом кадре */
.pd-btn,.pd-go,.pd-chip,.pd-iconbtn,.pd-filter,.pd-seg__btn,.pd-nav__item,.pd-thumb,.pd-ref,.pd-modelcard{
  transition:background-color var(--pd-t) var(--pd-ease),color var(--pd-t) var(--pd-ease),transform var(--pd-t-fast) var(--pd-ease),opacity var(--pd-t) var(--pd-ease)}
/* постер: только сжатие при нажатии; гашение «под доком» — мгновенное (kit.css §27) */
.pd-poster{transition:transform .12s var(--pd-ease)}
.pd-dock{transition:none}
/* полоса прогресса: ширина — scaleX, перелив — бегущий блик (pd-sweep из kit.css §27) вместо background-position */
.pd-progress:not(.pd-progress--indet) i{position:relative;overflow:hidden;width:100%;max-width:none;border-radius:0;transform:scaleX(min(var(--v,0),.96));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--pd-accent),var(--pd-sky));background-size:auto;animation:none;transition:transform .9s var(--pd-m-ease-out)}
.pd-progress:not(.pd-progress--indet) i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-100%);animation:pd-sweep 2.4s linear infinite}
/* «Готово» — кольцо поверх постера (motion.js flash): анимируются только opacity и transform */
.pd-tile.is-flash .pd-poster{animation:none}
.pd-flashring{position:absolute;z-index:9;pointer-events:none;border-radius:var(--pd-r-4);box-shadow:0 0 0 2px var(--pd-accent),0 0 0 8px rgba(8,102,255,.28),0 0 40px rgba(94,208,250,.25);animation:pd-ring 1.6s var(--pd-m-ease-out) both}
@keyframes pd-ring{0%{opacity:0;transform:scale(.985)}18%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.035)}}
.pd-count.is-ticking{text-shadow:none}
/* тихий режим: слабая машина (core/perf.js) или ?fx=off — без света, бликов и вечных анимаций */
html.pd-lowfx .pd-spots,html.pd-lowfx .pd-rim{display:none}
html.pd-lowfx .pd-poster.is-running::before,html.pd-lowfx .pd-progress i::after{animation:none;display:none}
html.pd-lowfx .pd-in{animation:none}
html.pd-lowfx .pd-go::after{display:none}
html.pd-lowfx .pd-tile:active .pd-poster{transform:none}
@media (prefers-reduced-motion:reduce){.pd-progress i::after,.pd-flashring{animation:none;display:none}}