/* Движение при прокрутке публичного сайта (#45).

   Источник — `motion.css` утверждённого эталона (docs/design/approved-2026-09-08).
   Отдельный файл, а не часть site.css, по одной причине: оболочка CRM подключает
   site.css как дизайн-систему (`owner/crm/_shell.html`), а маркетинговых
   скролл-анимаций CRM не получает. Всё, что здесь, подключает только каркас
   публичных страниц (`prerender/_base.html`).

   Три независимых части:
     1) однократное появление блоков и карточек при входе в экран (`.reveal-pending`);
     2) небольшое смещение иллюстрации первого экрана (`.hero-depth`);
     3) одна закреплённая сцена процесса работы (`.scroll-scene` + `.case-scene`).

   Без JavaScript ни одна из них не включается: классы `.scroll-scene`/`.hero-depth`
   ставит motion.js на <html>, а `.reveal-pending` — на сами узлы. Иллюстрация сцены
   в разметке нарисована в конечном состоянии (папка собрана, отметка на месте),
   поэтому статичная страница выглядит законченной.

   Инлайновых стилей нет: CSP публичных страниц держит style-src 'self'. Значения
   transform во время прокрутки motion.js пишет через CSSOM (`el.style.transform`) —
   это не инлайновый атрибут и политику не нарушает. */


/* --- Токены движения --------------------------------------------------------- */

