/* Живые сцены лендинга «Понятно» — вместо скриншотов в телефоне.
 *
 * Язык тот же, что у ролика Clarity (video/src/ads/Clarity.tsx): продукт показан
 * своими деталями — бланк, статус, шкала нормы, значение, линия, ответ
 * ассистента, — сделанными как графика, на разной глубине. Ни рамки телефона, ни
 * картинки интерфейса.
 *
 * Как устроено:
 *  • Разметка сцены сама по себе — это её ФИНАЛЬНЫЙ кадр. Без JS, при
 *    «уменьшить движение» и для поисковика сцена просто стоит готовой.
 *  • motion.js ставит сцене класс .play, когда она на экране, и снимает, когда
 *    ушла; через data-loop мс — .out (затемнение) и заново. Все движения —
 *    CSS-анимации с fill both под .play: до своей задержки элемент стоит в
 *    начальном кадре, после — в финальном.
 *  • Тексты — обычные data-i18n, поэтому сцены переводятся вместе со страницей.
 *    Длина строки на другом языке не ломает ничего: печать и проявление текста
 *    сделаны маской и обрезкой, а не разбивкой по буквам.
 *  • Размеры — в em от шрифта сцены, а шрифт сцены — от её ширины (cqw), так что
 *    на телефоне сцена та же, только меньше.
 */

@property --rv { syntax: "<percentage>"; inherits: false; initial-value: 130%; }
@property --n { syntax: "<integer>"; inherits: false; initial-value: 0; }

.scene { position: relative; width: 100%; max-width: 520px; margin: 0 auto; container-type: inline-size; }
.sc-body { position: relative; font-size: 16px; font-size: clamp(14px, 3.6cqw, 16px); transition: opacity .4s ease; }
.scene:not(.sc-hero) { max-width: 440px; }
.scene.out .sc-body { opacity: 0; }
.scene [aria-hidden] { pointer-events: none; }

/* Стекло: деталь продукта, висящая над страницей */
.glass {
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 1.25em;
  box-shadow: 0 2.4em 4.6em -1.8em rgba(21, 32, 43, .28), 0 .6em 1.6em -.6em rgba(21, 32, 43, .12), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
.panel { padding: 1.25em 1.25em 1.35em; }
.pn-h { display: flex; align-items: baseline; justify-content: space-between; gap: .8em; margin-bottom: .9em; }
.pn-h .ttl { font-family: var(--head); font-weight: 800; font-size: 1.12em; letter-spacing: -.01em; color: var(--ink); }
.pn-h .sub { font-size: .8em; color: var(--ink-3); white-space: nowrap; }

.tag { display: inline-flex; align-items: center; gap: .4em; border-radius: 999px; padding: .28em .75em; font-family: var(--head); font-weight: 700; font-size: .78em; line-height: 1.3; white-space: nowrap; }
.tag::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.alert { background: var(--alert-soft); color: var(--alert); }

/* Шкала нормы: серая дорожка, зелёная зона, маркер-кольцо */
.scale { position: relative; height: 1.25em; margin-top: .55em; }
.scale::before { content: ""; position: absolute; left: 0; right: 0; top: .42em; height: .42em; border-radius: 1em; background: var(--line-2); }
.scale .zone { position: absolute; top: .42em; height: .42em; left: 22%; right: 22%; border-radius: 1em; background: rgba(31, 138, 91, .28); }
.scale .mk { position: absolute; top: 0; left: var(--x); width: 1.25em; height: 1.25em; margin-left: -.625em; border-radius: 50%; background: #fff; border: .3em solid var(--ok); box-sizing: border-box; box-shadow: 0 .25em .7em rgba(31, 138, 91, .4); }
.scale .mk.warn { border-color: var(--warn); box-shadow: 0 .25em .7em rgba(182, 121, 31, .4); }
.scale-l { position: relative; height: 1.2em; font-size: .72em; color: var(--ink-3); }
.scale-l span { position: absolute; top: .1em; transform: translateX(-50%); }
.scale-l span:first-child { left: 22%; }
.scale-l span:last-child { left: 78%; }

/* Аватар ассистента — знак приложения */
.ava { flex: none; width: 2.1em; height: 2.1em; border-radius: .7em; background: var(--accent) url(/assets/img/logo.png) center / cover no-repeat; box-shadow: 0 .4em 1em -.3em rgba(42, 111, 219, .6); }

/* Проявление текста сверху вниз — как ответ, который пишется строками */
.scene.play .reveal {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--rv) - 30%), transparent var(--rv));
  mask-image: linear-gradient(180deg, #000 calc(var(--rv) - 30%), transparent var(--rv));
  animation: sc-reveal var(--dur, 1.6s) linear var(--at, 0s) both;
}
@keyframes sc-reveal { from { --rv: 0%; } to { --rv: 130%; } }

