/* screens/10_survey.css — Заставка (SPL-01), Онбординг (ON-*), Опрос (S-*), Подписка (SUB-*), Системные (X-*). Волны правок 20.10 и v2 21.10.
   Только токены tokens.css, префиксы .spl- / .on- / .sv- / .sub- / .sys-. Персонаж, звёзды, небо, проводник — из библиотеки (h.sunny, h.stars, h.hero, h.guide, h.steps);
   здесь — только раскладка и движение обёрток вокруг них. */

/* лист опроса — колонка: кнопки прижаты к низу экрана, если контента мало */
.sheet.sv { display: flex; flex-direction: column; }
.sv > .sv-actions { margin-top: auto; padding-top: var(--s-5); }
.sv-actions .btn-col { margin-top: 0; }

/* прогресс «вопрос N из 6» — 6 сегментов в верхней строке */
.sv-steps { display: flex; justify-content: center; align-items: center; gap: 6px; }
.sv-steps i { position: relative; overflow: hidden; width: 30px; height: 6px; border-radius: var(--r-pill); background: var(--track); }
/* 22.10: один закатный градиент на всю полоску (210 px = 6 × 30 + 5 × 6), каждый сегмент показывает свой кусок; текущий дорастает и мерцает */
.sv-steps i.on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--acc-sun), var(--acc-orange) 38%, var(--acc-rose) 70%, var(--acc-violet)); background-size: 210px 100%;
  background-position: calc(var(--k, 0) * -36px) 0; }
.sv-steps i.sv-cur { height: 8px; box-shadow: 0 2px 10px -2px var(--acc-rose); }
.sv-steps i.reveal { opacity: 1; transform: none; transition: none; }
.sv-steps i.sv-cur.is-in:not(.is-now)::after { animation: joy-bar .7s cubic-bezier(.2, .8, .2, 1) .15s both; }

/* ═════════ дизайн-проход 22.10: лист вопроса на лёгком тоне, тон меняется от вопроса к вопросу ═════════
   --bg переопределён тоном: им же закрашены низ листа и липкий низ с кнопками (S-5). Пятна — .ld-tone__glow ядра, смыв прошлого тона — .sv-wash */
.sheet.sv-t { background: linear-gradient(180deg, var(--tone-a) 0%, var(--tone-b) 70%); }
.sv-t--cream    { --tone-a: var(--t-cream-a);    --tone-b: var(--t-cream-b);    --tone-g1: var(--t-cream-g1);    --tone-g2: var(--t-cream-g2);    --bg: var(--t-cream-b);
  --sv-acc: var(--acc-orange); --sv-acc-on: var(--acc-orange-on); --sv-pick: var(--card-peach); }
.sv-t--lavender { --tone-a: var(--t-lavender-a); --tone-b: var(--t-lavender-b); --tone-g1: var(--t-lavender-g1); --tone-g2: var(--t-lavender-g2); --bg: var(--t-lavender-b);
  --sv-acc: var(--acc-violet); --sv-acc-on: var(--acc-violet-on); --sv-pick: var(--card-lavender); }
.sv-t--mint     { --tone-a: var(--t-mint-a);     --tone-b: var(--t-mint-b);     --tone-g1: var(--t-mint-g1);     --tone-g2: var(--t-mint-g2);     --bg: var(--t-mint-b);
  --sv-acc: var(--acc-mint); --sv-acc-on: var(--acc-mint-on); --sv-pick: var(--card-mint); }
.sv-t--peach    { --tone-a: var(--t-peach-a);    --tone-b: var(--t-peach-b);    --tone-g1: var(--t-peach-g1);    --tone-g2: var(--t-peach-g2);    --bg: var(--t-peach-b);
  --sv-acc: var(--acc-orange); --sv-acc-on: var(--acc-orange-on); --sv-pick: var(--card-sun); }
.sv-t--sky      { --tone-a: var(--t-sky-a);      --tone-b: var(--t-sky-b);      --tone-g1: var(--t-sky-g1);      --tone-g2: var(--t-sky-g2);      --bg: var(--t-sky-b);
  --sv-acc: var(--acc-sky); --sv-acc-on: var(--acc-sky-on); --sv-pick: var(--card-sky); --ink-2: var(--t-sky-ink2); }
