/* Живые сценки в карточках «Было — стало» (26.10.2026). Без JS и при «уменьшить движение» —
   готовая картинка (финальный кадр). С JS (html.sc-js) элементы появляются по очереди, когда
   карточка на экране (.scene.on); scenki.js перезапускает цикл каждые 10 с. */
.scene{--ease:cubic-bezier(.22,1,.36,1);position:relative;background:var(--paper);border-radius:16px;
  padding:18px;min-height:178px;display:flex;flex-direction:column;justify-content:center;gap:8px;
  overflow:hidden;font-size:14px;line-height:1.4;color:var(--ink)}

/* чат */
.scene-chat{align-items:stretch}
.sc-msg{max-width:82%;padding:9px 13px;border-radius:16px}
.sc-me{align-self:flex-end;background:var(--violet);color:var(--white);border-bottom-right-radius:6px}
.sc-bot{align-self:flex-start}
.sc-msg.sc-bot{background:var(--white);border:1px solid var(--line);border-bottom-left-radius:6px}
.sc-pair{position:relative;display:flex;flex-direction:column}
.sc-typing{display:none;position:absolute;left:0;top:0;background:var(--white);border:1px solid var(--line);
  border-radius:16px;border-bottom-left-radius:6px;padding:12px 14px;gap:4px}
.sc-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);display:block}
.sc-chip{display:grid;font-weight:500;font-size:13px;border:1px solid var(--violet);border-radius:999px;
  padding:6px 14px;background:var(--violet);color:var(--white)}
.sc-chip>span{grid-area:1/1}
.sc-chip-t{visibility:hidden}
.sc-file{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-weight:500}
.sc-doc{width:20px;height:24px;border-radius:4px;background:var(--violet-soft);border:2px solid var(--violet);flex:none}

/* привычки */
.scene-habits{gap:10px}
.sc-hrow{display:flex;align-items:center;gap:6px}
.sc-hname{width:78px;flex:none;font-size:13px;color:var(--ink-2)}
.sc-cell{width:24px;height:24px;border-radius:7px;background:var(--violet);display:block}
.sc-streak{margin-top:4px;font-size:14px;color:var(--ink-2)}
.sc-streak b{color:var(--ink)}
.sc-streak{display:flex;align-items:center;gap:8px}
.sc-flame{width:14px;height:18px;background:var(--grad);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;transform:rotate(-8deg)}

.sc-i0{--i:0}.sc-i1{--i:1}.sc-i2{--i:2}.sc-i3{--i:3}.sc-i4{--i:4}.sc-i5{--i:5}.sc-i6{--i:6}.sc-i7{--i:7}

/* ДПДГ */
.sc-track{position:relative;height:56px;border-radius:999px;background:var(--white);border:1px solid var(--line)}
.sc-ball{position:absolute;top:50%;left:10px;width:34px;height:34px;margin-top:-17px;border-radius:50%;
  background:var(--violet);box-shadow:0 4px 14px var(--ball-shadow)}
.sc-dpdg-meta{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-3)}

/* CRM */
.sc-day{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:repeat(3,36px);gap:6px 10px}
.sc-t{grid-column:1;grid-row:var(--r);font-size:12px;color:var(--ink-3);padding-top:9px}
.sc-slot{grid-column:2;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:500;
  background:var(--violet-soft);color:var(--violet-deep);border-left:3px solid var(--violet)}
.sc-r1{--r:1}.sc-r2{--r:2}.sc-r3{--r:3}
.sc-s1{grid-row:1}.sc-s2{grid-row:2}.sc-s3{grid-row:3}
.sc-toast{align-self:flex-end;background:var(--ink);color:var(--white);font-size:12px;border-radius:999px;padding:6px 12px}

/* ── движение (только с JS и без «уменьшить движение») ── */
@keyframes sc-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sc-in-right{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes sc-typing{0%{opacity:0}12%,88%{opacity:1}100%{opacity:0}}
@keyframes sc-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
@keyframes sc-fill{from{background:var(--line)}to{background:var(--violet)}}
@keyframes sc-chip-bg{from{background:var(--white);color:var(--violet)}to{background:var(--violet);color:var(--white)}}
@keyframes sc-show{from{visibility:visible;opacity:1}to{visibility:hidden;opacity:0}}
@keyframes sc-hide{from{visibility:hidden;opacity:0}to{visibility:visible;opacity:1}}
@keyframes sc-ball{from{left:10px}to{left:calc(100% - 44px)}}
@keyframes sc-scene{0%,93%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion:no-preference){
  .sc-js .scene:not(.on) :is(.sc-a1,.sc-a3,.sc-a4,.sc-a5,.sc-slot){opacity:0}
  .sc-js .scene:not(.on) .sc-cell{background:var(--line)}
  .sc-js .scene.on:not(.scene-dpdg){animation:sc-scene 10s linear both}
  .sc-js .on .sc-a1{animation:sc-up .5s var(--ease) .3s both}
  .sc-js .on .sc-typing{display:flex;animation:sc-typing 1.6s linear 1.2s both}
  .sc-js .on .sc-typing i{animation:sc-dot 1s ease-in-out infinite}
  .sc-js .on .sc-typing i:nth-child(2){animation-delay:.15s}
  .sc-js .on .sc-typing i:nth-child(3){animation-delay:.3s}
  .sc-js .on .sc-a3{animation:sc-up .5s var(--ease) 2.8s both}
  .sc-js .on .sc-a4{animation:sc-up .5s var(--ease) 4s both}
  .sc-js .on .sc-chip{animation:sc-up .5s var(--ease) 4s both,sc-chip-bg .3s ease-out 5.6s both}
  .sc-js .on .sc-chip-t{animation:sc-show .2s linear 5.6s both}
  .sc-js .on .sc-chip-ok{animation:sc-hide .2s linear 5.6s both}
  .sc-js .on .sc-cell{animation:sc-fill .35s var(--ease) calc(.4s + var(--i) * .45s) both}
  .sc-js .on.scene-habits .sc-a4{animation-delay:4.2s}
  .sc-js .on .sc-ball{animation:sc-ball 1.4s ease-in-out infinite alternate}
  .sc-js .on .sc-s1{animation:sc-in-right .5s var(--ease) .4s both}
  .sc-js .on .sc-s2{animation:sc-in-right .5s var(--ease) 1.4s both}
  .sc-js .on .sc-s3{animation:sc-in-right .5s var(--ease) 2.4s both}
  .sc-js .on .sc-a5{animation:sc-up .5s var(--ease) 3.8s both}
}
@media (max-width:780px){.scene{min-height:160px;padding:14px}.sc-cell{width:20px;height:20px}}

/* Живые картинки главной (zhivye.js, 26.10): песок в часах и свечение кубика */
.duo-pic canvas.sand{position:absolute;pointer-events:none}
.hero-glow{position:absolute;width:var(--s,300px);height:var(--s,300px);margin:calc(var(--s,300px) / -2) 0 0 calc(var(--s,300px) / -2);
  border-radius:50%;pointer-events:none;mix-blend-mode:multiply;opacity:0;
  background:radial-gradient(closest-side,var(--glow-hero),var(--glow-hero-2) 55%,transparent 100%)}
@keyframes hero-breath{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.08)}}
@media (prefers-reduced-motion:no-preference){.hero-glow.on{animation:hero-breath 4.8s ease-in-out infinite}}