/* Печать строки: обрезка справа шагами, курсор в конце */
.scene.play .type { animation: sc-type var(--dur, 1s) steps(var(--steps, 16), end) var(--at, 0s) both; }
@keyframes sc-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -1em 0 0); } }

/* Счётчик числа: --from → --to. Финальный кадр без анимации — --to. */
.count { counter-reset: n var(--to); }
.count::before { content: counter(n); }
.scene.play .count { animation: sc-count var(--dur, 1.2s) cubic-bezier(.3, .7, .2, 1) var(--at, 0s) both; counter-reset: n var(--n); }
@keyframes sc-count { from { --n: var(--from); } to { --n: var(--to); } }

/* Появления общего вида */
.scene.play .rise { animation: sc-rise .7s cubic-bezier(.2, .8, .2, 1) var(--at, 0s) both; }
@keyframes sc-rise { from { opacity: 0; transform: translateY(1.2em) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.scene.play .pop { animation: sc-pop .5s cubic-bezier(.3, 1.6, .5, 1) var(--at, 0s) both; }
@keyframes sc-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
.scene.play .fade { animation: sc-fade .6s ease var(--at, 0s) both; }
@keyframes sc-fade { from { opacity: 0; } to { opacity: 1; } }
.scene.play .mk { animation: sc-slide 1s cubic-bezier(.25, .8, .25, 1) var(--at, 0s) both; }
@keyframes sc-slide { from { left: 0%; opacity: 0; } 15% { opacity: 1; } to { left: var(--x); opacity: 1; } }
.scene.play .draw { stroke-dasharray: 1; animation: sc-draw var(--dur, 1.4s) cubic-bezier(.4, 0, .2, 1) var(--at, 0s) both; }
@keyframes sc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* То, что живёт только в анимации (точки «печатает», старый статус,
   неподходящие документы), в финальном кадре не показываем. */
.scene:not(.play) .only-play { display: none !important; }

.dots { display: inline-flex; gap: .3em; padding: .75em .95em; border-radius: 1.1em 1.1em 1.1em .35em; background: var(--surface); border: 1px solid var(--line); }
.dots i { width: .45em; height: .45em; border-radius: 50%; background: var(--ink-3); animation: sc-dot 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sc-dot { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-.3em); opacity: 1; } }
.scene.play .dots-life { animation: sc-life var(--dur, 1.2s) linear var(--at, 0s) both; }
@keyframes sc-life { 0% { opacity: 0; max-height: 0; } 8%, 88% { opacity: 1; max-height: 4em; } 100% { opacity: 0; max-height: 0; margin: 0; } }

/* ============ 1. Первый экран: бланк → разбор ============ */

.sc-hero .sc-body { aspect-ratio: 520 / 560; font-size: clamp(10px, 3.077cqw, 16px); }
/* На телефоне сцена меньше в полтора раза — карточки и ответ чуть крупнее,
   чтобы их можно было прочесть, бланк остаётся декорацией. */
@container (max-width: 420px) {
  .sc-hero .sc-body { font-size: 3.5cqw; }
  .sc-hero .p-ai { width: 90%; }
  .sc-hero .ai p { font-size: 1em; }
  .sc-hero .gcard .lbl { font-size: .92em; }
}
.sc-hero .lyr { position: absolute; inset: 0; transform: translate3d(calc(var(--px, 0) * var(--d) * 1em), calc(var(--py, 0) * var(--d) * .7em), 0); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.sc-hero .pos { position: absolute; }
.sc-hero .flt { animation: sc-float var(--fd, 7s) ease-in-out var(--fo, 0s) infinite alternate; }
@keyframes sc-float { from { transform: translateY(-.35em); } to { transform: translateY(.35em); } }
.sc-glow { position: absolute; inset: 6% 2% 4% 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(42, 111, 219, .18), rgba(42, 111, 219, 0)); filter: blur(20px); }

.paper {
  position: absolute; left: 4%; top: 5%; width: 64%;
  padding: 1.1em 1.15em 1em; border-radius: .45em; color: #2b2f36;
  background: linear-gradient(170deg, #fff 0%, #fbfaf6 60%, #f3f1ea 100%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 1.8em 3.6em -1.2em rgba(21, 32, 43, .3), 0 .7em 1.4em -.7em rgba(21, 32, 43, .18);
  transform: rotate(-4deg); overflow: hidden;
}
.paper-h { display: flex; justify-content: space-between; align-items: center; gap: .6em; font-size: .62em; letter-spacing: .06em; text-transform: uppercase; color: #6c727c; }
.paper-h .lab { display: flex; align-items: center; gap: .6em; font-weight: 700; }
.paper-h .lab::before { content: ""; width: 1.6em; height: 1.6em; border-radius: .35em; background: #c9d3e2; }
.paper-bars { margin: .7em 0 .8em; display: grid; gap: .32em; }
.paper-bars i { display: block; height: .32em; border-radius: 1em; background: #e9e7e0; }
.paper-bars i:nth-child(1) { width: 62%; }
.paper-bars i:nth-child(2) { width: 44%; }
.paper-cols, .prow { display: grid; grid-template-columns: 1fr auto auto; gap: .2em .9em; align-items: baseline; }
.paper-cols span, .prow > * { white-space: nowrap; }
.paper-cols span:first-child, .prow > :first-child { overflow: hidden; text-overflow: ellipsis; }
.paper-cols { font-size: .58em; text-transform: uppercase; letter-spacing: .05em; color: #8a8f97; padding-bottom: .35em; border-bottom: 1px solid #e3e0d6; }
.prow { position: relative; font-size: .7em; padding: .5em .25em; margin: 0 -.25em; border-bottom: 1px dashed #e7e4da; border-radius: .25em; }
.prow b { font-weight: 700; color: #1d2128; }
.prow span:last-child, .paper-cols span:last-child { color: #8a8f97; text-align: right; }
.prow.lit { background: rgba(42, 111, 219, .09); }
.prow.lit.warn { background: rgba(182, 121, 31, .14); }
.scene.play .prow.lit { animation: sc-lit .5s ease calc(var(--at) + var(--i) * .22s) both; }
@keyframes sc-lit { from { background: transparent; } 40% { background: rgba(42, 111, 219, .22); } }
.scanbar { position: absolute; left: 0; right: 0; top: 0; height: 22%; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(42, 111, 219, 0), rgba(42, 111, 219, .16) 80%, rgba(42, 111, 219, .55) 98%, rgba(42, 111, 219, 0)); }
.scene.play .scanbar { animation: sc-scan 1.9s cubic-bezier(.45, 0, .55, 1) var(--at) both; }
@keyframes sc-scan { 0% { transform: translateY(-100%); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(460%); opacity: 0; } }

.gcard { padding: .95em 1.1em; }
.gcard .lbl { font-size: .8em; color: var(--ink-3); font-weight: 500; }
.gcard .val { font-family: var(--head); font-weight: 800; font-size: 2.1em; line-height: 1.05; letter-spacing: -.04em; color: var(--ink); margin-top: .12em; }
.gcard .val small { font-size: .38em; font-weight: 600; letter-spacing: 0; color: var(--ink-3); margin-left: .35em; }
.gcard .top { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.scene.play .lift { animation: sc-lift .9s cubic-bezier(.2, .8, .2, 1) var(--at) both; }
@keyframes sc-lift {
  from { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 1em)) scale(.45); filter: blur(8px); }
  60% { opacity: 1; filter: none; }
  to { opacity: 1; transform: none; filter: none; }
}
.p-hb { right: 1%; top: 3%; width: 37%; }
.p-fer { right: 0; top: 36%; width: 58%; }
.p-ai { left: 1%; bottom: 1.5%; width: 74%; }
.p-far1 { left: 0; top: 68%; }
.p-far2 { right: 2%; top: 66.5%; }
.far { filter: blur(1.6px); opacity: .75; transform: scale(.9); }
.far .chip { padding: .45em .8em; font-size: .78em; display: flex; align-items: center; gap: .5em; color: var(--ink-2); border-radius: 999px; }
.far .chip b { font-family: var(--head); color: var(--ink); }
.far .dot { width: .55em; height: .55em; border-radius: 50%; background: var(--ok); }
.ai { display: flex; gap: .75em; align-items: flex-start; }
.ai p { margin: 0; font-size: .86em; line-height: 1.45; color: var(--ink); }
.ai .who { font-size: .72em; font-weight: 600; color: var(--accent-ink); margin-bottom: .2em; }

/* ============ 2. Расшифровка ============ */

.arow { padding: .75em 0 .2em; border-top: 1px solid var(--line-2); }
.arow:first-of-type { border-top: 0; }
.arow .top { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.arow .nm { font-size: .9em; color: var(--ink-2); font-weight: 500; }
.arow .v { font-family: var(--head); font-weight: 800; font-size: 1.45em; letter-spacing: -.03em; color: var(--ink); line-height: 1.1; }
.arow .v small { font-size: .5em; color: var(--ink-3); font-weight: 600; letter-spacing: 0; margin-left: .3em; }
.chip-norm { display: inline-flex; align-items: center; gap: .45em; font-size: .74em; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: .3em .8em; margin-bottom: .5em; }
.expl { margin-top: .7em; padding: .85em 1em; border-radius: 1em; background: var(--accent-soft-2); border: 1px solid var(--accent-soft); display: flex; gap: .7em; }
.expl p { margin: 0; font-size: .84em; line-height: 1.45; color: var(--ink); }
.expl .next { display: block; margin-top: .45em; font-size: .92em; color: var(--accent-ink); font-weight: 600; }

/* ============ 3. Чат ============ */

.chat { display: flex; flex-direction: column; gap: .7em; min-height: 28em; }
.chat .head { display: flex; align-items: center; gap: .65em; padding-bottom: .8em; border-bottom: 1px solid var(--line-2); }
.chat .head b { font-family: var(--head); font-size: .95em; }
.chat .head span { display: block; font-size: .72em; color: var(--ink-3); }
.bub-u { align-self: flex-end; max-width: 82%; background: var(--accent); color: #fff; border-radius: 1.1em 1.1em .35em 1.1em; padding: .65em .95em; font-size: .9em; line-height: 1.4; box-shadow: 0 .6em 1.4em -.6em rgba(42, 111, 219, .55); }
.bub-a { align-self: flex-start; max-width: 92%; background: var(--surface); border: 1px solid var(--line); border-radius: 1.1em 1.1em 1.1em .35em; padding: .75em .95em; }
.bub-a p { margin: 0; font-size: .86em; line-height: 1.5; color: var(--ink); }
.ref-chip { display: flex; flex-wrap: wrap; width: fit-content; align-items: baseline; gap: .1em .5em; font-size: .74em; color: var(--ink-2); background: var(--warn-soft); border-radius: .7em; padding: .35em .7em; margin-bottom: .55em; }
.ref-chip b { color: var(--warn); font-weight: 700; }
.sugg { display: flex; flex-wrap: wrap; gap: .45em; margin-top: auto; }
.sugg span { font-size: .78em; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: .35em .8em; }
.chat .input { display: flex; align-items: center; justify-content: space-between; gap: .6em; border: 1px solid var(--line); border-radius: 999px; padding: .55em .6em .55em 1em; font-size: .82em; color: var(--ink-3); background: var(--surface); }
.chat .input i { flex: none; width: 2em; height: 2em; border-radius: 50%; background: var(--accent); }

/* ============ 4. Что изменилось ============ */

.sum { display: flex; gap: .7em; padding: .8em .95em; border-radius: 1em; background: var(--accent-soft-2); border: 1px solid var(--accent-soft); margin-bottom: .6em; }
.sum p { margin: 0; font-size: .84em; line-height: 1.45; color: var(--ink); }
.crow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2em .8em; padding: .7em 0; border-top: 1px solid var(--line-2); }
.crow .nm { font-size: .88em; color: var(--ink-2); font-weight: 500; }
.crow .nums { display: flex; align-items: baseline; gap: .5em; grid-column: 1; }
.crow .was { font-size: .9em; color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(107, 119, 133, .5); }
.crow .arr { color: var(--ink-3); font-size: .9em; }
.crow .now { font-family: var(--head); font-weight: 800; font-size: 1.5em; letter-spacing: -.03em; color: var(--ink); line-height: 1.1; }
.crow .now small { font-size: .5em; color: var(--ink-3); font-weight: 600; letter-spacing: 0; margin-left: .3em; }
.crow .side { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: .35em; }
.trend { display: inline-flex; align-items: center; gap: .3em; font-family: var(--head); font-weight: 700; font-size: .78em; }
.trend.up { color: var(--ok); }
.trend.flat { color: var(--ink-3); }
.flip { position: relative; display: inline-grid; justify-items: end; }
.flip > * { grid-area: 1 / 1; }
.scene.play .flip .old { animation: sc-out .35s ease var(--at) both; }
@keyframes sc-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.7); } }

/* ============ 5. История и поиск ============ */

.search { display: flex; align-items: center; gap: .6em; border: 1.5px solid var(--accent); border-radius: .9em; padding: .6em .85em; background: var(--surface); box-shadow: 0 0 0 .3em var(--accent-soft); margin-bottom: .7em; }
.search svg { flex: none; width: 1.1em; height: 1.1em; color: var(--accent); }
.search .q { font-size: .95em; font-weight: 600; color: var(--ink); white-space: nowrap; }
.search .caret { width: 2px; height: 1.15em; background: var(--accent); animation: sc-caret 1s steps(1) infinite; }
@keyframes sc-caret { 50% { opacity: 0; } }
.found { font-size: .74em; color: var(--ink-3); margin: 0 0 .3em; }
.drow { display: flex; align-items: center; gap: .75em; padding: .55em 0; border-top: 1px solid var(--line-2); overflow: hidden; }
.drow .ic { flex: none; width: 2.1em; height: 2.1em; border-radius: .65em; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.drow .ic svg { width: 1.05em; height: 1.05em; }
.drow .t { flex: 1; min-width: 0; font-size: .84em; color: var(--ink); font-weight: 600; line-height: 1.3; }
.drow .t span { display: block; font-size: .86em; font-weight: 400; color: var(--ink-3); }
.drow .vv { font-family: var(--head); font-weight: 800; font-size: 1.05em; color: var(--ink); white-space: nowrap; }
.drow .vv.warn { color: var(--warn); }
.scene.play .drow.hit { animation: sc-lit .9s ease var(--at) both; }
.scene.play .drow.miss { animation: sc-collapse .55s cubic-bezier(.4, 0, .2, 1) var(--at) both; }
@keyframes sc-collapse { from { max-height: 4em; opacity: 1; } 40% { opacity: 0; } to { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; } }
.mini-chart { margin-top: .6em; padding-top: .7em; border-top: 1px solid var(--line-2); }
.mini-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.mini-chart .xl { display: flex; justify-content: space-between; font-size: .7em; color: var(--ink-3); margin-top: .3em; }

/* ============ Мелкие оживления остальных блоков ============ */

[data-reveal] > * { transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--k, 0) * 70ms); }
.js-reveal [data-reveal]:not(.seen) > * { opacity: 0; transform: translateY(18px); }
.js-reveal .seen .spark path { stroke-dasharray: 1; animation: sc-draw 1.4s cubic-bezier(.4, 0, .2, 1) .3s both; }

@media (prefers-reduced-motion: reduce) {
  .scene *, .scene *::before { animation: none !important; transition: none !important; }
  .js-reveal [data-reveal]:not(.seen) > * { opacity: 1; transform: none; }
}