.sheet.sv-t--sky { background: linear-gradient(180deg, var(--t-sky-a) 0%, var(--t-sky-b) 42%); }
.sv-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; margin: 0; }
.sv-bg .ld-tone__glow--2 { top: 46%; bottom: auto; }
.sv-wash { position: absolute; inset: 0; }
.sv-wash.reveal { opacity: 0; transform: none; transition: none; }
.sv-wash.reveal:not(.is-in) { opacity: 1; }
.sv-wash.is-in:not(.is-now) { animation: sv-wash .9s ease .05s both; }
.sv-wash--cream    { background: linear-gradient(180deg, var(--t-cream-a), var(--t-cream-b) 70%); }
.sv-wash--lavender { background: linear-gradient(180deg, var(--t-lavender-a), var(--t-lavender-b) 70%); }
.sv-wash--mint     { background: linear-gradient(180deg, var(--t-mint-a), var(--t-mint-b) 70%); }
.sv-wash--peach    { background: linear-gradient(180deg, var(--t-peach-a), var(--t-peach-b) 70%); }
.sv-wash--sky      { background: linear-gradient(180deg, var(--t-sky-a), var(--t-sky-b) 42%); }
@keyframes sv-wash { from { opacity: 1; } to { opacity: 0; } }

/* чипы: выбранный — цветом тона вопроса (карточка + кольцо + метка), только что нажатый — отскок (.is-pop) */
.sheet.sv-t .pick__opt[aria-pressed="true"] { background: var(--sv-pick); color: var(--ink); box-shadow: inset 0 0 0 2px var(--sv-acc), 0 10px 22px -12px var(--sv-acc); }
.sheet.sv-t .pick__opt[aria-pressed="true"] .pick__mark { background: var(--sv-acc); color: var(--sv-acc-on); }
.sheet.sv-t .pick__opt[aria-pressed="true"] .pick__sub { color: var(--ink-2); }
.sv .pick__opt.is-pop[aria-pressed="true"] { animation: sv-pop .55s cubic-bezier(.3, 1.6, .5, 1) both; }
.sv .pick__opt.is-pop[aria-pressed="true"] .pick__mark { animation: sv-mark .5s cubic-bezier(.3, 1.8, .5, 1) .05s both; }
.sv .pick__opt.is-pop[aria-pressed="false"] { animation: sv-unpop .35s ease both; }
@keyframes sv-pop   { 0% { transform: scale(.93); } 45% { transform: scale(1.035); } 75% { transform: scale(.995); } 100% { transform: none; } }
@keyframes sv-unpop { 0% { transform: scale(.95); } 100% { transform: none; } }
@keyframes sv-mark  { 0% { transform: scale(.2) rotate(-30deg); } 60% { transform: scale(1.25); } 100% { transform: none; } }
@keyframes sv-rise  { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.is-shot .sv .pick__opt.is-pop, .is-shot .sv .pick__opt.is-pop .pick__mark { animation: none; }

/* S-1: строка под прогрессом «Чем точнее ответы…» */
.sv-precise { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: calc(-1 * var(--s-2)) var(--s-2) 0; text-align: center;
  font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-medium); color: var(--ink-2); }
.sv-precise .ic { flex: none; margin-top: 1px; color: var(--accent-ink); }
.sheet--flat > .sv-precise + .page__head { padding-top: var(--s-1); }

/* проводник опроса: h.guide — реплика жирным + «зачем спрашиваем» (P5 разд. 3) */
.sheet--flat > .sv-guide { margin-top: var(--s-3); }
.sv-guide .guide__bubble { padding: 10px 14px; }
.sv-guide .guide__text { display: flex; flex-direction: column; gap: 2px; }
.sv-say { font-size: var(--fs-3); line-height: 22px; font-weight: var(--fw-semibold); color: var(--ink); }
.sv-why { font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-regular); color: var(--ink-2); }
.sheet--flat > .sv-guide + .pick, .sheet--flat > .sv-guide + .card, .sheet--flat > .sv-guide + .field { margin-top: var(--s-4); }

