/* ═══════════════════════════════════════════════════════════════════
   motion-public.css — движение публичной части: лендинг, вход, личный кабинет. Подключается ПОСЛЕ landing.css / site.css;
   общие кривые и приёмы — motion-core.css. Здесь движения чуть больше, чем в рабочих разделах: это лицо проекта.

   Лендинг: полоса прогресса чтения, наклон портрета за указателем, блик на главной кнопке, фотографии проявляются
   из размытия. Кабинет: первый показ лесенкой, плитки приподнимаются, «живой» доступ мягко дышит, кольцо оставшихся
   дней и полоса недели потока заполняются, числа считаются. Вход: карточка выплывает, ошибка встряхивает.
   Всё — внутри `prefers-reduced-motion: no-preference`; без JS и в старых браузерах страницы остаются прежними.
   ═══════════════════════════════════════════════════════════════════ */

@keyframes mo-grow  { from { transform: scaleX(0); } }
@keyframes mo-ring  { from { stroke-dashoffset: 100; } }
@keyframes mo-halo  { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }          /* только прозрачность: идёт на видеокарте, без перерисовки тени */
@keyframes mo-scroll { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ─── Кольцо оставшихся дней (кабинет) ─── */
.st-prod__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.st-ring { position: relative; inline-size: 68px; block-size: 68px; flex: none; }
.st-ring svg { inline-size: 100%; block-size: 100%; transform: rotate(-90deg); overflow: visible; }
.st-ring circle { fill: none; stroke-width: 6; }
.st-ring__bg { stroke: var(--lp-jade-wash); }
.st-ring__fg {
  stroke: var(--lp-jade);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--pct, 0));
}
.st-ring--warn .st-ring__fg { stroke: #c4932f; }
.st-ring__num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; color: var(--lp-ink); }
.st-ring__num b { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-ring__num small { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-ink-faint); }
.st-prod { position: relative; }

@media (prefers-reduced-motion: no-preference) {

  /* ─── Кабинет и вход: первый показ ─── */
  html.mo-boot .st-cab__head > *,
  html.mo-boot .st-cab > .st-links,
  html.mo-boot .st-cab > .st-msg,
  html.mo-boot .st-cab > section > h2,
  html.mo-boot .st-card { animation: mo-rise var(--mo-t4) var(--mo-ease) both; }
  html.mo-boot .st-cab__head > :nth-child(2) { animation-delay: 70ms; }
  html.mo-boot .st-cab__head > :nth-child(3) { animation-delay: 140ms; }
  html.mo-boot .st-grid > * { animation: mo-rise var(--mo-t4) var(--mo-ease) both; animation-delay: calc(200ms + var(--mo-i, 0) * 100ms); }
  html.mo-boot .st-cab > .st-links { animation-delay: 520ms; }

  /* ─── Плитки продуктов ─── */
  .st-prod { transition: transform var(--mo-t3) var(--mo-ease), box-shadow var(--mo-t3) var(--mo-ease); }
  .st-prod:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .st-prod--on::before {                              /* «живой» доступ — мягкое дыхание вокруг карточки (тень неподвижна, дышит прозрачность) */
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 8px rgba(31, 138, 125, .10); opacity: 0;
    animation: mo-halo 4.2s ease-in-out infinite;
  }
  .st-prod--on .st-badge:not(.st-badge--off):not(.st-badge--warn)::before {
    content: ""; display: inline-block; inline-size: 6px; block-size: 6px; margin-inline-end: 7px; vertical-align: .12em;
    border-radius: 50%; background: currentColor; animation: mo-pulse 2.4s ease-in-out infinite;
  }

  /* ─── Прогресс заполняется ─── */
  .st-bar > i { transform-origin: left center; animation: mo-grow 1.2s var(--mo-ease) .4s both; }
  .st-ring__fg { animation: mo-ring 1.5s var(--mo-ease) .35s both; }

  /* ─── Ссылки внизу кабинета: подчёркивание выезжает ─── */
  .st-links a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; text-decoration: none;
                transition: background-size var(--mo-t3) var(--mo-ease); padding-block-end: 2px; }
  .st-links a:hover { background-size: 100% 2px; text-decoration: none; }

  /* ─── Вход: ошибка встряхивает, поле светится ─── */
  .st-msg--err { animation: mo-shake .55s var(--mo-ease); }
  .st-field input { transition: border-color var(--mo-t2), box-shadow var(--mo-t2) var(--mo-ease); }
  .st-field input:focus-visible { box-shadow: 0 0 0 4px rgba(31, 138, 125, .14); outline-color: var(--lp-jade); }

  /* ─── Лендинг ─── */
  .lp-progress {                                       /* полоса «сколько прочитано» — в браузерах с анимациями по прокрутке */
    position: fixed; inset: 0 0 auto 0; block-size: 3px; z-index: 60; pointer-events: none;
    background: linear-gradient(90deg, var(--lp-jade-soft), var(--lp-jade)); transform: scaleX(0); transform-origin: left center;
  }
  @supports (animation-timeline: scroll()) {
    .lp-progress { animation: mo-scroll linear both; animation-timeline: scroll(root); }
  }
  .lp-hero__figure[data-tilt] { transition: transform var(--mo-t3) var(--mo-ease); }

  .lp-btn:not(.lp-btn--ghost) { position: relative; overflow: hidden; isolation: isolate; }
  .lp-btn:not(.lp-btn--ghost)::after {                 /* блик пробегает по главной кнопке */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .30) 50%, transparent 68%);
    transform: translateX(-125%);
  }
  .lp-btn:not(.lp-btn--ghost):hover::after { transform: translateX(125%); transition: transform .9s var(--mo-ease); }

}

/* фотографии проявляются из размытия вместе с блоком — только там, где есть мышь: размытие больших картинок на слабом телефоне
   стоит кадров, а на телефоне блок и так проявляется (прозрачность) */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .lp-js .lp-reveal:not(.is-in) img { filter: blur(10px) saturate(.85); }
  .lp-js .lp-reveal img { transition: filter 1.1s var(--mo-ease), opacity .6s var(--mo-ease); }
  .lp-hero__figure[data-tilt] { will-change: transform; transform-style: preserve-3d; }     /* слой под наклон — только там, где он есть */
}