/* Движение. Пять классов, принятых 15.09.2026. Не переписывать в темах —
   тема может менять только --t-* и --ease-out, иначе варианты станут несравнимы. */

:root{
  --t-fast:140ms;   /* отклик */
  --t-mid:240ms;    /* смена экрана */
  --t-slow:320ms;   /* переезд заголовка */
  --ease-out:cubic-bezier(.22,.75,.3,1);
}
html.no-motion *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 2. отклик — реакция раньше результата */
.search input{transition:border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out)}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search .ic{transition:color var(--t-fast) var(--ease-out)}
.search input:focus + .ic{color:var(--accent)}
.sw,.reset,.facet button,.back{transition:background var(--t-fast) var(--ease-out),
  color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out)}
.row{transition:border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out),
     transform var(--t-fast) var(--ease-out)}
.row:active{transform:scale(.994)}
.back:active{transform:translateX(-2px)}

/* 4. ориентация — вперёд влево, назад зеркально и короче */
.screen{transition:opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out)}
.screen.leaving-fwd{opacity:0;transform:translateX(-14px)}
.screen.entering-fwd{animation:inFromRight var(--t-slow) var(--ease-out)}
.screen.leaving-back{opacity:0;transform:translateX(14px)}
.screen.entering-back{animation:inFromLeft calc(var(--t-mid) * .8) var(--ease-out)}
@keyframes inFromRight{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes inFromLeft{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

/* 3. объяснение изменения — появляются только новые строки, по очереди */
.row.appear{animation:rowIn var(--t-mid) var(--ease-out) backwards;animation-delay:calc(var(--k,0) * 32ms)}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 5. состояние — скелетон формы будущего контента */
.skel{max-width:var(--measure,760px)}
.skel .b{background:linear-gradient(90deg,var(--surface) 0%, var(--skel-hi,#e6e4dc) 50%, var(--surface) 100%);
         background-size:200% 100%;border-radius:6px;animation:shimmer 1.25s linear infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.skel .l1{height:15px;width:180px;margin:14px 0 18px}
.skel .l2{height:34px;width:72%;margin-bottom:10px}
.skel .l3{height:34px;width:52%;margin-bottom:22px}
.skel .l4{height:22px;width:88%;margin-bottom:8px}
.skel .l5{height:22px;width:64%;margin-bottom:24px}
.skel .l6{height:78px;width:100%;border-radius:var(--radius-diary,0 10px 10px 0)}

/* 1. непрерывность задаётся из app.js: заголовок стартует из координат строки списка */

/* метки режима «объяснить» */
.tagm{position:absolute;z-index:40;background:var(--note,#4a6b8a);color:#fff;font-size:10.5px;
      letter-spacing:.05em;text-transform:uppercase;font-weight:600;padding:2px 7px;border-radius:5px;
      pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.18);opacity:0;
      transition:opacity var(--t-fast) var(--ease-out)}
html.explain .tagm{opacity:1}