/* вопрос внутри экрана (S-2 «Как давно это с вами?») */
.sv-q { margin: var(--s-5) var(--s-1) 0; font-size: var(--fs-4); line-height: var(--lh-4); font-weight: var(--fw-semibold); color: var(--ink); }
.sv-q + .pick { margin-top: var(--s-3); }
.sv-scale { padding: var(--s-4) var(--s-4) var(--s-3); }

.sv-consent { margin: 0 var(--s-1) var(--s-3); font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }

/* ═════════ онбординг ON-01…ON-03 ═════════ */
.on .ld-hero__in { padding-top: calc(var(--status-h) + 4px); padding-bottom: 52px; }
.on .ld-hero__sunny { margin-bottom: var(--s-2); }
.on .ld-hero__text { max-width: 300px; }
.sheet--flat.on > .ld-hero + * { margin-top: var(--s-5); }

/* «Пропустить» поверх неба — белым, тач 44 */
.on-skip { flex: none; min-width: var(--tap); height: var(--tap); padding: 0 var(--s-3); border: 0; border-radius: var(--r-pill); background: var(--scrim);
  box-shadow: inset 0 0 0 1px var(--scrim-line); color: var(--on-scene); font: inherit; font-size: var(--fs-2); font-weight: var(--fw-semibold); cursor: pointer; }

/* точки-прогресс 3 шагов */
.on-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: var(--s-4); }
.on-dots i { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--track); transition: width .3s, background .3s; }
.on-dots i.on { width: 24px; background: var(--accent); }

/* ON-02: плитки ценности — цветные h.card({tone}) столбиком: кружок слева, текст справа */
.on-vals { gap: var(--s-2); }
.card.on-val { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); }
.on-val .card__ic { grid-row: 1 / span 2; margin: 0; }
.on-val .card__title { font-size: var(--fs-3); line-height: 22px; }
.on-val .card__text { margin-top: 2px; }
.on-sud { font-size: 11px; line-height: 1; font-weight: var(--fw-bold); letter-spacing: -.02em; }
.on-honest { margin: 0 var(--s-2); font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); text-align: center; }

/* ON-03: шаги */
.on-steps { padding: 0 var(--s-1); }
.on-steps .ld-step { padding-bottom: var(--s-4); }
.on-steps .ld-step:last-child { padding-bottom: 0; }

.on--1 .ld-hero__title { max-width: 300px; }

/* ON-02 (v3): Джой показывает рукой и один раз проходит влево-вправо («ведёт взгляд»): идёт влево — смотрит и показывает влево (зеркально), вправо — вправо.
   Касание — проходит ещё раз (.is-tap). Пузырь с репликой стоит под ним, хвостик вверх */
.on-hero--look .ld-hero__in { padding-top: calc(var(--status-h) + 8px); }
.on-look { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; margin-bottom: var(--s-3); }
.on-look > .on-sun { animation: on-pass 2.6s cubic-bezier(.45, 0, .55, 1) .5s both; }
.on-look > .on-sun > span { display: inline-flex; animation: on-face 2.6s steps(1, end) .5s both; }
.on-look.is-tap > .on-sun { animation-name: on-pass-2; }
.on-look.is-tap > .on-sun > span { animation-name: on-face-2; }
@keyframes on-pass   { 0%, 100% { transform: none; } 30% { transform: translateX(-96px); } 70% { transform: translateX(96px); } }
@keyframes on-pass-2 { 0%, 100% { transform: none; } 30% { transform: translateX(-96px); } 70% { transform: translateX(96px); } }
@keyframes on-face   { 0% { transform: scaleX(-1); } 30%, 100% { transform: none; } }
@keyframes on-face-2 { 0% { transform: scaleX(-1); } 30%, 100% { transform: none; } }
.btn.on-sun { width: 108px; height: 104px; min-height: var(--tap); padding: 0; border-radius: 50%; background: transparent; color: var(--on-scene); }
.btn.on-sun:focus-visible { outline: 2px solid var(--on-scene); outline-offset: 2px; }
.on-bubble { position: relative; max-width: 300px; margin: var(--s-2) 0 0; padding: 10px 14px; border-radius: 18px; background: var(--surface); color: var(--ink);
  box-shadow: var(--sh-2); border: 1px solid var(--card-border); font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-medium); text-align: center; }