:root {
  /* Кривая и длительность появления — из эталона, менять вместе с ним. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --motion-reveal: 600ms;
}


/* --- Иллюстрация сцены: листы, обложка, отметка -------------------------------- */

/* Декоративная (aria-hidden). На узком экране её нет совсем: на телефоне остаются
   только лёгкие появления, а разбирать стопку документов в одну колонку незачем. */
.case-scene {
  display: none;
  position: relative;
  margin-top: 24px;
  max-width: 440px;
}

@media (min-width: 761px) {
  .case-scene {
    display: block;
  }
}

.case-scene-stage {
  position: relative;
  height: 285px;
  isolation: isolate;
  overflow: hidden;
}

.case-sheet,
.case-folder {
  position: absolute;
  left: 50%;
  top: 20px;
  width: 180px;
  height: 225px;
  margin-left: -90px;
  border-radius: 3px;
  box-shadow: 0 14px 28px #0d1b1533;
}

.case-sheet {
  padding: 20px;
  background: #ecebdc;
  color: #354332;
}

.sheet-label,
.sheet-foot {
  display: block;
  font-size: 6px;
  letter-spacing: .13em;
}

.case-sheet strong {
  display: block;
  font: 400 18px/1.5 var(--serif);
  margin: 20px 0;
}

.case-sheet i {
  display: block;
  height: 1px;
  background: #b8c0a9;
  margin-top: 9px;
}

.case-sheet i:nth-last-child(2) {
  width: 66%;
}

.sheet-foot {
  position: absolute;
  bottom: 19px;
  font-size: 5px;
}

/* Исходный разброс листов. Дальше их положение ведёт motion.js, и каждый лист
   сохраняет свою «личность», пока россыпь собирается в одно дело. */
.sheet-documents {
  background: #c2cbb6;
  transform: translate(-8px, -10px) rotate(-3deg);
  z-index: 1;
}

.sheet-correspondence {
  background: #dce0cf;
  transform: translate(8px, -5px) rotate(3deg);
  z-index: 2;
}

.sheet-timeline {
  transform: translate(0, -2px);
  z-index: 3;
}

.case-folder {
  background: #3a4b39;
  border: 1px solid #738061;
  color: #edf0df;
  padding: 23px 20px;
  transform: translateY(12px);
  z-index: 4;
}

/* Корешок папки. */
.case-folder:before {
  content: '';
  position: absolute;
  left: -1px;
  top: -12px;
  width: 74px;
  height: 12px;
  background: #3a4b39;
  border: 1px solid #738061;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

.folder-label {
  font-size: 5px;
  letter-spacing: .12em;
  color: #c2cdad;
}

.case-folder strong {
  display: block;
  margin: 20px 0 13px;
  font: 400 24px/1.3 var(--serif);
  letter-spacing: -.7px;
}

.folder-rule {
  display: block;
  height: 1px;
  width: 36px;
  background: #b9aa71;
}

.case-folder p {
  font-size: 7px;
  line-height: 1.8;
  color: #c5cdb7;
  margin-top: 12px;
}

.folder-mark {
  position: absolute;
  right: 17px;
  bottom: 17px;
  font: 24px var(--serif);
  color: var(--accent);
}

.folder-seal {
  position: absolute;
  left: -19px;
  bottom: -14px;
  padding: 9px 13px;
  background: var(--accent);
  color: #273929;
  border: 1px solid #d2c894;
  border-radius: 3px;
  font-size: 6px;
  letter-spacing: .1em;
  transform: rotate(-4deg);
}

.case-scene-status {
  display: flex;
  gap: 17px;
  align-items: baseline;
  padding-top: 7px;
  font-size: 10px;
}

.case-stage-count {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-size: 9px;
}

.case-stage-label {
  color: var(--muted);
}

.case-progress {
  height: 1px;
  margin-top: 13px;
  background: var(--line);
  overflow: hidden;
}

/* Без JS полоса залита целиком: показанное дело собрано, счётчик стоит на 04 / 04. */
.case-progress > span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left;
}


/* --- Закреплённая сцена ------------------------------------------------------- */

/* Единственная закреплённая сцена сайта и единственное место, где прокрутка что-то
   двигает по своему положению. Порог 961 × 720 — из эталона: ниже иллюстрация и
   этапы не помещаются рядом, и процесс показывается обычным списком без закрепления.
   Колесо и касания не перехватываются: закрепление делает position:sticky, страница
   прокручивается ровно на столько, на сколько прокрутил посетитель. */
@media (min-width: 961px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {
  .scroll-scene .approach {
    align-items: start;
  }

  .scroll-scene .approach-intro {
    position: sticky;
    top: 35px;
  }

  .scroll-scene .steps {
    padding-top: 15px;
  }

  /* Этап занимает столько, чтобы соседний не читался одновременно с текущим. */
  .scroll-scene .steps > li {
    position: relative;
    min-height: 275px;
    padding: 48px 0;
  }

  .scroll-scene .steps > li:first-child {
    padding-top: 48px;
  }

  /* Тонкий указатель текущего этапа. */
  .scroll-scene .steps > li:before {
    content: '';
    position: absolute;
    left: -16px;
    top: 49px;
    height: 23px;
    width: 2px;
    background: var(--accent);
    opacity: 0;
    transform: scaleY(.5);
    transform-origin: center;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  }

  .scroll-scene .steps > li.is-current:before {
    opacity: 1;
    transform: scaleY(1);
  }
}


/* --- Появление блоков и карточек ---------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal-pending {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--motion-reveal) var(--ease-out),
      transform var(--motion-reveal) var(--ease-out);
  }

  .reveal-pending.is-revealed {
    opacity: 1;
    transform: none;
  }

  /* Клавиатура быстрее прокрутки: узел, внутрь которого пришёл фокус, виден сразу
     и без задержки соседей. */
  .reveal-pending:focus-within {
    opacity: 1;
    transform: none;
    transition: none !important;
  }

  /* Запас под смещение до 14 px, чтобы у кадрированной иллюстрации не открывался
     край. Само смещение задаёт motion.js. */
  .hero-depth .hero-visual img {
    transform: translateY(0) scale(1.06);
  }
}


/* --- Отказ от движения --------------------------------------------------------- */

/* site.css уже снимает все transition и animation. Здесь важно другое: ничего не
   должно остаться спрятанным, если посетитель отключил движение. */
@media (prefers-reduced-motion: reduce) {
  .reveal-pending {
    opacity: 1 !important;
    transform: none !important;
  }
}