.on-bubble::before { content: ""; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; background: inherit;
  border-left: 1px solid var(--card-border); border-top: 1px solid var(--card-border); border-radius: 4px 0 0 0; transform: rotate(45deg); }
.is-shot .on-look > .on-sun, .is-shot .on-look > .on-sun > span { animation: none; }
.on--2 .on-honest { margin-top: var(--s-3); }

/* ON-03: подпись о времени с подмигивающим персонажем — персиковая h.card({tone}), появляется после шагов */
.card.on-time { display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-4) 10px 10px; }
.on-time__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.on-time__t b { font-size: var(--fs-4); line-height: var(--lh-4); font-weight: var(--fw-bold); color: var(--ink); }
.on-time__t span { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
.on-time > .ic { flex: none; color: var(--acc-orange-ink); }
.on-tone .ld-section__body > .on-time { --rd: 1.9s; }
.on--3 .ld-hero__title { max-width: 280px; }

/* ═════════ заставка SPL-01: небо на весь экран, солнышко просыпается, касание в любом месте — дальше ═════════ */
.sheet.spl { position: relative; min-height: 100%; padding-bottom: 0; overflow: hidden; }
.spl > .sheet__end { display: none; }
.sheet--flat.spl > .ld-hero--bleed:first-child { margin-bottom: 0; border-radius: 0; }
.app__scroll:has(> .spl) { overflow: hidden; }
.spl-hero { align-items: center; }
.spl-hero .ld-hero__in { padding: 0 var(--s-5) 150px; }
.spl-fig { display: block; margin-bottom: var(--s-4); }
.spl-say { margin: 0; font-size: var(--fs-l); line-height: var(--lh-l); font-weight: var(--fw-bold); letter-spacing: -.01em; color: var(--on-scene);
  animation: on-rise .5s cubic-bezier(.2, .9, .3, 1.2) 1.9s both; }
.spl-voice { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: var(--s-3) 0 0; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--scrim); box-shadow: inset 0 0 0 1px var(--scrim-line); color: var(--on-scene); font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold); }
.spl-foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 96px; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin: 0; pointer-events: none; }
.spl-bar { display: block; width: 120px; height: 4px; border-radius: var(--r-pill); background: var(--scrim-line); overflow: hidden; }
.spl-bar i { display: block; height: 100%; border-radius: inherit; background: var(--on-scene); transform-origin: 0 50%; animation: spl-fill 2.5s linear both; }
.spl-hint { font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-medium); color: var(--on-scene-2); }
.btn.spl-tap { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border-radius: 0; background: transparent; }
.btn.spl-tap:focus-visible { outline: 2px solid var(--on-scene); outline-offset: -6px; }
.spl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes spl-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes on-rise  { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
/* снимок — кадр зевка (персонаж уже просыпается), реплика и полоска видны */
.is-shot .spl-fig .sunny { --sunny-phase: -0.95s; }
.is-shot .spl-say { animation: none; }
.is-shot .spl-bar i { animation: none; transform: scaleX(.4); }

/* ON-03 — плотнее, чтобы согласие и кнопка влезали в 844 */
.on--3 .on-steps .ld-step { padding-bottom: var(--s-3); }
.on--3 .on-steps .ld-step:last-child { padding-bottom: 0; }
.card.on-time { padding-top: 8px; padding-bottom: 8px; }
.on--3 .on-dots { margin-bottom: var(--s-3); }
.on-tone .ld-section__body > .on-time { margin-top: var(--s-3); }
.on--3 .sv-consent { margin-bottom: var(--s-2); }
.on-hero--look .on-look { margin-bottom: var(--s-4); }

/* ═════════ дизайн-проход 22.10: слайд онбординга на своём тоне ═════════
   небо (h.hero) сверху без скругления, под ним тонированная h.section заходит волной на холмы и тянется до низа экрана; кнопки — внутри неё */
.sheet--flat.on > .ld-hero--bleed:first-child { border-radius: 0; }
.sheet--flat.on > .ld-hero + .on-tone.ld-tone { margin-top: 0; }
.sheet.on > .on-tone { flex: 1 0 auto; display: flex; flex-direction: column; padding-top: var(--s-5); padding-bottom: var(--s-2); }
.on-tone > .ld-section__body { flex: 1; display: flex; flex-direction: column; }
.on-tone .ld-section__body > * + * { margin-top: var(--s-4); }
.on-tone .ld-section__body > .sv-actions { margin-top: auto; padding-top: var(--s-4); }
.sheet.on-t--sky { --bg: var(--t-sky-b); }
.sheet.on-t--peach { --bg: var(--t-peach-b); }
.sheet.on-t--lavender { --bg: var(--t-lavender-b); }
.on-tone .on-dots i.on { background: var(--acc); }

/* длинные экраны (S-5 с полями, SUB-01, SUB-02 ожидание): кнопки прилипают к низу, контент прокручивается под ними */
.sv.sv--sticky > .sv-actions { position: sticky; bottom: 0; z-index: 4; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
  padding: var(--s-5) var(--gutter) calc(var(--home-h) + 4px); background: linear-gradient(to bottom, transparent, var(--bg) 22px); }
.sv.sv--sticky > .sheet__end { height: 0; }
/* S-5: «Когда были последний раз?» — три чипа в одну строку */
.sv-when { flex-wrap: nowrap; gap: 6px; }
.sv-when .pick__opt { padding-left: 12px; padding-right: 12px; white-space: nowrap; }

/* ═════════ подписка SUB-01, SUB-02 ═════════ */
.sub .ld-hero__in { padding-top: calc(var(--status-h) + 8px); padding-bottom: 52px; }
.sub .ld-hero__sunny { margin-bottom: var(--s-2); }
.sheet--flat.sub > .ld-hero + * { margin-top: var(--s-5); }

/* карточка канала */
.card.sub-ch { padding: var(--s-4); }
.sub-ch__head { display: flex; align-items: center; gap: var(--s-3); }
.sub-ch__ava { width: 56px; height: 56px; margin-left: 4px; }
.sub-ch__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sub-ch__id b { font-size: var(--fs-4); line-height: var(--lh-4); font-weight: var(--fw-bold); color: var(--ink); }
.sub-ch__id span { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
.sub-ch__tg { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--card-ic); color: var(--card-ic-on);
  box-shadow: 0 8px 16px -8px var(--card-ic); }
/* «Что даёт канал» (волна v2, P5 разд. 4) — лавандовая плашка h.band (22.10); пункты — карточки с цветными кружками */
.sub-give-band .ld-band__cta { margin-top: var(--s-4); }
.sub-give { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.sub-give li { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3); border-radius: var(--r-1);
  background: var(--surface); box-shadow: var(--sh-1); }
.sub-give__ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: var(--acc-on);
  box-shadow: 0 6px 14px -6px var(--acc); }
.sub-give-band.is-in:not(.is-now) .sub-give li { animation: sv-rise .55s cubic-bezier(.2, .8, .3, 1.2) both; animation-delay: calc(.35s + var(--k) * .1s); }
.sub-give__t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sub-give__t b { font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-semibold); color: var(--ink); }
.sub-give__t > span { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
.sub-ph { font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-medium); color: var(--accent-ink); }
.sub-give__t b .sub-ph { display: block; }

.sub-why { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) var(--s-1) 0; font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-medium); color: var(--ink-2); }
.sub-why .ic { flex: none; color: var(--accent-ink); }
.sub-hint { margin: 0 var(--s-1) var(--s-3); text-align: center; font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }

/* SUB-02 «Пока не вижу подписку» — голубая h.card({tone: 'sky'}), значок крутится при входе */
.card.sub-wait { display: flex; gap: var(--s-3); align-items: center; }
.sub-wait p { margin: 0; font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink); }
.sub-wait__ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--card-ic); color: var(--card-ic-on);
  animation: sub-spin 1.2s cubic-bezier(.5, 0, .3, 1) .4s 2 both; }
@keyframes sub-spin { to { transform: rotate(360deg); } }
.is-shot .sub-wait__ic { animation: none; }

/* SUB-02: шапка — тонированная секция ядра на всю ширину под системной строкой (ожидание — night, успех — sunset) */
.sheet--flat.sub > .sub-top.ld-tone:first-child { margin-top: calc(-1 * (var(--status-h) + var(--s-2))); padding-top: var(--status-h); }
.sub-top .topbar { margin: 0 calc(-1 * var(--s-2)); }
.sub-top .topbar__back { color: var(--ink); }
.sub-top.ld-section--rich:not(.is-in) .ld-section__body > .topbar { opacity: 1; transform: none; }
.sheet--flat.sub > .sub-top + * { margin-top: var(--s-4); }
/* ожидание: проводник с лупой на night, реплика меняется через 2,6 с (CSS, один раз) */
.sub-search .ld-section__body { padding-bottom: var(--s-2); }
.sub-search .sub-guide { margin-top: var(--s-3); }
.sub-search .ld-hero__title { margin-top: var(--s-4); text-align: center; }
.sub-guide .guide__text { position: relative; display: grid; }
.sub-say { grid-area: 1 / 1; }
.sub-say--2 { opacity: 0; animation: sub-say-in .4s ease 2.6s both; }
.sub-say--1 { animation: sub-say-out .3s ease 2.4s both; }
@keyframes sub-say-in  { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes sub-say-out { from { opacity: 1; } to { opacity: 0; } }
.is-shot .sub-say--1 { animation: none; opacity: 1; }
.is-shot .sub-say--2 { animation: none; opacity: 0; }
.sheet--flat.sub > .sub-wait + .sub-ch { margin-top: var(--s-3); }

/* SUB-02 «Подписка получена» на sunset: солнышко подмигивает → через 2,4 с радуется (два персонажа в одной точке, смена прозрачностью) */
.sub-ok .ld-section__body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s-6) 0 var(--s-6); }
.sub-ok .ld-tone__sun { right: -70px; bottom: -92px; }   /* закатное солнце ниже — текст «До … Наденьте наушники» не ложится на него */
.sub-ok .ld-hero__text { max-width: 300px; }
.sub-ok__sun { position: relative; display: block; width: 128px; height: 128px; margin-bottom: var(--s-4); }
.sub-ok__sun .sunny { position: absolute; inset: 0; }
.sub-ok__a { animation: sub-out .5s ease 2.4s both; }
.sub-ok__b { animation: sub-in .5s ease 2.4s both; }
@keyframes sub-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.85); } }
@keyframes sub-in  { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.card.sub-ok__card { padding: var(--s-4) var(--s-5); }
/* снимки — кадр подмигивания; без анимаций — сразу итог «радуется» */
.is-shot .sub-ok__a { animation: none; opacity: 1; }
.is-shot .sub-ok__b { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .sub-ok__a { animation: none; opacity: 0; }
  .sub-ok__b { animation: none; opacity: 1; }
}

/* ═════════ системные: думающий персонаж + значок причины ═════════ */
.sys .sys-body { margin-top: auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--s-4); }
.sys .sys-body .page__head { padding-top: var(--s-4); }
.sys .sys-body .page__text { margin-top: var(--s-2); }
.sys-fig { position: relative; display: block; color: var(--ink-3); }
.sys-ic { position: absolute; right: -4px; bottom: 4px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--on-primary-soft); box-shadow: 0 0 0 3px var(--bg); }
.sys-code { margin: var(--s-3) var(--s-1) 0; text-align: center; font-size: var(--fs-1); line-height: var(--lh-1); color: var(--ink-3); }

/* меньше движения: заставка и онбординг — сразу конечный кадр */
@media (prefers-reduced-motion: reduce) {
  .spl-say, .spl-bar i, .on-look > .on-sun, .on-look > .on-sun > span, .sub-say--1, .sub-say--2, .sub-fig__a, .sub-fig__b { animation: none !important; }
  .sv-wash, .sv-steps i::after, .sv .pick__opt, .sv .pick__mark, .sub-give li, .sub-wait__ic { animation: none !important; }
  .sv-wash { opacity: 0 !important; }
  .sub-say--2 { opacity: 0; }
  .sub-fig__a { opacity: 0; }
  .sub-fig__b { opacity: 1; }
}

/* ═════════ правки v3 23.10 (ПРАВКИ_23.10_v3.md, P6 блоки 1–5) ═════════ */
/* ON-01: Джой машет и говорит в пузыре — проводник h.guide на небе, над заголовком; три тезиса — цветные h.card({icon, tone}) столбиком */
.on-hero .on-joy { width: 100%; margin-bottom: var(--s-4); text-align: left; }
.on-joy .guide__bubble { padding: 10px 14px; border-radius: 18px; }
.on-joy .guide__text { font-size: var(--fs-2); line-height: var(--lh-2); }
.on--1 .ld-hero__title { max-width: 320px; }
.on--1 .ld-hero__text { max-width: 320px; font-size: var(--fs-2); line-height: var(--lh-2); }
.on--1 .ld-hero__in { padding-bottom: 44px; }
.on .on-vals .card__text { font-size: var(--fs-2); line-height: var(--lh-2); }
.on--1 .on-tone .ld-section__body > * + *, .on--2 .on-tone .ld-section__body > * + * { margin-top: var(--s-3); }
.on--1 .on-vals .card.on-val, .on--2 .on-vals .card.on-val { padding: 10px var(--s-4) 10px var(--s-3); }
/* ON-02: плитка шкалы 0–10 — только строка */
.on-val--sud .card__text { grid-row: 1 / span 2; margin: 0; color: var(--ink); }
.on--2 .ld-hero__in { padding-bottom: 44px; }
.on--2 .ld-hero__text { max-width: 320px; font-size: var(--fs-2); line-height: var(--lh-2); }
.on--2 .on-honest { margin-top: var(--s-2); }
/* ON-03: реплика Джой в шапке; «Что вы получите» — Джой показывает рукой вниз, на кнопку */
.on--3 .on-joy--sm { margin-bottom: var(--s-2); }
.on--3 .ld-hero__in { padding-bottom: 40px; }
.on-steps .ld-step__text { font-size: var(--fs-2); line-height: var(--lh-2); }
.card.on-get { align-items: center; padding: 10px var(--s-4) 10px var(--s-3); }
.on-get__joy { flex: none; margin-top: -4px; }
.on-get .on-time__t { gap: 4px; }
.on-get__what { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink); }
.on-get__what b { font-size: inherit; line-height: inherit; font-weight: var(--fw-semibold); }
.on-time__t .on-get__time { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold); color: var(--acc-orange-ink); }

/* S-5: «Когда были в последний раз?» — чипы переносятся (подписи длиннее) */
.sv-when.sv-when--wrap { flex-wrap: wrap; }

/* SUB-01 / SUB-02: крупная карточка канала */
.card.sub-ch--big { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.sub-ch--big .sub-ch__ava { width: 64px; height: 64px; }
.sub-ch__n { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-semibold); }
.sub-ch__id .sub-ch__n { color: var(--acc-orange-ink); }
.sub-ch__about { margin: 0; font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink); }
.sub-ch__rub { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3); border-radius: calc(var(--r-1) - 8px); background: var(--surface); box-shadow: var(--sh-1); }
.sub-ch__rub-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--acc-violet); color: var(--acc-violet-on); }
.sub-ch__rub-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sub-ch__rub-t b { font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-semibold); color: var(--ink); }
.sub-ch__rub-t b .sub-ph { display: block; }
.sub-ch__rub-t > span { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
.sheet--flat.sub > .sub-ch + .sub-wait { margin-top: var(--s-3); }
.sheet--flat.sub > .sub-ch + .sub-give-band { margin-top: var(--s-5); }
/* SUB-02 ожидание: логотип сразу справа от стрелки «назад»; Джой ищет с лупой → через 2,6 с достаёт телефон */
.sub-top .topbar__title.sub-brand { display: flex; justify-content: flex-start; padding-left: 6px; }
.sub-fig { position: relative; display: block; width: 80px; height: 80px; }
.sub-fig .sunny { position: absolute; inset: 0; }
.sub-fig__a { animation: sub-out .4s ease 2.4s both; }
.sub-fig__b { opacity: 0; animation: sub-in .45s ease 2.6s both; }
.is-shot .sub-fig__a { animation: none; opacity: 1; }
.is-shot .sub-fig__b { animation: none; opacity: 0; }
/* снимок ожидания — конечный кадр: телефон в руках и вторая реплика */
.is-shot .sub-fig__a { opacity: 0; }
.is-shot .sub-fig__b { opacity: 1; }
.is-shot .sub-say--1 { opacity: 0; }
.is-shot .sub-say--2 { opacity: 1; }

/* v3: онбординг плотнее — большой логотип (ON-01), 4 шага (ON-03) и текст о методе (ON-02) влезают в 844 */
.on .ld-hero__in { padding-top: calc(var(--status-h) + 40px); }
.on--1 .ld-hero__in { padding-top: 80px; padding-bottom: 36px; }
.on--3 .ld-hero__in { padding-top: 36px; padding-bottom: 30px; }
.on-hero--look .ld-hero__in { padding-top: 40px; padding-bottom: 36px; }
.sheet.on > .on-tone { padding-top: var(--s-3); }
.on--1 .on-vals, .on--2 .on-vals { gap: 6px; }
.on--1 .on-vals .card.on-val, .on--2 .on-vals .card.on-val { padding: 8px var(--s-4) 8px var(--s-3); }
.on--1 .on-dots, .on--3 .on-dots { margin-bottom: var(--s-2); }
.on--1 .on-tone .ld-section__body > .sv-actions, .on--3 .on-tone .ld-section__body > .sv-actions { padding-top: var(--s-3); }
.on--3 .on-steps .ld-step { padding-bottom: 6px; }
.on--3 .on-tone .ld-section__body > * + * { margin-top: var(--s-3); }
.on--3 .ld-hero__title { margin-top: 0; }
/* ON-02: кнопка прилипает к низу (onPage sticky) — фон низа цветом тона */
.sv.on--sticky > .sv-actions { padding-top: var(--s-4); }
.sv.on--sticky > .sv-actions .on-dots { margin-bottom: var(--s-3); }
.on-hero--look .ld-hero__in { padding-top: 50px; }
.on--3 .ld-hero__in { padding-top: 48px; padding-bottom: 26px; }
.on--3 .on-steps .ld-step__title { font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-semibold); }
.on--3 .on-steps .ld-step { padding-bottom: 4px; }
.on--3 .on-tone .ld-section__body > * + * { margin-top: 10px; }
.on--3 .on-tone .ld-section__body > .sv-actions { padding-top: 8px; }
.on--3 .on-dots { margin-bottom: 6px; }
.on--3 .sv-consent { margin-bottom: 6px; }
.sheet.on--3 > .on-tone { padding-top: 6px; }
.on--3 .card.on-get { padding-top: 8px; padding-bottom: 8px; }
.on--3 .ld-hero__in { padding-bottom: 42px; }
.on-joy--sm .guide__bubble { padding: 8px 12px; }
.sv.on--sticky > .sv-actions { padding-top: 30px; background: linear-gradient(to bottom, transparent, var(--bg) 26px); }
.on--3 .on-tone .ld-section__body > * + * { margin-top: 8px; }
.on--3 .on-steps .ld-step { padding-bottom: 2px; }

/* QA 23.10: подсказка заставки читается на светлом низу */
.spl-hint { color: var(--ink-2); }
:root[data-theme="dark"] .spl-hint { color: var(--on-scene-2); }