/* J.O.Y — компоненты стиля «Закат». Только токены из tokens.css, никаких «сырых» цветов,
кроме рисунка сцены (солнце/луна — фиксированная иллюстрация, как в v11).
Порядок: база → каркас экрана → сцена → лист и карточки → кнопки → бейдж/чип → аватар →
карточка сессии → плитка темы → строка-ссылка → ползунок 0–10 → док «Записаться» → таб-бар → стенд. */
/* ───────── база ───────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); font-size: var(--fs-3); line-height: var(--lh-3); color: var(--ink);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; }
.ic { flex: none; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* ───────── каркас экрана ─────────
.app — экран 390 × 844: прокручиваемая область .app__scroll + прибитый к низу .app__dock */
.app { position: relative; width: 390px; height: 844px; overflow: hidden; background: var(--bg); color: var(--ink);
display: flex; flex-direction: column; }
.app__scroll { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; } /* x hidden — въезд персонажа сбоку (21.10) */
.app__scroll::-webkit-scrollbar { display: none; }
.app__dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; }
/* системная строка (только на макете; в Telegram её рисует клиент) */
.statusbar { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: var(--status-h); display: flex;
align-items: center; justify-content: space-between; padding: 4px 30px 0 40px; color: #fff; pointer-events: none; }
.statusbar__time { font-size: var(--fs-3); font-weight: var(--fw-semibold); letter-spacing: -.01em; }
.statusbar__icons { display: flex; gap: 6px; align-items: center; }
.statusbar__island { position: absolute; top: 11px; left: 50%; width: 124px; height: 36px; margin-left: -62px;
border-radius: var(--r-pill); background: #000; }
/* ───────── сцена-шапка: небо, звёзды, холмы, солнце (светлая) / луна (тёмная) ─────────
Высота — через --scene-h. Рисунок — inline SVG .scene__art; содержимое — .scene__in. */
.scene { position: relative; height: var(--scene-h, 240px); overflow: hidden;
background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 50%, var(--sky-3) 82%, var(--sky-4) 100%); }
.scene__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene__art .spark { fill: var(--spark); }
.scene__art .star { fill: var(--star); opacity: .75; }
.scene__art .hill-1 { fill: var(--hill-1); }
.scene__art .hill-2 { fill: var(--hill-2); }
.scene__art .halo { fill: #FFB86B; }
.scene__art .sun { display: inline; }
.scene__art .moon { display: none; }
[data-theme="dark"] .scene__art .sun { display: none; }
[data-theme="dark"] .scene__art .moon { display: inline; }
[data-theme="dark"] .scene__art .halo { fill: #E9E0FF; }
.scene__in { position: relative; z-index: 2; padding: var(--status-h) 20px 0; color: var(--on-scene); }
.scene__bar { height: 48px; display: flex; align-items: center; justify-content: space-between; }
.scene__logo { height: 20px; width: auto; display: block; filter: brightness(0) invert(1); }
.scene__date { margin-top: var(--s-2); font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold);
letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--date); }
.scene__title { margin-top: var(--s-1); max-width: 230px; font-size: var(--fs-5); line-height: var(--lh-5);
font-weight: var(--fw-bold); letter-spacing: -.01em; color: var(--on-scene); }
/* ───────── лист ───────── */
.sheet { position: relative; z-index: 3; margin-top: calc(-1 * var(--sheet-overlap)); min-height: 200px;
border-radius: var(--r-2) var(--r-2) 0 0; background: var(--bg); padding: var(--s-3) var(--gutter) 0; }
.sheet__end { height: var(--dock-space, 190px); } /* запас под док + таб-бар, чтобы низ не прятался */
/* ───────── карточка ───────── */
.card { background: var(--surface); border-radius: var(--r-1); box-shadow: var(--sh-1); border: 1px solid var(--card-border); }
.card--pad { padding: var(--s-4); }
/* ───────── заголовок секции ───────── */
.section { margin-top: var(--s-5); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); padding: 0 var(--s-1); }
.section__title { font-size: var(--fs-4); line-height: var(--lh-4); font-weight: var(--fw-bold); }
.section__note { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
/* ───────── кнопки: primary / secondary / ghost (+ line для дока) ───────── */
.btn { min-height: var(--btn-h); border: 0; border-radius: var(--r-pill); display: inline-flex; align-items: center;
justify-content: center; gap: var(--s-2); padding: 6px 20px; font-size: var(--fs-3); line-height: 20px;
font-weight: var(--fw-semibold); text-align: center; text-decoration: none; white-space: nowrap; }
.btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--sh-2); }
.btn--secondary { background: var(--primary-soft); color: var(--on-primary-soft); }
.btn--ghost { background: transparent; color: var(--ink-2); min-height: var(--tap); padding: 0 12px; font-weight: var(--fw-medium); font-size: var(--fs-2); }
.btn--line { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
[data-theme="dark"] .btn--line { box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.btn--wide { width: 100%; min-height: var(--btn-h-lg); padding-inline: var(--s-4); }
.btn__play { flex: none; width: 32px; height: 32px; margin-left: -8px; border-radius: 50%; display: grid; place-items: center;
background: rgba(255,255,255,.18); }
.btn:active { transform: scale(.97); } /* 22.10: нажатие — пружинка, переход — в блоке «дизайн-проход 22.10» */
/* ───────── бейдж (статус окна) и чип ───────── */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; border-radius: var(--r-pill);
font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-medium); white-space: nowrap; }
.badge::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge--open { background: var(--success-soft); color: var(--success); }
.badge--warn { background: var(--track); color: var(--accent-ink); }
.badge--off { background: var(--field); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.badge--done { background: var(--primary-soft); color: var(--on-primary-soft); }
.badge b { font-weight: var(--fw-semibold); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; border-radius: var(--r-pill);
font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold); white-space: nowrap; }
.chip--lock { background: rgba(255,255,255,.62); color: var(--ink); }
[data-theme="dark"] .chip--lock { background: rgba(255,255,255,.08); color: var(--ink-2); }
.chip--scene { background: var(--scrim); box-shadow: inset 0 0 0 1px var(--scrim-line); color: var(--on-scene); }
/* ───────── аватар ───────── */
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.avatar--ring { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.avatar--scene { width: 40px; height: 40px; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
[data-theme="dark"] .avatar--scene { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.avatar-btn { width: var(--tap); height: var(--tap); border: 0; padding: 0; margin-right: -2px; background: transparent;
border-radius: 50%; display: grid; place-items: center; }
/* ───────── карточка сессии (главный блок экрана «Сессии») ───────── */
.session { padding: var(--s-4); }
.session__head { display: flex; align-items: center; gap: var(--s-3); }
.session__over { font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold); letter-spacing: .06em;
text-transform: uppercase; color: var(--accent-ink); }
.session__by { font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-medium); color: var(--ink-2); }
.session__badge { margin-left: auto; }
.session__title { margin: var(--s-3) var(--s-1) 0; font-size: var(--fs-4); line-height: 26px; font-weight: var(--fw-semibold); letter-spacing: -.005em; }
.session__meta { margin: var(--s-2) var(--s-1) 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
.session__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
.session__status { margin: var(--s-3) 0 0; }
.session__cta { margin-top: var(--s-4); }
.session__hint { margin: var(--s-3) var(--s-1) 0; display: flex; gap: var(--s-2); font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
.session__hint .ic { margin-top: 2px; color: var(--ink-3); }
/* ───────── плитка темы (жёлтая / розовая), состояния: обычная и --locked ───────── */
.tiles { margin-top: var(--s-3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.tile { position: relative; overflow: hidden; min-height: 128px; border: 0; border-radius: var(--r-1); padding: var(--s-4);
text-align: left; display: flex; flex-direction: column; gap: var(--s-1); text-decoration: none; }
.tile__title { position: relative; font-size: var(--fs-3); line-height: 22px; font-weight: var(--fw-semibold); }
.tile__sub { position: relative; font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-medium); }
.tile__foot { position: relative; margin-top: auto; padding-top: var(--s-3); }
.tile__deco { position: absolute; right: 0; top: 0; }
.tile--sun { background: var(--sun); color: var(--on-sun); }
.tile--sun .tile__deco .d1 { fill: var(--sun-deco-1); }
.tile--sun .tile__deco .d2 { fill: var(--sun-deco-2); }
.tile--rose { background: var(--rose); color: var(--on-rose); }
.tile--rose .tile__deco .d1 { fill: #FFB3C5; }
.tile--rose .tile__deco .d2 { fill: #FF9DB5; }
[data-theme="dark"] .tile--rose .tile__deco .d1 { fill: #5A3053; }
[data-theme="dark"] .tile--rose .tile__deco .d2 { fill: #4E2A49; }
/* заперта: фон бледнее, текст остаётся тёмно-синим (контраст AA), декор гаснет, замок в чипе */
.tile--locked { cursor: default; }
.tile--locked.tile--sun { background: var(--sun-muted); }
.tile--locked.tile--rose { background: var(--rose-muted); }
.tile--locked .tile__deco .d1, .tile--locked .tile__deco .d2 { fill: var(--tile-deco-muted); }
[data-theme="dark"] .tile--locked { color: var(--ink-2); }
/* ───────── строка-ссылка (переход в раздел) ───────── */
.row-link { display: flex; align-items: center; gap: var(--s-3); min-height: 72px; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
text-decoration: none; color: var(--ink); }
.row-link__ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
background: var(--primary-soft); color: var(--on-primary-soft); }
.row-link__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-link__title { font-size: var(--fs-3); line-height: 22px; font-weight: var(--fw-semibold); }
.row-link__sub { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
.row-link__chev { color: var(--ink-3); }
/* ───────── ползунок 0–10 с солнцем-бегунком (из v11; для замеров «до/после») ─────────
*/
.scale { position: relative; --v: 4; }
.scale input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--tap); margin: 0; background: transparent; cursor: pointer; }
.scale input:focus { outline: none; }
.scale input::-webkit-slider-runnable-track { height: 12px; border-radius: var(--r-pill);
background: linear-gradient(90deg, var(--fill-a), var(--fill-b)) 0 0 / calc(22px + (100% - 44px) * var(--v) / 10) 100% no-repeat, var(--track); }
.scale input::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; margin-top: -16px; border-radius: 50%;
background: var(--thumb-sun) center / 44px 44px no-repeat; box-shadow: var(--sh-1), 0 2px 6px rgba(242,106,27,.25); }
.scale input::-moz-range-track { height: 12px; border-radius: var(--r-pill); background: var(--track); }
.scale input::-moz-range-progress { height: 12px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--fill-a), var(--fill-b)); }
.scale input::-moz-range-thumb { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--thumb-sun) center / 44px 44px no-repeat; }
[data-theme="dark"] .scale input::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(255,255,255,.10); }
.scale__nums { position: relative; height: 20px; margin-top: var(--s-1); }
.scale__nums span { position: absolute; top: 0; width: 24px; margin-left: -12px; text-align: center; font-size: var(--fs-2);
line-height: var(--lh-2); color: var(--ink-3); font-variant-numeric: tabular-nums; left: calc(22px + (100% - 44px) * var(--i) / 10); }
.scale__nums span.on { color: var(--ink); font-weight: var(--fw-bold); }
.scale__ends { display: flex; justify-content: space-between; margin-top: var(--s-1); font-size: var(--fs-1); line-height: var(--lh-1); color: var(--ink-2); }
/* ───────── док: липкая «Записаться к Марии» над таб-баром ───────── */
.lead-dock { padding: var(--s-5) var(--gutter) var(--s-2); background: linear-gradient(180deg, transparent 0, var(--dock-bg) 22px); pointer-events: none; }
.lead-dock .btn { pointer-events: auto; }
.lead-dock .btn { width: 100%; min-height: 52px; }
/* ───────── таб-бар: 5 разделов, активный — оранжевый ───────── */
.tabbar { background: var(--nav-bg); border-top: 1px solid var(--line); padding: var(--s-1) var(--s-1) 0; }
.tabbar__tabs { display: flex; }
.tab { flex: 1; min-width: 0; height: var(--tab-h); border: 0; background: transparent; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: var(--s-1); padding: 0; font-size: var(--fs-1); line-height: var(--lh-1);
font-weight: var(--fw-medium); color: var(--nav-ink); text-decoration: none; white-space: nowrap; }
.tab[aria-current="page"] { color: var(--nav-active); font-weight: var(--fw-semibold); }
.tab[aria-current="page"] .ic { color: var(--nav-active-ic); }
.homebar { height: var(--home-h); display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--s-2); }
.homebar i { width: 134px; height: 5px; border-radius: var(--r-pill); background: var(--ink); opacity: .9; }
/* ───────── стенд вокруг телефона (только для просмотра макета) ───────── */
.stand { min-height: 100vh; background: var(--stage); display: flex; flex-direction: column; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-4) var(--s-6); }
.stand__bar { width: 390px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); color: var(--stage-ink); font-size: var(--fs-2); }
.stand__phone { border-radius: 44px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 24px 48px rgba(31,27,90,.16); }
.theme-switch { height: var(--tap); border: 0; border-radius: var(--r-pill); padding: 0 16px; display: inline-flex; align-items: center; gap: var(--s-2);
background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-2); font-weight: var(--fw-medium); }
/* окно 390 px и уже (снимки, реальный телефон): телефон на всю ширину, стенд скрыт */
@media (max-width: 430px) {
.stand { padding: 0; gap: 0; background: var(--bg); }
.stand__bar { display: none; }
.stand__phone { border-radius: 0; box-shadow: none; }
}
/* ?shot=1 — режим снимка: телефон в левом верхнем углу без стенда (headless Chrome не даёт окно уже 500 px) */
.is-shot .stand { padding: 0; gap: 0; align-items: flex-start; background: var(--bg); }
.is-shot .stand__bar { display: none; }
.is-shot .stand__phone { border-radius: 0; box-shadow: none; }
/* ?full=1 — вся лента одним листом (проверка низа экрана) */
.is-full .app { height: auto; }
.is-full .app__scroll { overflow: visible; }
.is-full .app__dock { position: relative; }
.is-full .sheet__end { height: var(--s-5); }
/* ═════════ добавлено 17.10 для app.html (каркас всех экранов) ═════════
Новые блоки под хелперы h.* из app.js. Существующие правила выше не менялись.
Править этот раздел — только через фронтенд-архитектора (README → «Запросы на компоненты»). */
/* лист без сцены: опрос, подписка, заявка, отзыв, разделы, системные */
.sheet--flat { margin-top: 0; border-radius: 0; min-height: 100%; padding-top: calc(var(--status-h) + var(--s-2)); }
/* ритм блоков на листе без сцены: 16 px между соседями; у .field, .section, .btn-col, .page__text свои отступы (правила ниже) */
.sheet--flat > :where(* + *) { margin-top: var(--s-4); }
/* верхняя строка: «назад» + заголовок по центру */
.topbar { display: flex; align-items: center; gap: var(--s-1); height: 48px; margin: 0 calc(-1 * var(--s-2)) var(--s-2); }
.topbar__back, .topbar__gap { flex: none; width: var(--tap); height: var(--tap); }
.topbar__back { border: 0; border-radius: 50%; background: transparent; color: var(--ink); display: grid; place-items: center; }
.topbar__title { flex: 1; min-width: 0; text-align: center; font-size: var(--fs-3); line-height: var(--lh-3); font-weight: var(--fw-semibold);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* заголовок страницы без сцены и абзацы */
.page__head { padding: var(--s-2) var(--s-1) 0; }
.page__over { font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold); letter-spacing: var(--caps-track);
text-transform: uppercase; color: var(--accent-ink); }
.page__title { margin-top: var(--s-1); font-size: var(--fs-5); line-height: var(--lh-5); font-weight: var(--fw-bold); letter-spacing: -.01em; color: var(--ink); }
.page__lead { margin-top: var(--s-2); font-size: var(--fs-3); line-height: var(--lh-3); color: var(--ink-2); }
.page__text { margin: var(--s-3) var(--s-1) 0; font-size: var(--fs-3); line-height: var(--lh-3); color: var(--ink); }
.page__text--muted { color: var(--ink-2); }
.page__text--small { font-size: var(--fs-2); line-height: var(--lh-2); }
/* вертикальные стопки */
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.btn-col { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-5); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--track); color: var(--ink-3); box-shadow: none; cursor: default; }
/* карточка со структурой: h.card({over, title, text}) */
.card__over { font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.card__title { margin: 0; font-size: var(--fs-4); line-height: var(--lh-4); font-weight: var(--fw-semibold); }
.card__over + .card__title { margin-top: var(--s-1); }
.card__text { margin-top: var(--s-1); font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
.card[data-to] { cursor: pointer; }
/* выбор вариантов: h.chips — пилюли в строку или карточки столбиком (pick--col) */
.pick { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pick__opt { min-height: var(--tap); border: 0; border-radius: var(--r-pill); padding: 10px 16px; display: inline-flex; align-items: center; gap: var(--s-3);
background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-3); line-height: 20px;
font-weight: var(--fw-medium); text-align: left; }
.pick__opt[aria-pressed="true"] { background: var(--primary-soft); color: var(--on-primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }
.pick--col { flex-direction: column; gap: var(--s-2); }
.pick--col .pick__opt { width: 100%; min-height: 56px; border-radius: var(--r-1); padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.pick--col .pick__opt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--primary); }
.pick__text { display: flex; flex-direction: column; min-width: 0; }
.pick__sub { font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-regular); color: var(--ink-2); }
.pick__mark { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: transparent; box-shadow: inset 0 0 0 2px var(--ink-3); }
.pick__mark--sq { border-radius: 8px; }
.pick__opt[aria-pressed="true"] .pick__mark { background: var(--primary); color: var(--on-primary); box-shadow: none; }
/* поля ввода: h.input / h.textarea */
.field { display: block; margin-top: var(--s-4); }
.field__label { display: block; margin: 0 var(--s-1) 6px; font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-medium); color: var(--ink-2); }
.field__input { display: block; width: 100%; min-height: 52px; border: 0; border-radius: var(--r-1); padding: 14px 16px; background: var(--surface); color: var(--ink);
box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: var(--fs-3); line-height: var(--lh-3); }
.field__input::placeholder { color: var(--ink-3); }
.field__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primary); }
.field__input[readonly] { background: var(--field); color: var(--ink-2); }
.field__input--area { min-height: 120px; resize: vertical; }
.field__hint { display: block; margin: 6px var(--s-1) 0; font-size: var(--fs-1); line-height: var(--lh-1); color: var(--ink-3); }
/* список с точками / номерами: h.list */
.list { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-3); counter-reset: li; }
.list__item { position: relative; padding-left: 28px; font-size: var(--fs-3); line-height: var(--lh-3); }
.list__item::before { content: ""; position: absolute; left: 6px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.list--num .list__item { counter-increment: li; padding-left: 36px; }
.list--num .list__item::before { content: counter(li); left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center;
background: var(--primary-soft); color: var(--on-primary-soft); font-size: var(--fs-1); font-weight: var(--fw-bold); }
/* плашка видео: h.video (тёмное небо, кнопка play, подпись, длительность) */
.video { position: relative; width: 100%; overflow: hidden; border-radius: var(--r-1); display: grid; place-items: center; cursor: pointer;
background: linear-gradient(160deg, var(--sky-1) 0%, var(--sky-2) 55%, var(--sky-3) 100%); color: var(--on-scene); }
.video__play { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; padding-left: 4px;
background: var(--scrim); box-shadow: inset 0 0 0 2px var(--scrim-line); }
.video__label { position: absolute; left: var(--s-4); right: 72px; bottom: 14px; font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-semibold); }
.video__time { position: absolute; right: var(--s-3); bottom: var(--s-3); height: 24px; padding: 0 8px; border-radius: var(--r-pill); display: grid; place-items: center;
background: var(--scrim); font-size: var(--fs-1); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
/* сцена солнца/шарика: h.sun. Фон — тёмное небо в обеих темах (спека 7.1). Анимацию рисует screens/20_player.js в canvas;
пока анимации нет, в центре стоит статичное солнце .sun-stage__sun (иллюстрация, цвета как у --thumb-sun) */
.sun-stage { position: relative; width: 100%; height: var(--sun-stage-h, 240px); overflow: hidden; border-radius: var(--r-1);
background: linear-gradient(180deg, #07061C 0%, #141146 60%, #29277F 100%); }
.sun-stage--full { height: 100%; border-radius: 0; }
.sun-stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sun-stage__sun { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
background: radial-gradient(circle at 38% 32%, #FFE39A 0, #FFBE55 55%, #FF8F3F 100%); box-shadow: 0 0 24px rgba(255,190,85,.45); }
.sun-stage[data-sun-state="live"] .sun-stage__sun { display: none; }
/* третья плитка темы (лаванда) и плитка во всю ширину — каталог из трёх тем на «Сессиях» */
.tile--sky { background: var(--primary-soft); color: var(--on-primary-soft); }
.tile--sky .tile__deco .d1 { fill: var(--primary); opacity: .16; }
.tile--sky .tile__deco .d2 { fill: var(--primary); opacity: .26; }
[data-theme="dark"] .tile--sky { color: var(--ink); }
.tile--locked.tile--sky .tile__deco .d1, .tile--locked.tile--sky .tile__deco .d2 { fill: var(--ink-3); opacity: .14; }
.tile--wide { grid-column: 1 / -1; min-height: 104px; }
/* ═════════ добавлено 20.10 (волна правок): персонажи, анимации, лендинг-блоки, переключатель ═════════
Хелперы — в app.js (h.sunny, h.stars, h.hero, h.section({…}), h.steps, h.quoteCard, h.carousel, h.faq, h.gallery,
h.socialBlock, h.ctaPrice, h.toggle). Каталог состояний персонажа — screens/_characters.html, снимок снимки/персонажи.png.
Цвета — токены; исключение, как и раньше, — рисунок солнца и луны (иллюстрация). Все анимации гаснут при prefers-reduced-motion. */
/* ───────── ключевые кадры (префикс joy-) ───────── */
@keyframes joy-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(var(--breathe, 1.06)); } }
@keyframes joy-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes joy-wink { 0%, 68%, 88%, 100% { transform: scaleY(1); opacity: 1; } 73%, 83% { transform: scaleY(.1); opacity: 0; } }
@keyframes joy-wink-arc { 0%, 69%, 87%, 100% { opacity: 0; } 73%, 83% { opacity: 1; } }
@keyframes joy-blush { 0%, 68%, 88%, 100% { opacity: .32; } 74%, 82% { opacity: .62; } }
@keyframes joy-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 12% { transform: translateY(0) scale(1.05, .95); }
40% { transform: translateY(-14%) scale(.97, 1.03); } 66% { transform: translateY(0) scale(1.04, .96); } 80% { transform: translateY(-3%) scale(1, 1); } }
@keyframes joy-spin { to { transform: rotate(360deg); } }
@keyframes joy-pulse { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes joy-z { 0% { opacity: 0; transform: translate(0, 0) scale(.7); } 20% { opacity: 1; } 75% { opacity: .9; } 100% { opacity: 0; transform: translate(70%, -150%) scale(1.15); } }
@keyframes joy-tilt { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes joy-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-25%); } }
@keyframes joy-twinkle { 0%, 100% { opacity: .2; transform: scale(.55); } 50% { opacity: 1; transform: scale(1); } }
@keyframes joy-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* ───────── утилиты: дыхание и появление при прокрутке ───────── */
.breathe { animation: joy-breathe 4s ease-in-out infinite; }
.breathe--6 { animation-duration: 6s; }
/* .reveal — блок проявляется, когда доезжает до экрана (app.js ставит .is-in). Задержка — style="--reveal-delay:.1s" */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--reveal-delay, 0s); }
.reveal.is-in { opacity: 1; transform: none; }
/* ───────── персонаж: солнышко (светлая тема) / луна (тёмная) ─────────
Состояние = набор видимых черт лица + анимация фигуры. --sunny-phase — сдвиг анимаций (каталог показывает кадр подмигивания). */
.sunny { --sunny-size: 96px; --sunny-ink: #8C3B12; --sunny-cheek: #FF7A5C; --sunny-ray: #FFB23E; --sunny-ray-2: #FF8F3F; --sunny-glow: rgba(255,184,107,.45); --sunny-limb: #FFBE55;
position: relative; display: inline-block; flex: none; width: var(--sunny-size); height: var(--sunny-size); vertical-align: middle; }
.sunny__fig { position: absolute; inset: 0; transform-origin: 50% 70%; }
.sunny__glow { position: absolute; inset: 2%; border-radius: 50%; background: radial-gradient(circle, var(--sunny-glow) 0, transparent 68%); }
.sunny__rays { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sunny__rays g { transform-box: view-box; transform-origin: 60px 60px; }
.sunny__rays path { fill: none; stroke-linecap: round; stroke-width: 5; }
.sunny__rays .r1 { stroke: var(--sunny-ray); }
.sunny__rays .r2 { stroke: var(--sunny-ray-2); stroke-width: 4; }
.sunny__body { position: absolute; inset: 19%; border-radius: 50%;
background: radial-gradient(circle at 38% 32%, #FFE39A 0, #FFBE55 55%, #FF8F3F 100%); box-shadow: 0 0 calc(var(--sunny-size) * .14) rgba(255,170,80,.45); }
.sunny__face { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sunny__face .f-open ellipse { fill: var(--sunny-ink); }
.sunny__face .f-shine { fill: #FFFFFF; }
.sunny__face .f-closed, .sunny__face .f-happy, .sunny__face .f-smile, .sunny__face .f-rest, .sunny__face .f-hm {
fill: none; stroke: var(--sunny-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sunny__face .f-big { fill: var(--sunny-ink); }
.sunny__face .f-tongue { fill: #FF7A5C; }
.sunny__face .f-cheek { fill: var(--sunny-cheek); opacity: .32; }
.sunny__face .f-crater { fill: #8A8064; opacity: .38; display: none; }
.sunny__face .f-open { transform-box: fill-box; transform-origin: 50% 50%; }
/* черты лица по состояниям */
.sunny .f-open, .sunny .f-closed, .sunny .f-happy, .sunny .f-mouth, .sunny .f-tongue { display: none; }
.sunny--sleep .f-closed, .sunny--sleep .f-rest,
.sunny--smile .f-open, .sunny--smile .f-smile,
.sunny--wink .f-open, .sunny--wink .f-smile,
.sunny--think .f-open, .sunny--think .f-hm,
.sunny--happy .f-happy, .sunny--happy .f-big, .sunny--happy .f-tongue { display: inline; }
.sunny--think .f-open > * { transform: translate(-1.6px, -2.4px); }
/* спит: медленное дыхание 6 с, лучи притушены, улетают «z» */
.sunny--sleep .sunny__fig { --breathe: 1.05; animation: joy-breathe 6s ease-in-out infinite; }
.sunny--sleep .sunny__rays { opacity: .45; }
/* улыбается: дыхание 4 с, моргает раз в 5 с, лучи медленно вращаются */
.sunny--smile .sunny__fig, .sunny--wink .sunny__fig { --breathe: 1.03; animation: joy-breathe 4s ease-in-out infinite; }
.sunny--smile .f-open { animation: joy-blink 5s ease-in-out infinite; }
.sunny--smile .sunny__rays g, .sunny--wink .sunny__rays g { animation: joy-spin 40s linear infinite; }
/* подмигивает: правый глаз раз в 4 с сжимается в дугу «^», щёки розовеют */
.sunny--wink .f-eye--r .f-open { animation: joy-wink 4s ease-in-out infinite; }
.sunny--wink .f-eye--r .f-happy { display: inline; opacity: 0; animation: joy-wink-arc 4s ease-in-out infinite; }
.sunny--wink .f-cheek { animation: joy-blush 4s ease-in-out infinite; }
/* радуется: подпрыгивает, лучи крутятся и пульсируют */
.sunny--happy .sunny__fig { transform-origin: 50% 100%; animation: joy-bounce 1.3s cubic-bezier(.3, .6, .4, 1) infinite; }
.sunny--happy .sunny__rays g { animation: joy-spin 8s linear infinite; }
.sunny--happy .sunny__rays { animation: joy-pulse 1.3s ease-in-out infinite; }
/* думает: покачивает головой, глаза вверх-влево, над головой три точки */
.sunny--think .sunny__fig { animation: joy-tilt 4s ease-in-out infinite; }
.sunny--think .sunny__rays g { animation: joy-spin 60s linear infinite; }
/* сдвиг фазы (style="--sunny-phase:-3s"): нужен каталогу и снимкам, чтобы показать кадр, например закрытый глаз при подмигивании */
.sunny .sunny__fig, .sunny .sunny__glow, .sunny .sunny__rays, .sunny .sunny__rays g, .sunny .f-open, .sunny .f-happy, .sunny .f-cheek { animation-delay: var(--sunny-phase, 0s) !important; }
/* «z» над спящим и точки над думающим — цвет текста вокруг (на небе белые, на листе тёмно-синие) */
.sunny__z, .sunny__dots { position: absolute; display: none; pointer-events: none; }
.sunny__z { right: -4%; top: -2%; width: 36%; height: 36%; font-weight: var(--fw-bold); line-height: 1; font-size: calc(var(--sunny-size) * .22); }
.sunny__z i { position: absolute; left: 0; bottom: 0; font-style: normal; opacity: 0; animation: joy-z 3.6s ease-out infinite; }
.sunny__z i:nth-child(2) { animation-delay: calc(var(--sunny-phase, 0s) - 1.2s); font-size: .8em; }
.sunny__z i:nth-child(3) { animation-delay: calc(var(--sunny-phase, 0s) - 2.4s); font-size: .65em; }
.sunny--sleep .sunny__z { display: block; }
.sunny__dots { right: -6%; top: -4%; width: 34%; height: 34%; }
.sunny__dots i { position: absolute; border-radius: 50%; background: currentColor; animation: joy-dot 1.5s ease-in-out infinite; }
.sunny__dots i:nth-child(1) { left: 0; bottom: 0; width: calc(var(--sunny-size) * .06); height: calc(var(--sunny-size) * .06); }
.sunny__dots i:nth-child(2) { left: 32%; bottom: 30%; width: calc(var(--sunny-size) * .08); height: calc(var(--sunny-size) * .08); animation-delay: calc(var(--sunny-phase, 0s) + .2s); }
.sunny__dots i:nth-child(3) { left: 68%; bottom: 64%; width: calc(var(--sunny-size) * .11); height: calc(var(--sunny-size) * .11); animation-delay: calc(var(--sunny-phase, 0s) + .4s); }
.sunny--think .sunny__dots { display: block; }
.stars.sunny__stars { inset: -30%; }
/* луна: тёмная тема (sunny--auto) или явно sunny--moon. Те же состояния, вместо лучей — свечение и кратеры */
:is(.sunny--moon, [data-theme="dark"] .sunny--auto) { --sunny-ink: #5A4D2E; --sunny-cheek: #E79AB0; --sunny-glow: rgba(233,224,255,.32); --sunny-limb: #E2D8B6; --sunny-ray-2: #B4A984; }
:is(.sunny--moon, [data-theme="dark"] .sunny--auto) .sunny__body {
background: radial-gradient(circle at 38% 32%, #F4ECD2 0, #D9CEA9 58%, #B4A984 100%); box-shadow: 0 0 calc(var(--sunny-size) * .2) rgba(233,224,255,.38); }
:is(.sunny--moon, [data-theme="dark"] .sunny--auto) .sunny__rays { display: none; }
:is(.sunny--moon, [data-theme="dark"] .sunny--auto) .f-crater { display: inline; }
:is(.sunny--moon, [data-theme="dark"] .sunny--auto) .sunny__glow { animation: joy-pulse 5s ease-in-out infinite; }
.sunny--happy:is(.sunny--moon, [data-theme="dark"] .sunny--auto) .sunny__glow { animation-duration: 1.3s; }
/* ───────── мерцающие звёзды: h.stars() — слой поверх родителя с position: relative ───────── */
.stars { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; --stars-c: var(--star); --stars-sp: var(--spark); }
.stars--warm { --stars-c: var(--accent); --stars-sp: var(--sun-deco-2); }
.stars i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: var(--stars-c);
box-shadow: 0 0 calc(var(--s) * 2) var(--stars-c); animation: joy-twinkle var(--t, 3s) ease-in-out var(--d, 0s) infinite; }
.stars i.sp { width: calc(var(--s) * 2.8); height: calc(var(--s) * 2.8); border-radius: 0; box-shadow: none; background: var(--stars-sp);
clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
/* ───────── небо с персонажем для экранов без сцены: h.hero({…}) ───────── */
.ld-hero { position: relative; overflow: hidden; min-height: var(--hero-h, 280px); border-radius: var(--r-1); display: flex; align-items: flex-end;
background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 50%, var(--sky-3) 82%, var(--sky-4) 100%); color: var(--on-scene); }
.ld-hero__hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72px; }
.ld-hero__hills .hill-1 { fill: var(--hill-1); }
.ld-hero__hills .hill-2 { fill: var(--hill-2); }
.ld-hero__in { position: relative; z-index: 2; width: 100%; padding: var(--s-5) var(--s-5) var(--s-5); display: flex; flex-direction: column; align-items: center; text-align: center; }
.ld-hero__sunny { margin-bottom: var(--s-3); }
.ld-hero__over { font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold); letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--date); }
.ld-hero__title { margin-top: var(--s-1); font-size: var(--fs-l); line-height: var(--lh-l); font-weight: var(--fw-bold); letter-spacing: -.01em; color: var(--on-scene); }
.ld-hero__text { margin-top: var(--s-2); font-size: var(--fs-3); line-height: var(--lh-3); color: var(--on-scene-2); }
.ld-hero__top { position: absolute; z-index: 3; top: var(--s-2); left: var(--s-2); right: var(--s-2); }
.ld-hero .topbar { margin: 0; }
.ld-hero .topbar__back, .ld-hero .topbar__title { color: var(--on-scene); }
/* {bleed: true} — первым блоком листа без сцены: небо под системной строкой, во всю ширину, низ скруглён как у листа */
.sheet--flat > .ld-hero--bleed:first-child { margin: calc(-1 * (var(--status-h) + var(--s-2))) calc(-1 * var(--gutter)) 0;
border-radius: 0 0 var(--r-2) var(--r-2); padding-top: var(--status-h); }
.sheet--flat > .ld-hero--bleed:first-child .ld-hero__top { top: var(--status-h); }
/* ───────── блок лендинга: h.section({eyebrow, title, text}, inner) ───────── */
.ld-section { margin-top: var(--s-6); }
.ld-section__head { padding: 0 var(--s-1); margin-bottom: var(--s-4); }
.ld-eyebrow { font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold); letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--accent-ink); }
.ld-title { margin-top: var(--s-1); font-size: var(--fs-l); line-height: var(--lh-l); font-weight: var(--fw-bold); letter-spacing: -.01em; color: var(--ink); }
.ld-eyebrow + .ld-title { margin-top: var(--s-1); }
.ld-section__head > .ld-title:first-child { margin-top: 0; }
.ld-lead { margin-top: var(--s-2); font-size: var(--fs-3); line-height: var(--lh-3); color: var(--ink-2); }
/* ───────── шаги с номерами: h.steps([...]) ───────── */
.ld-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ld-step { position: relative; display: flex; gap: 14px; padding-bottom: var(--s-5); }
.ld-step:last-child { padding-bottom: 0; }
.ld-step:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 46px; bottom: 6px; width: 2px; border-radius: 2px;
background: linear-gradient(180deg, var(--fill-b), var(--track)); }
.ld-step__n { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-3); font-weight: var(--fw-bold);
background: linear-gradient(135deg, var(--fill-a), var(--fill-b)); color: var(--on-fill); box-shadow: 0 4px 12px rgba(242,106,27,.22); }
.ld-step__body { min-width: 0; padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.ld-step__title { font-size: var(--fs-3); line-height: 22px; font-weight: var(--fw-semibold); }
.ld-step__text { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
/* ───────── отзыв «было → стало»: h.quoteCard({…}) ───────── */
.ld-quote { height: 100%; display: flex; flex-direction: column; gap: var(--s-3); padding: 18px; border-radius: var(--r-1);
background: var(--surface); box-shadow: var(--sh-1); border: 1px solid var(--card-border); }
.ld-quote__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.ld-quote__topic { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--primary-soft);
color: var(--on-primary-soft); font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold); }
.ld-quote__mark { color: var(--accent); }
.ld-quote__ba { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 6px; }
.ld-quote__side { border-radius: calc(var(--r-1) - 8px); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ld-quote__side--was { background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.ld-quote__side--now { background: var(--success-soft); }
.ld-quote__k { font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ld-quote__side--now .ld-quote__k { color: var(--success); }
.ld-quote__v { font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-medium); color: var(--ink); }
.ld-quote__ba--num .ld-quote__v { font-size: var(--fs-5); line-height: var(--lh-5); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.ld-quote__arrow { align-self: center; color: var(--ink-3); }
.ld-quote__text { flex: 1; font-size: var(--fs-3); line-height: var(--lh-3); color: var(--ink); }
.ld-quote__who { display: flex; align-items: center; gap: 10px; font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
.ld-quote__ava { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--fw-bold);
background: linear-gradient(135deg, var(--fill-a), var(--fill-b)); color: var(--on-fill); }
/* ───────── карусель: h.carousel([...], {dots, width, auto}) — выходит на поля листа, слайды прилипают ───────── */
.ld-carousel { margin-inline: calc(-1 * var(--gutter)); }
.ld-carousel__track { display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
padding: 4px var(--gutter) 14px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.ld-carousel__track::-webkit-scrollbar { display: none; }
.ld-carousel__track:focus-visible { outline-offset: -3px; }
.ld-carousel__item { flex: 0 0 var(--ld-w, 84%); min-width: 0; scroll-snap-align: start; display: flex; }
.ld-carousel__item > * { flex: 1; min-width: 0; }
.ld-carousel__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin-top: -2px; }
.ld-carousel__dot { width: 22px; height: 24px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.ld-carousel__dot::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--ink-3); opacity: .35; transition: width .25s, background .25s, opacity .25s; }
.ld-carousel__dot[aria-current="true"]::before { width: 18px; background: var(--accent); opacity: 1; }
.ld-carousel__count { text-align: center; font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ld-carousel__count b { color: var(--ink); }
/* ───────── вопросы-ответы: h.faq([{q, a}]) ───────── */
.ld-faq { display: flex; flex-direction: column; gap: var(--s-2); }
.ld-faq__item { background: var(--surface); border-radius: var(--r-1); box-shadow: var(--sh-1); border: 1px solid var(--card-border); overflow: hidden; }
.ld-faq__q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 56px; padding: 14px 16px;
cursor: pointer; font-size: var(--fs-3); line-height: 22px; font-weight: var(--fw-semibold); }
.ld-faq__q::-webkit-details-marker { display: none; }
.ld-faq__q .ic { color: var(--ink-3); transform: rotate(90deg); transition: transform .25s ease; }
.ld-faq__item[open] .ld-faq__q .ic { transform: rotate(-90deg); }
.ld-faq__a { padding: 0 16px 16px; font-size: var(--fs-3); line-height: var(--lh-3); color: var(--ink-2); }
.ld-faq__item[open] .ld-faq__a { animation: joy-drop .3s ease; }
/* ───────── галерея: h.gallery([...]) — плитки-заглушки под фото ───────── */
.ld-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.ld-gallery__tile { position: relative; margin: 0; overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--r-1); background: var(--surface); }
.ld-gallery--lead .ld-gallery__tile:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.ld-gallery__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-gallery__tile:not(.ld-gallery__tile--ph) .ld-gallery__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 10px; text-align: left;
background: linear-gradient(180deg, transparent, var(--scrim)); color: var(--on-scene); }
.ld-gallery__tile--ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); color: var(--on-scene);
background: linear-gradient(160deg, var(--sky-2) 0%, var(--sky-3) 70%, var(--sky-4) 100%); }
.ld-gallery__tile--ph:nth-child(3n + 2) { background: linear-gradient(160deg, var(--sky-1) 0%, var(--sky-2) 100%); }
.ld-gallery__tile--ph:nth-child(3n) { background: linear-gradient(160deg, var(--sky-3) 0%, var(--sky-4) 100%); }
.ld-gallery__cap { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; text-align: center; font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-semibold); }
.ld-gallery__cap small { font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-medium); color: var(--on-scene-2); }
/* ───────── соцсети с бонусом: h.socialBlock({bonus}) ───────── */
.ld-social { margin-top: var(--s-6); }
.ld-social__head { padding: 0 var(--s-1); margin-bottom: var(--s-4); }
.ld-social__bonus { display: flex; align-items: center; gap: 14px; padding: var(--s-4); border-radius: var(--r-1);
background: linear-gradient(135deg, var(--sun) 0%, var(--rose) 100%); color: var(--on-sun); }
.ld-social__bonus-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ld-social__over { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; }
.ld-social__over .ic { color: var(--accent-ink); }
.ld-social__bonus-text b { font-size: var(--fs-3); line-height: 22px; font-weight: var(--fw-semibold); }
.ld-social__bonus-text > span:last-child:not(.ld-social__over) { font-size: var(--fs-2); line-height: var(--lh-2); }
.ld-social__nets { margin-top: var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); }
.ld-net { display: flex; align-items: center; gap: var(--s-3); min-height: 72px; 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); border: 1px solid var(--card-border); color: var(--ink); text-decoration: none; }
.ld-net__ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--on-primary-soft); }
.ld-net--tg .ld-net__ic { background: var(--primary); color: var(--on-primary); }
.ld-net__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ld-net__text b { font-size: var(--fs-3); line-height: 22px; font-weight: var(--fw-semibold); }
.ld-net__text span { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
.ld-net > .ic { color: var(--ink-3); }
.ld-net[aria-disabled="true"] { cursor: default; }
/* ───────── «Узнать стоимость и записаться»: h.ctaPrice() ───────── */
.ld-cta { margin-top: var(--s-5); }
.ld-cta__note { margin: var(--s-2) var(--s-1) 0; text-align: center; font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
/* ───────── переключатель: h.toggle({…}) ───────── */
.switch { position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: 64px; padding: var(--s-3) var(--s-4); cursor: pointer; }
.switch__ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--on-primary-soft); }
.switch__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.switch__label { font-size: var(--fs-3); line-height: 22px; font-weight: var(--fw-medium); color: var(--ink); }
.switch__sub { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
.switch__input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.switch__ui { flex: none; position: relative; width: 52px; height: 32px; border-radius: var(--r-pill); background: var(--track); transition: background .2s; }
.switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--on-primary);
box-shadow: 0 1px 4px rgba(20,12,60,.25); transition: transform .2s ease; }
.switch__input:checked + .switch__ui { background: var(--primary); }
.switch__input:checked + .switch__ui::after { transform: translateX(20px); }
.switch__input:focus-visible + .switch__ui { outline: 3px solid var(--accent); outline-offset: 2px; }
.switch__input:disabled + .switch__ui { opacity: .5; }
/* кнопка опасного действия (удалить данные) и иконка в варианте выбора */
.btn--danger { background: var(--danger); color: var(--bg); }
.pick__opt > .ic { color: var(--ink-2); }
.pick__opt[aria-pressed="true"] > .ic { color: var(--on-primary-soft); }
/* ═════════ добавлено 21.10 (волна правок v2): новые состояния персонажа, проводник с репликой, въезд при долистывании,
шаги по очереди, отзыв без шкалы. Хелперы — h.sunny('search'|'cheer'|'wake'), h.guide, h.sunnyReveal, h.steps({staggered}), h.quoteCard({noScale|compact}) ═════════ */
@keyframes joy-look { 0%, 100% { transform: translateX(-2.4px); } 42%, 58% { transform: translateX(2.4px); } }
@keyframes joy-sway { 0%, 100% { transform: rotate(-5deg) translateX(-2%); } 50% { transform: rotate(5deg) translateX(2%); } }
@keyframes joy-scan { 0%, 100% { transform: translate(-16%, 2%) rotate(-14deg); } 50% { transform: translate(6%, -10%) rotate(8deg); } }
@keyframes joy-wave { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(28deg); } }
@keyframes joy-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes joy-enter-left { 0% { opacity: 0; transform: translateX(-130%) rotate(-50deg); } 55% { opacity: 1; } 78% { transform: translateX(6%) rotate(6deg); } 100% { opacity: 1; transform: none; } }
@keyframes joy-enter-right { 0% { opacity: 0; transform: translateX(130%) rotate(50deg); } 55% { opacity: 1; } 78% { transform: translateX(-6%) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
@keyframes joy-enter-up { 0% { opacity: 0; transform: translateY(60%) scale(.6); } 70% { opacity: 1; transform: translateY(-6%) scale(1.04); } 100% { opacity: 1; transform: none; } }
/* wake — один проход 3,2 с: спит → зевает, потягивается → открывает глаза → улыбается и подпрыгивает */
@keyframes joy-wake-closed { 0%, 56% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes joy-wake-open { 0%, 56% { opacity: 0; transform: scaleY(.1); } 66%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes joy-wake-yawn { 0%, 14% { opacity: 0; transform: scale(.3); } 24%, 42% { opacity: 1; transform: scale(1); } 50%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes joy-wake-rest { 0%, 13% { opacity: 1; } 17%, 47% { opacity: 0; } 51%, 58% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes joy-wake-smile { 0%, 59% { opacity: 0; } 66%, 100% { opacity: 1; } }
@keyframes joy-wake-fig { 0%, 12% { transform: none; } 30% { transform: translateY(-3%) scale(.95, 1.08); } 46% { transform: scale(1.03, .97); } 58% { transform: none; }
72% { transform: translateY(-9%); } 84% { transform: translateY(1%) scale(1.03, .97); } 92%, 100% { transform: none; } }
@keyframes joy-wake-rays { 0%, 40% { opacity: .35; transform: scale(.84); } 74%, 100% { opacity: 1; transform: none; } }
@keyframes joy-wake-z { 0%, 26% { opacity: 1; } 42%, 100% { opacity: 0; } }
/* лупа и рука: есть в разметке каждого персонажа, видны только в своём состоянии */
.sunny__loupe, .sunny__hand { position: absolute; display: none; overflow: visible; pointer-events: none; }
.sunny__loupe { right: -22%; bottom: -10%; width: 52%; height: 52%; transform-origin: 80% 80%; }
.sunny__loupe .l-glass { fill: rgba(255,255,255,.42); stroke: var(--sunny-ink); stroke-width: 3.2; }
.sunny__loupe .l-handle { fill: none; stroke: var(--sunny-ink); stroke-width: 5.5; stroke-linecap: round; }
.sunny__loupe .l-shine { fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; }
.sunny__loupe .l-hand, .sunny__hand .h-palm { fill: var(--sunny-limb); stroke: var(--sunny-ray-2); stroke-width: 1.6; }
.sunny__hand { right: -14%; top: -4%; width: 42%; height: 42%; transform-origin: 10% 90%; }
.sunny__hand .h-arm { fill: none; stroke: var(--sunny-ray-2); stroke-width: 4.5; stroke-linecap: round; }
/* луна на тёмном фоне: лупа светлая, чтобы не терялась */
:is(.sunny--moon, [data-theme="dark"] .sunny--auto) .sunny__loupe .l-glass { stroke: #E2D8B6; fill: rgba(255,255,255,.18); }
:is(.sunny--moon, [data-theme="dark"] .sunny--auto) .sunny__loupe .l-handle { stroke: #E2D8B6; }
/* search — ищет: покачивается, глаза бегают за лупой, рот сосредоточенный */
.sunny--search .f-open, .sunny--search .f-hm { display: inline; }
.sunny--search .sunny__fig { animation: joy-sway 2.4s ease-in-out infinite; }
.sunny--search .f-eye { animation: joy-look 2.4s ease-in-out infinite; }
.sunny--search .sunny__loupe { display: block; animation: joy-scan 2.4s ease-in-out infinite; }
.sunny--search .sunny__rays g { animation: joy-spin 50s linear infinite; }
/* cheer — подбадривает: прыгает чаще, чем happy, и машет рукой */
.sunny--cheer .f-happy, .sunny--cheer .f-big, .sunny--cheer .f-tongue { display: inline; }
.sunny--cheer .f-cheek { opacity: .55; }
.sunny--cheer .sunny__fig { transform-origin: 50% 100%; animation: joy-bounce .9s cubic-bezier(.3, .6, .4, 1) infinite; }
.sunny--cheer .sunny__rays g { animation: joy-spin 6s linear infinite; }
.sunny--cheer .sunny__hand { display: block; animation: joy-wave .45s ease-in-out infinite; }
/* wake — просыпается (заставка SPL-01). Без анимации (reduced-motion) — сразу конечный кадр: глаза открыты, улыбка */
.sunny--wake .f-closed, .sunny--wake .f-open, .sunny--wake .f-rest, .sunny--wake .f-smile, .sunny--wake .f-yawn { display: inline; }
.sunny__face .f-yawn { fill: var(--sunny-ink); transform-box: fill-box; transform-origin: 50% 50%; }
.sunny--wake .f-closed, .sunny--wake .f-rest, .sunny--wake .f-yawn { opacity: 0; }
.sunny--wake .f-closed { animation: joy-wake-closed 3.2s ease both; }
.sunny--wake .f-open { animation: joy-wake-open 3.2s ease both; }
.sunny--wake .f-yawn { animation: joy-wake-yawn 3.2s ease both; }
.sunny--wake .f-rest { animation: joy-wake-rest 3.2s ease both; }
.sunny--wake .f-smile { animation: joy-wake-smile 3.2s ease both; }
.sunny--wake .sunny__fig { transform-origin: 50% 100%; animation: joy-wake-fig 3.2s ease-in-out both; }
.sunny--wake .sunny__rays { transform-origin: 50% 50%; animation: joy-wake-rays 3.2s ease both; }
.sunny--wake .sunny__z { display: block; opacity: 0; animation: joy-wake-z 3.2s ease both; }
.sunny--wake.sunny--loop :is(.f-closed, .f-open, .f-yawn, .f-rest, .f-smile, .sunny__fig, .sunny__rays, .sunny__z) { animation-iteration-count: infinite; }
/* сдвиг фазы и для новых частей (каталог показывает кадр зевка, лупы, взмаха) */
.sunny .f-eye, .sunny .f-closed, .sunny .f-yawn, .sunny .f-rest, .sunny .f-smile, .sunny .sunny__z, .sunny .sunny__loupe, .sunny .sunny__hand { animation-delay: var(--sunny-phase, 0s) !important; }
/* персонаж-проводник с репликой: h.guide({state, text, side}) */
.guide { display: flex; align-items: center; gap: var(--s-3); }
.guide--right { flex-direction: row-reverse; }
.guide__fig { flex: none; display: inline-flex; }
.guide__bubble { position: relative; flex: 1; min-width: 0; padding: 12px 16px; border-radius: 20px; background: var(--surface); color: var(--ink);
box-shadow: var(--sh-1); border: 1px solid var(--card-border); transform-origin: 0 50%; animation: joy-pop .45s cubic-bezier(.2, .9, .3, 1.3) .35s both; }
.guide--right .guide__bubble { transform-origin: 100% 50%; }
.guide__bubble::before { content: ""; position: absolute; top: 50%; left: -7px; width: 14px; height: 14px; margin-top: -7px; background: inherit;
border-left: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); border-radius: 0 0 0 4px; transform: rotate(45deg); }
.guide--right .guide__bubble::before { left: auto; right: -7px; transform: rotate(-135deg); }
.guide__text { margin: 0; font-size: var(--fs-3); line-height: var(--lh-3); font-weight: var(--fw-medium); color: var(--ink); }
.guide.is-now .guide__bubble { animation: none; }
/* въезд персонажа при долистывании: h.sunnyReveal(state, size, {from}) и h.guide({reveal: true}) */
.sunny-in:not(.guide) { display: inline-block; }
.sunny-in.reveal { opacity: 1; transform: none; transition: none; }
.sunny-in__fig { display: inline-block; }
.sunny-in:not(.is-in) .sunny-in__fig, .sunny-in.guide:not(.is-in) .guide__bubble { opacity: 0; }
.sunny-in:not(.is-in) .sunny, .sunny-in:not(.is-in) .sunny *, .sunny-in:not(.is-in) .guide__bubble { animation-play-state: paused !important; }
.sunny-in.is-in .sunny-in__fig { animation: joy-enter-left .9s cubic-bezier(.2, .8, .3, 1) var(--reveal-delay, 0s) both; }
.sunny-in.is-in .sunny-in--right { animation-name: joy-enter-right; }
.sunny-in.is-in .sunny-in--bottom { animation-name: joy-enter-up; }
.sunny-in.guide .guide__bubble { animation-delay: calc(var(--reveal-delay, 0s) + .7s); }
.sunny-in.is-now .sunny-in__fig, .sunny-in.is-now .guide__bubble { animation: none; opacity: 1; }
/* шаги по очереди: h.steps(items, {staggered: true}) — у шага свой .reveal с --reveal-delay */
.ld-steps--stagger .ld-step.reveal { transform: translateX(-14px); }
.ld-steps--stagger .ld-step.reveal.is-in { transform: none; }
.ld-steps--stagger .ld-step__n { transform: scale(.4); transition: transform .5s cubic-bezier(.2, .9, .3, 1.4) calc(var(--reveal-delay, 0s) + .1s); }
.ld-steps--stagger .ld-step.is-in .ld-step__n { transform: none; }
.ld-steps--stagger .ld-step:not(:last-child)::before { transform: scaleY(0); transform-origin: 50% 0; transition: transform .5s ease calc(var(--reveal-delay, 0s) + .35s); }
.ld-steps--stagger .ld-step.is-in::before { transform: none; }
/* отзыв без шкалы и короткий: h.quoteCard({noScale: true}) · h.quoteCard({compact: true, lines: 3}) */
.ld-quote__name { min-width: 0; }
.ld-quote__meta { display: block; margin-top: 1px; font-size: var(--fs-1); line-height: var(--lh-1); color: var(--ink-3); }
.ld-quote--compact { gap: var(--s-2); padding: 14px 16px; }
.ld-quote--compact .ld-quote__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--ld-lines, 3); line-clamp: var(--ld-lines, 3); overflow: hidden; }
.ld-quote--compact .ld-quote__ava { width: 28px; height: 28px; font-size: var(--fs-2); }
/* ───────── меньше движения: всё стоит, блоки видны сразу ───────── */
@media (prefers-reduced-motion: reduce) {
.sunny, .sunny *, .stars i, .breathe, .ld-faq__item[open] .ld-faq__a { animation: none !important; }
.reveal { opacity: 1; transform: none; transition: none; }
.sunny__z i { opacity: .75; }
.sunny__z i:nth-child(2) { transform: translate(55%, -95%); }
.sunny__z i:nth-child(3) { display: none; }
.sunny__dots i { opacity: .8; }
.stars i { opacity: .8; transform: none; }
.switch__ui, .switch__ui::after, .ld-carousel__dot::before { transition: none; }
/* 21.10: въезд, пузырь, шаги — сразу на месте */
.sunny-in__fig, .guide__bubble { animation: none !important; opacity: 1 !important; }
.ld-steps--stagger .ld-step.reveal, .ld-steps--stagger .ld-step__n, .ld-steps--stagger .ld-step::before { transform: none !important; transition: none !important; }
}
/* ═════════ добавлено 22.10 (дизайн-проход «ритм ленты»): тона секций, волны, заголовки с eyebrow, цветные карточки,
иллюстративные плашки, анимации входа и микровзаимодействия. Хелперы: h.section({tone, wave, num, icon, accent}), h.divider, h.band, h.grid,
h.card({icon}, {tone|glass}). Без этих опций старые блоки не меняются. Цвета — токены tokens.css «новое 22.10». ═════════ */
@keyframes joy-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }
@keyframes joy-slide { to { transform: translateX(-50%); } }
@keyframes joy-land { 0% { transform: none; } 30% { transform: translateY(-16%) scale(.95, 1.06); } 55% { transform: translateY(0) scale(1.07, .93); }
75% { transform: translateY(-5%) scale(.99, 1.01); } 100% { transform: none; } }
@keyframes joy-glow { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes joy-bar { from { transform: scaleX(0); } to { transform: none; } }
/* ───────── тон секции: полоса на всю ширину листа ───────── */
.ld-tone { --tone-a: var(--t-cream-a); --tone-b: var(--t-cream-b); --tone-g1: var(--t-cream-g1); --tone-g2: var(--t-cream-g2);
position: relative; isolation: isolate; margin-inline: calc(-1 * var(--gutter)); padding: var(--band-pad) var(--gutter);
background: linear-gradient(180deg, var(--tone-a) 0%, var(--tone-b) 100%); color: var(--ink); }
.ld-tone--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); }
.ld-tone--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); }
.ld-tone--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); }
.ld-tone--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); --ink-2: var(--t-sky-ink2); }
.ld-tone--sunset { --tone-a: var(--t-sunset-a); --tone-b: var(--t-sunset-b); --tone-g1: var(--t-sunset-g1); --tone-g2: var(--t-sunset-g2);
background: linear-gradient(180deg, var(--t-sunset-a) 0%, var(--t-sunset-m) 38%, var(--t-sunset-m2) 74%, var(--t-sunset-b) 100%); }
.ld-tone--night { --tone-a: var(--t-night-a); --tone-b: var(--t-night-b); --tone-g1: var(--t-night-g1); --tone-g2: var(--t-night-g2); }
/* светлые тона: карточки белые (как лист); в тёмной теме — на ступень светлее полосы */
[data-theme="dark"] .ld-tone--lavender { --surface: #362F82; }
[data-theme="dark"] .ld-tone--peach { --surface: #46294F; }
[data-theme="dark"] .ld-tone--mint { --surface: #1D4256; }
[data-theme="dark"] .ld-tone--sky { --surface: #2B3F8C; }
/* тёмные тона (sunset, night): белый текст, стеклянные карточки, светлые подписи — токены как в тёмной теме */
.ld-tone--dark { --ink: var(--t-ink-dark); --ink-2: var(--t-ink2-dark); --ink-3: var(--t-ink2-dark); --accent-ink: var(--t-eyebrow-dark);
--surface: var(--glass); --card-border: var(--glass-line); --line: rgba(255,255,255,.16); --field: rgba(255,255,255,.08); --sh-1: none;
--primary-soft: rgba(255,255,255,.16); --on-primary-soft: #FFFFFF; --success-soft: rgba(95,199,154,.20); --success: #8FE0BC; --track: rgba(255,255,255,.18);
color: var(--ink); }
.ld-tone--dark .card, .ld-tone--dark .ld-quote, .ld-tone--dark .ld-faq__item, .ld-tone--dark .ld-net, .ld-tone--dark .guide__bubble { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ld-tone--dark .btn--primary { background: linear-gradient(135deg, var(--fill-a), var(--fill-b)); color: var(--on-fill); box-shadow: 0 10px 24px -6px rgba(255,138,61,.55); }
.ld-tone--dark .btn--secondary { background: rgba(255,255,255,.16); color: #FFFFFF; }
.ld-tone--dark .btn--ghost { color: var(--ink-2); }
.ld-tone--dark .btn--line { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
/* декор: пятна-подсветки, звёзды, солнце заката, облака. Слой не выходит за полосу; волна — выше слоя */
.ld-tone__deco { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ld-tone__glow { position: absolute; border-radius: 50%; filter: blur(2px); animation: joy-glow 9s ease-in-out infinite; }
.ld-tone__glow--1 { width: 260px; height: 260px; right: -90px; top: -70px; background: radial-gradient(circle, var(--tone-g1) 0%, transparent 70%); }
.ld-tone__glow--2 { width: 240px; height: 240px; left: -110px; bottom: -60px; background: radial-gradient(circle, var(--tone-g2) 0%, transparent 70%); animation-delay: -4s; }
.ld-tone__stars { opacity: .9; }
.ld-tone__stars i:not(.sp) { --stars-c: #FFFFFF; }
.ld-tone__sun { position: absolute; right: -54px; bottom: -64px; width: 190px; height: 190px; border-radius: 50%;
background: radial-gradient(circle at 40% 36%, #FFE39A 0%, #FFBE55 48%, #FF8F3F 100%); box-shadow: 0 0 80px 30px var(--tone-g1); opacity: .9; }
[data-theme="dark"] .ld-tone__sun { background: radial-gradient(circle at 40% 36%, #FBF4DC 0%, #D8C99C 100%); box-shadow: 0 0 70px 24px rgba(233,224,255,.18); opacity: .55; }
.ld-cloud { position: absolute; left: var(--cx); top: var(--cy); width: var(--cw); height: auto; fill: var(--cloud); opacity: .95;
filter: drop-shadow(0 6px 10px rgba(47,123,224,.12)); animation: joy-drift 16s ease-in-out var(--cd, 0s) infinite; }
[data-theme="dark"] .ld-cloud { filter: none; }
.ld-tone > :not(.ld-tone__deco):not(.ld-wave) { position: relative; z-index: 1; }
/* ───────── волна сверху (wave: true) и внизу — обратно в лист ───────── */
.ld-wave { position: absolute; left: 0; right: 0; top: calc(1px - var(--wave-h)); height: var(--wave-h); overflow: hidden; pointer-events: none; z-index: 2; }
.ld-wave svg { position: absolute; left: 0; top: 0; height: 100%; display: block; }
.ld-wave__front { width: 100%; fill: var(--tone-a); }
.ld-wave__back { width: 200%; fill: var(--tone-a); opacity: .45; animation: joy-slide 14s linear infinite; }
.ld-wave--end { top: auto; bottom: -1px; transform: scaleX(-1); } /* лист «поднимается» волной снизу */
.ld-wave--end .ld-wave__front { fill: var(--bg); }
.ld-tone:has(+ :is(.ld-tone, .ld-divider)) > .ld-wave--end, .ld-tone.no-wave-end > .ld-wave--end { display: none; }
.ld-tone:not(.ld-tone--cream):not(.no-wave-end):not(:has(+ :is(.ld-tone, .ld-divider))) { padding-bottom: calc(var(--band-pad) + var(--wave-h) - 8px); }
/* ритм: тонированная секция отступает от обычного блока; соседние тона стыкуются без щели (волна ложится на низ предыдущей) */
.ld-section.ld-tone, .ld-band.ld-tone { margin-top: var(--s-6); }
.ld-section.ld-tone.has-wave, .ld-band.ld-tone.has-wave { margin-top: calc(var(--s-5) + var(--wave-h)); }
.ld-tone + .ld-tone.ld-tone, .ld-divider + .ld-tone.ld-tone, .ld-tone + .ld-divider.ld-divider { margin-top: 0; }
.ld-tone + :not(.ld-tone):not(.ld-divider):not(.sheet__end) { margin-top: var(--s-5); }
/* ───────── отдельный разделитель: h.divider({shape, from, to}) ───────── */
.ld-divider { position: relative; height: var(--wave-h); margin-inline: calc(-1 * var(--gutter)); background: var(--d-from); overflow: hidden; }
.ld-divider .ld-divider__svg, .ld-divider svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ld-divider .ld-wave__front { fill: var(--d-to); }
.ld-divider .ld-wave__back { width: 200%; fill: var(--d-to); opacity: .45; animation: joy-slide 14s linear infinite; }
.ld-divider--flip svg { transform: scaleX(-1); }
/* ───────── заголовок секции: eyebrow с номером/иконкой и полоской, крупный заголовок ───────── */
.ld-acc--orange { --acc: var(--acc-orange); --acc-on: var(--acc-orange-on); --acc-ink: var(--acc-orange-ink); }
.ld-acc--violet { --acc: var(--acc-violet); --acc-on: var(--acc-violet-on); --acc-ink: var(--acc-violet-ink); }
.ld-acc--mint { --acc: var(--acc-mint); --acc-on: var(--acc-mint-on); --acc-ink: var(--acc-mint-ink); }
.ld-acc--sky { --acc: var(--acc-sky); --acc-on: var(--acc-sky-on); --acc-ink: var(--acc-sky-ink); }
.ld-acc--rose { --acc: var(--acc-rose); --acc-on: var(--acc-rose-on); --acc-ink: var(--acc-rose-ink); }
.ld-acc--sun { --acc: var(--acc-sun); --acc-on: var(--acc-sun-on); --acc-ink: var(--acc-sun-ink); }
.ld-tone--dark { --acc-ink: var(--t-eyebrow-dark); } /* на тёмной полосе надпись светлая, кружок — цвет акцента */
.ld-section--rich .ld-section__head { margin-bottom: var(--s-5); }
.ld-eyebrow--rich { display: flex; align-items: center; gap: 10px; color: var(--acc-ink, var(--accent-ink)); }
.ld-eyebrow__mark { flex: none; min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--r-pill); display: grid; place-items: center;
background: var(--acc, var(--accent)); color: var(--acc-on, #FFFFFF); font-size: var(--fs-1); line-height: 1; font-weight: var(--fw-bold); letter-spacing: .02em;
box-shadow: 0 6px 14px -6px var(--acc, var(--accent)); }
.ld-eyebrow__mark .ic { width: 16px; height: 16px; }
.ld-eyebrow__text { min-width: 0; }
.ld-eyebrow__line { flex: 1; min-width: 24px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--acc, var(--accent)), transparent); opacity: .7; transform-origin: 0 50%; }
.ld-section--rich .ld-title, .ld-band__title { margin-top: var(--s-3); font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: var(--fw-bold); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.ld-section--rich .ld-section__head > .ld-title:first-child { margin-top: 0; }
.ld-section--rich .ld-lead { margin-top: var(--s-2); color: var(--ink-2); text-wrap: pretty; }
/* ───────── карточки: цветные (h.card({icon, title, text}, {tone})) и стеклянная ───────── */
.card__ic { width: 44px; height: 44px; margin-bottom: var(--s-3); border-radius: 50%; display: grid; place-items: center;
background: var(--card-ic, var(--primary)); color: var(--card-ic-on, var(--on-primary)); box-shadow: 0 8px 16px -8px var(--card-ic, var(--primary)); }
.card--tone { position: relative; overflow: hidden; box-shadow: none; border-color: transparent; }
.card--tone::after { content: ""; position: absolute; right: -36px; top: -36px; width: 112px; height: 112px; border-radius: 50%; background: var(--card-ic); opacity: .14; pointer-events: none; }
.card--tone > * { position: relative; z-index: 1; }
.card--peach { background: var(--card-peach); --card-ic: var(--card-peach-ic); --card-ic-on: var(--card-peach-ic-on); }
.card--lavender { background: var(--card-lavender); --card-ic: var(--card-lavender-ic); --card-ic-on: var(--card-lavender-ic-on); }
.card--mint { background: var(--card-mint); --card-ic: var(--card-mint-ic); --card-ic-on: var(--card-mint-ic-on); }
.card--sun { background: var(--card-sun); --card-ic: var(--card-sun-ic); --card-ic-on: var(--card-sun-ic-on); }
.card--sky { background: var(--card-sky); --card-ic: var(--card-sky-ic); --card-ic-on: var(--card-sky-ic-on); }
.card--tone .card__title, .card--tone .card__text { color: var(--ink); }
.card--tone .card__text { color: var(--ink-2); }
.card--glass { background: var(--glass); border: 1px solid var(--glass-line); box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ld-tone--dark .card__ic { --card-ic: var(--acc, var(--accent)); --card-ic-on: var(--acc-on, #FFFFFF); }
.ld-tone--dark .card--tone { background: var(--glass); border: 1px solid var(--glass-line); } /* цветная карточка на тёмной полосе становится стеклом */
.ld-grid { display: grid; gap: var(--s-3); }
.ld-grid--2 { grid-template-columns: 1fr 1fr; }
.ld-grid--1 { grid-template-columns: 1fr; }
/* ───────── иллюстративная плашка: h.band({tone, sunny, title, text, cta}) ───────── */
.ld-band { padding-top: calc(var(--band-pad) - 4px); }
.ld-band__in { display: flex; align-items: center; gap: var(--s-4); }
.ld-band--right .ld-band__in { flex-direction: row-reverse; }
.ld-band__fig { flex: none; display: grid; place-items: center; }
.ld-band__text { flex: 1; min-width: 0; }
.ld-band__title { margin-top: var(--s-2); }
.ld-band__text > .ld-band__title:first-child { margin-top: 0; }
.ld-band__lead { margin-top: var(--s-2); font-size: var(--fs-3); line-height: var(--lh-3); color: var(--ink-2); text-wrap: pretty; }
.ld-band__cta { margin-top: var(--s-5); }
.ld-band .sunny-in.is-in .sunny-in__fig { filter: drop-shadow(0 12px 18px rgba(20,12,60,.22)); }
/* ───────── анимации входа: тонированная секция и плашка (.reveal → .is-in) ─────────
Сама полоса не мигает; заголовок въезжает снизу, дети тела — по очереди (до 8, дальше одной волной), в сетке/стопке — тоже по очереди. */
.ld-section--rich.reveal, .ld-band.reveal { opacity: 1; transform: none; transition: none; }
.ld-section--rich :is(.ld-section__head > *, .ld-section__body > *, .ld-section__body > :is(.ld-grid, .stack) > *), .ld-band :is(.ld-band__text > *, .ld-band__cta) {
transition: opacity .55s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--rd, 0s); }
.ld-section--rich:not(.is-in) .ld-section__head > *, .ld-band:not(.is-in) .ld-band__text > * { opacity: 0; transform: translateY(28px); }
.ld-section--rich:not(.is-in) .ld-section__body > *, .ld-band:not(.is-in) .ld-band__cta { opacity: 0; transform: translateY(24px) scale(.97); }
.ld-section--rich:not(.is-in) .ld-section__body > :is(.ld-grid, .stack) { opacity: 1; transform: none; }
.ld-section--rich:not(.is-in) .ld-section__body > :is(.ld-grid, .stack) > * { opacity: 0; transform: translateY(24px) scale(.95); }
.ld-section--rich:not(.is-in) .ld-eyebrow__line { transform: scaleX(0); }
.ld-section--rich .ld-eyebrow__line { transition: transform .8s cubic-bezier(.2, .8, .2, 1) .35s; }
:is(.ld-section__head, .ld-band__text) > :nth-child(2) { --rd: .08s; }
:is(.ld-section__head, .ld-band__text) > :nth-child(3) { --rd: .16s; }
:is(.ld-section__head, .ld-band__text) > :nth-child(4) { --rd: .24s; }
.ld-section__body > :nth-child(1), .ld-band__cta { --rd: .22s; }
.ld-section__body > :nth-child(2) { --rd: .32s; }
.ld-section__body > :nth-child(3) { --rd: .42s; }
.ld-section__body > :nth-child(4) { --rd: .52s; }
.ld-section__body > :nth-child(5) { --rd: .62s; }
.ld-section__body > :nth-child(6) { --rd: .72s; }
.ld-section__body > :nth-child(7) { --rd: .82s; }
.ld-section__body > :nth-child(n + 8) { --rd: .9s; }
.ld-section__body > :is(.ld-grid, .stack) > :nth-child(1) { --rd: .26s; }
.ld-section__body > :is(.ld-grid, .stack) > :nth-child(2) { --rd: .36s; }
.ld-section__body > :is(.ld-grid, .stack) > :nth-child(3) { --rd: .46s; }
.ld-section__body > :is(.ld-grid, .stack) > :nth-child(4) { --rd: .56s; }
.ld-section__body > :is(.ld-grid, .stack) > :nth-child(5) { --rd: .66s; }
.ld-section__body > :is(.ld-grid, .stack) > :nth-child(n + 6) { --rd: .76s; }
/* .reveal внутри тела тонированной секции берёт ту же очередь */
.ld-section--rich .ld-section__body > .reveal { transition-delay: var(--rd, 0s); }
/* персонаж: въезд и «приземление» с подпрыгиванием */
.ld-section--rich .sunny-in.is-in .sunny-in__fig, .ld-band .sunny-in.is-in .sunny-in__fig {
animation: joy-enter-left .9s cubic-bezier(.2, .8, .3, 1) var(--reveal-delay, .15s) both, joy-land .6s ease-out calc(var(--reveal-delay, .15s) + .9s) 1 normal none; }
.ld-section--rich .sunny-in.is-in .sunny-in--right, .ld-band .sunny-in.is-in .sunny-in--right { animation-name: joy-enter-right, joy-land; }
.ld-section--rich .sunny-in.is-in .sunny-in--bottom, .ld-band .sunny-in.is-in .sunny-in--bottom { animation-name: joy-enter-up, joy-land; }
.ld-section--rich .sunny-in.is-now .sunny-in__fig, .ld-band .sunny-in.is-now .sunny-in__fig { animation: none; }
/* показано сразу (снимки, перерисовка): без переходов */
.ld-section--rich.is-now :is(.ld-section__head > *, .ld-section__body > *, .ld-section__body > :is(.ld-grid, .stack) > *, .ld-eyebrow__line),
.ld-band.is-now :is(.ld-band__text > *, .ld-band__cta) { transition: none; }
/* ───────── микровзаимодействия ───────── */
.btn { transition: transform .18s cubic-bezier(.3, .7, .4, 1.6), box-shadow .2s ease, background-color .2s ease; }
.btn:active { transition-duration: .08s; }
.tile, .card[data-to], .ld-net, .row-link { transition: transform .3s cubic-bezier(.2, .8, .3, 1.3), box-shadow .3s ease; }
.tile:not(.tile--locked):active { transform: perspective(700px) rotateX(5deg) rotateY(-6deg) scale(.97); transition-duration: .12s; }
.card[data-to]:active, .ld-net:active, .row-link:active { transform: scale(.98); transition-duration: .1s; }
@media (hover: hover) and (pointer: fine) {
.tile:not(.tile--locked):hover { transform: perspective(700px) rotateX(3deg) rotateY(-4deg) translateY(-2px); }
.card[data-to]:hover, .ld-net:hover { transform: translateY(-2px); }
}
.pick__opt { transition: transform .4s cubic-bezier(.3, 1.8, .5, 1), background-color .2s ease, box-shadow .2s ease; }
.pick__opt:active { transform: scale(.92); transition-duration: .08s; }
/* ───────── меньше движения (22.10): всё на месте, декор стоит ───────── */
@media (prefers-reduced-motion: reduce) {
.ld-tone__glow, .ld-cloud, .ld-wave__back { animation: none !important; }
.ld-section--rich :is(.ld-section__head > *, .ld-section__body > *, .ld-section__body > :is(.ld-grid, .stack) > *, .ld-eyebrow__line),
.ld-band :is(.ld-band__text > *, .ld-band__cta) { opacity: 1 !important; transform: none !important; transition: none !important; }
.btn, .tile, .card[data-to], .ld-net, .row-link, .pick__opt { transition: none; }
.tile:not(.tile--locked):active, .tile:not(.tile--locked):hover, .pick__opt:active { transform: none; }
}
/* ═════════ 23.10 — финальные правки v3 (ПРАВКИ_23.10_v3.md, «Сквозные» С1–С5) ═════════
Хелперы — app.js: h.logo, h.sunny (руки, ноги, жесты, эмоции), h.sunnyMood, h.sunnyScene, h.scale({mood}), h.feedNav, h.hero/h.scene({logo, navToggle, shimmer, clouds}),
h.clouds, h.floaters, h.beforeAfter, h.mediaCard, h.personCard. Каталог — screens/_characters.html, снимок снимки/персонажи.png.
Цвета — токены tokens.css «новое 23.10»; исключение, как и раньше, — рисунок персонажа и его реквизита (иллюстрация). */
/* ───────── С1. логотип: h.logo({size, lockup, tone}) ───────── */
.joy-logo { --logo-fs: 26px; display: inline-flex; flex: none; flex-direction: column; align-items: flex-start; color: var(--ink); text-decoration: none; line-height: 1; }
.joy-logo--light { color: var(--logo-on-sky); text-shadow: 0 1px 12px rgba(20,12,60,.22); }
.joy-logo--lg { --logo-fs: 44px; }
.joy-logo--md { --logo-fs: 26px; }
.joy-logo--sm { --logo-fs: 18px; }
.joy-logo__mark { font-family: var(--font-display); font-weight: 400; font-size: var(--logo-fs); line-height: 1; letter-spacing: .13em; white-space: nowrap; }
.joy-logo__reg { position: relative; top: -.15em; margin-left: -.1em; font-family: var(--font); font-size: .26em; letter-spacing: 0; vertical-align: top; }
.joy-logo__script { margin-top: calc(var(--logo-fs) * -.08); padding-left: calc(var(--logo-fs) * .42); font-family: var(--font-script); font-size: calc(var(--logo-fs) * .64);
line-height: 1.05; letter-spacing: .01em; white-space: nowrap; }
/* в шапке-сцене: логотип слева, аватар справа */
.scene__bar { height: auto; min-height: 48px; padding-top: 2px; }
.scene__brand { margin-top: 2px; }
/* в небе h.hero: всегда слева сверху; рядом с кнопкой «назад» — сразу справа от неё */
.ld-hero__brand { position: absolute; z-index: 3; top: var(--s-4); left: 20px; pointer-events: none; }
.ld-hero__brand a.joy-logo { pointer-events: auto; }
.ld-hero--bleed > .ld-hero__brand { top: calc(var(--status-h) + 2px); }
.ld-hero:has(> .ld-hero__top .topbar__back) > .ld-hero__brand { left: 58px; }
.ld-hero--logo > .ld-hero__in { padding-top: calc(var(--s-5) + 56px); }
/* ───────── С4. навигация по разделу: значок у солнышка, кнопки-солнышки в шапке, панель h.feedNav ───────── */
.navhint { position: absolute; right: 4%; bottom: 6%; z-index: 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
background: var(--surface); color: var(--primary); box-shadow: 0 2px 8px rgba(20,12,60,.22); pointer-events: none; }
.navhint .ic { transform: rotate(90deg); transition: transform .3s ease; }
[aria-expanded="true"] > .navhint .ic { transform: rotate(-90deg); }
.scene__sunbtn { position: absolute; z-index: 3; left: 258px; top: calc(var(--scene-h, 244px) - 126px); width: 116px; height: 116px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.scene__sunbtn .navhint { right: 10px; bottom: 14px; }
.ld-hero__sunbtn { position: relative; display: inline-flex; margin-bottom: var(--s-3); padding: 0; border: 0; border-radius: 50%; background: transparent; }
.ld-hero__sunbtn > .ld-hero__sunny { margin-bottom: 0; }
.ld-hero__navsun { position: absolute; z-index: 3; top: var(--s-3); right: 14px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; }
.ld-hero--bleed > .ld-hero__navsun { top: calc(var(--status-h) + 2px); }
.ld-hero__navsun .navhint { width: 18px; height: 18px; right: -2px; bottom: -2px; }
/* мерцание шапки: солнце/луна чуть «дышит» светом, звёзды и искры мигают */
@keyframes joy-halo-1 { 0%, 100% { opacity: .08; } 50% { opacity: .17; } }
@keyframes joy-halo-2 { 0%, 100% { opacity: .14; } 50% { opacity: .26; } }
@keyframes joy-sunglow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255,190,90,0)); } 50% { filter: drop-shadow(0 0 12px rgba(255,200,110,.75)); } }
@keyframes joy-twinkle-svg { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes joy-twinkle-o { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes joy-shimmer { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.16); } }
.scene--shimmer .scene__art .halo:first-of-type { animation: joy-halo-1 4.8s ease-in-out infinite; }
.scene--shimmer .scene__art .halo + .halo { animation: joy-halo-2 4.8s ease-in-out -2.4s infinite; }
.scene--shimmer .scene__art :is(.sun, .moon) > circle:first-child { animation: joy-sunglow 3.6s ease-in-out infinite; }
.scene--shimmer .scene__art .star { transform-box: fill-box; transform-origin: center; animation: joy-twinkle-svg 3.2s ease-in-out infinite; }
.scene--shimmer .scene__art .star:nth-of-type(2n) { animation-duration: 2.6s; animation-delay: -1.1s; }
.scene--shimmer .scene__art .star:nth-of-type(3n) { animation-duration: 3.8s; animation-delay: -2.2s; }
.scene--shimmer .scene__art .spark { animation: joy-twinkle-o 2.8s ease-in-out infinite; }
.scene--shimmer .scene__art .spark:nth-of-type(2) { animation-delay: -1.3s; }
.scene--shimmer .scene__art .spark:nth-of-type(3) { animation-delay: -.6s; }
.ld-hero--shimmer :is(.ld-hero__sunny, .ld-hero__navsun .sunny) .sunny__glow { animation: joy-shimmer 3.2s ease-in-out infinite !important; }
.ld-hero__clouds, .scene__clouds { z-index: 0; }
.ld-hero__clouds { bottom: 46%; } /* облака только в верхней части неба — не под текстом */
.ld-hero__clouds .cloud { opacity: calc(var(--o, .9) * .7); }
.scene__clouds .cloud { opacity: calc(var(--o, .9) * .55); }
/* панель: липнет под системной строкой, раскрывается плавно; в закрытом виде высоты нет — лента не сдвигается */
.feednav { position: sticky; top: var(--status-h); z-index: 9; margin: 0 calc(-1 * var(--gutter)); }
.sheet > .feednav, .sheet--flat > .feednav { margin-top: 0; }
.feednav__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2, .8, .2, 1); }
.feednav.is-open .feednav__panel { grid-template-rows: 1fr; }
.feednav__in { min-height: 0; overflow: hidden; }
.feednav__track { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; padding: 10px var(--gutter); padding-right: 64px;
background: var(--feednav-bg); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--feednav-line); }
.feednav__track::-webkit-scrollbar { display: none; }
.feednav__chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--feednav-line);
background: var(--feednav-chip); color: var(--feednav-chip-ink); font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-semibold); white-space: nowrap;
transition: background-color .25s ease, color .25s ease, transform .2s ease; }
.feednav__chip[aria-current="true"] { background: var(--feednav-on); color: var(--feednav-on-ink); border-color: transparent; }
.feednav__chip:active { transform: scale(.95); }
.feednav__mini { position: absolute; top: 6px; right: 12px; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
background: var(--feednav-bg); box-shadow: var(--sh-1), 0 0 0 1px var(--feednav-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .3, 1.3); }
.feednav.is-stuck .feednav__mini { opacity: 1; transform: none; pointer-events: auto; }
.feednav__mini .navhint { width: 18px; height: 18px; right: -3px; bottom: -3px; }
/* вариант «точки»: точка на пункт, у активного — подпись */
.feednav--dots .feednav__track { justify-content: center; gap: 4px; }
.feednav--dots .feednav__chip { height: 30px; padding: 0 8px; border: 0; background: transparent; }
.feednav--dots .feednav__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--feednav-chip-ink); opacity: .45; }
.feednav--dots .feednav__lbl { display: none; }
.feednav--dots .feednav__chip[aria-current="true"] { padding: 0 12px; background: var(--feednav-on); }
.feednav--dots .feednav__chip[aria-current="true"] .feednav__dot { background: currentColor; opacity: 1; }
.feednav--dots .feednav__chip[aria-current="true"] .feednav__lbl { display: inline; }
/* ───────── С5. облака h.clouds / тон sky и плавающие частицы h.floaters ───────── */
@keyframes joy-cloud { from { transform: translateX(calc(var(--dx, 20px) * -1)); } to { transform: translateX(var(--dx, 20px)); } }
@keyframes joy-float { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 18% { opacity: .9; } 50% { transform: translate(var(--sw, 8px), -36px) scale(1); }
82% { opacity: .7; } 100% { opacity: 0; transform: translate(0, -72px) scale(.8); } }
.clouds, .floaters { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.cloud { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 2 / 1; opacity: var(--o, .9);
animation: joy-cloud var(--t, 40s) ease-in-out var(--d, 0s) infinite alternate; will-change: transform; }
.cloud::before { content: ""; position: absolute; left: 6%; right: 6%; top: 34%; bottom: -8%; border-radius: 50%; background: #FFFFFF; filter: blur(12px); opacity: .55; }
.cloud svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 10px rgba(47,123,224,.14)); }
.cloud__body { fill: #FFFFFF; }
.cloud__shade { fill: rgba(47,123,224,.10); }
.cloud__hi { fill: none; stroke: rgba(255,255,255,.95); stroke-width: 3; stroke-linecap: round; opacity: .8; }
[data-theme="dark"] .cloud { opacity: calc(var(--o, .9) * .14); }
[data-theme="dark"] .cloud svg { filter: none; }
[data-theme="dark"] .cloud__shade { fill: transparent; }
.floaters { --fl: var(--floater); }
.floaters--warm { --fl: var(--floater-warm); }
.floaters i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: var(--fl);
box-shadow: 0 0 calc(var(--s) * 1.8) var(--fl); opacity: 0; animation: joy-float var(--t, 16s) ease-in-out var(--d, 0s) infinite; }
.floaters i.sp { width: calc(var(--s) * 2.2); height: calc(var(--s) * 2.2); border-radius: 0; box-shadow: none;
clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
/* ───────── С2. персонаж: руки-лучики с ладошками, ноги, реквизит ───────── */
.sunny { --sunny-arm: #F07A2A; --sunny-palm: #FFD27A; --sunny-palm-line: #E0661C; --sunny-seat: #8E7CF0; }
:is(.sunny--moon, [data-theme="dark"] .sunny--auto) { --sunny-arm: #CFC4A0; --sunny-palm: #F4ECD2; --sunny-palm-line: #A99E7A; --sunny-seat: #5B4EE6; }
.sunny__arms, .sunny__legs, .sunny__props { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sunny .arm, .sunny .leg { transform-box: view-box; }
.sunny .arm--l { transform-origin: 26px 70px; transform: rotate(-62deg); }
.sunny .arm--r { transform-origin: 94px 70px; transform: rotate(62deg); }
.sunny .a-limb, .sunny .g-limb { fill: none; stroke: var(--sunny-arm); stroke-width: 5.5; stroke-linecap: round; }
.sunny .a-palm, .sunny .a-thumb, .sunny .g-foot { fill: var(--sunny-palm); stroke: var(--sunny-palm-line); stroke-width: 1.6; }
.sunny .a-finger { display: none; fill: none; stroke: var(--sunny-palm-line); stroke-width: 3.6; stroke-linecap: round; }
.sunny .leg--l { transform-origin: 51px 92px; }
.sunny .leg--r { transform-origin: 69px 92px; }
.sunny .g-seat { display: none; fill: var(--sunny-seat); }
.sunny:is(.sunny--run, .sunny--sit, .sunny--stand, .sunny--go) .sunny__rays .rb { opacity: 0; }
/* лицо v3: брови, грустный рот, плач, «говорит», слёзы */
.sunny .f-brows, .sunny .f-tears { display: none; }
.sunny .f-brows path, .sunny .f-frown { fill: none; stroke: var(--sunny-ink); stroke-width: 2.5; stroke-linecap: round; }
.sunny .f-wail, .sunny .f-talk { fill: var(--sunny-ink); }
.sunny .f-tear { fill: var(--tear); stroke: rgba(255,255,255,.75); stroke-width: .6; transform-box: fill-box; transform-origin: 50% 0; }
.sunny .f-talk { transform-box: fill-box; transform-origin: 50% 50%; }
/* реквизит: телефон, сюрприз, искры, сердечки, замок, тучка, пузырь реплики, линии скорости */
.sunny:not(.sunny--cry) .p-cloud { display: none; }
.sunny .p-phone__body { fill: #2B2470; }
.sunny .p-phone__screen { fill: #BFE2FF; }
.sunny .p-phone__btn { fill: none; stroke: #8C84D6; stroke-width: 1.6; stroke-linecap: round; }
.sunny .p-phone, .sunny .p-gift__in, .sunny .p-spark, .sunny .p-heart, .sunny .p-drop, .sunny .p-talk__d, .sunny .p-speed path { transform-box: fill-box; transform-origin: 50% 50%; }
.sunny .p-gift { transform-box: view-box; transform-origin: 0 0; transform: translate(95px, 16px); }
.sunny .p-gift__box { fill: #FF5C8A; }
.sunny .p-gift__lid { fill: #FF7BA1; }
.sunny .p-gift__rib { fill: none; stroke: #FFD15C; stroke-width: 3.2; }
.sunny .p-gift__bow { fill: #FFD15C; stroke: #E0A53A; stroke-width: .8; }
.sunny .p-spark { fill: #FFB23E; }
.sunny .p-heart { fill: #FF5C8A; stroke: #FFFFFF; stroke-width: .8; transform: translate(4px, -24px); }
.sunny .p-lock__shackle { fill: none; stroke: #B7B3DD; stroke-width: 4.5; stroke-linecap: round; }
.sunny .p-lock__body { fill: #4B3FD6; }
.sunny .p-lock__hole { fill: #FFD15C; }
.sunny .p-lock__slot { fill: none; stroke: #FFD15C; stroke-width: 2.6; stroke-linecap: round; }
.sunny .p-cloud__body { fill: #B7B3DD; }
.sunny .p-drop { fill: none; stroke: var(--tear); stroke-width: 2.2; stroke-linecap: round; }
.sunny .p-talk__b { fill: #FFFFFF; stroke: #D9D4FF; stroke-width: 1.2; }
.sunny .p-talk__d { fill: #6E6A99; }
.sunny .p-speed path { fill: none; stroke: var(--sunny-ray); stroke-width: 3; stroke-linecap: round; opacity: .85; }
[data-theme="dark"] .sunny .p-talk__b { fill: #2A2661; stroke: rgba(255,255,255,.22); }
[data-theme="dark"] .sunny .p-talk__d { fill: #C9C5EA; }
[data-theme="dark"] .sunny .p-lock__body { fill: #7B6CFF; }
[data-theme="dark"] .sunny .p-cloud__body { fill: #6E6A99; }
/* сдвиг фазы для рук, ног и реквизита; --lag — своя задержка элемента (второе сердечко, правая слеза, капли) */
.sunny .arm, .sunny .leg, .sunny .sunny__props *, .sunny .f-talk, .sunny .f-tear, .sunny .f-big, .sunny .f-tongue { animation-delay: calc(var(--sunny-phase, 0s) + var(--lag, 0s)) !important; }
.sunny .p-heart--2 { --lag: -1.2s; }
.sunny .f-tear--r { --lag: -.65s; }
.sunny .p-drop--2 { --lag: -.35s; } .sunny .p-drop--3 { --lag: -.7s; }
.sunny .p-talk__d--2 { --lag: .2s; } .sunny .p-talk__d--3 { --lag: .4s; }
.sunny .p-speed--2 { --lag: -.15s; } .sunny .p-speed--3 { --lag: -.3s; }
@keyframes joy-arm-wave { 0%, 100% { transform: rotate(-56deg); } 50% { transform: rotate(-96deg); } }
@keyframes joy-arm-cheer-l { 0%, 100% { transform: rotate(46deg); } 50% { transform: rotate(70deg); } }
@keyframes joy-point { 0%, 100% { transform: rotate(var(--pa, -6deg)); } 50% { transform: rotate(var(--pa, -6deg)) translateX(4px); } }
@keyframes joy-heart-arm { 0%, 100% { transform: rotate(-32deg); } 10% { transform: rotate(-50deg); } 24% { transform: rotate(-26deg); } }
@keyframes joy-heart-up { 0%, 8% { opacity: 0; transform: translate(0, 0) scale(.3); } 18% { opacity: 1; transform: translate(0, -6px) scale(1.1); } 100% { opacity: 0; transform: translate(8px, -46px) scale(1.35); } }
@keyframes joy-screen { 0%, 100% { fill: #BFE2FF; } 50% { fill: #DDF0FF; } }
@keyframes joy-gift-screen { 0%, 22% { fill: #BFE2FF; } 30% { fill: #FFF6D6; } 40%, 100% { fill: #BFE2FF; } }
@keyframes joy-gift-phone { 0%, 52% { opacity: 1; transform: none; } 60%, 100% { opacity: 0; transform: translateY(6px) scale(.85); } }
@keyframes joy-gift-fly { 0%, 24% { opacity: 0; transform: translate(60px, 90px) scale(.15); } 31% { opacity: 1; transform: translate(60px, 84px) scale(.5); }
48% { opacity: 1; transform: translate(98px, 12px) scale(1.2) rotate(-10deg); } 56% { opacity: 1; transform: translate(94px, 18px) scale(.95) rotate(6deg); }
64%, 100% { opacity: 1; transform: translate(95px, 16px) scale(1) rotate(0); } }
@keyframes joy-gift-ar { 0%, 54% { transform: rotate(140deg); } 62% { transform: rotate(-50deg); } 72% { transform: rotate(-36deg); } 82% { transform: rotate(-58deg); } 92%, 100% { transform: rotate(-46deg); } }
@keyframes joy-gift-al { 0%, 54% { transform: rotate(-140deg); } 62% { transform: rotate(50deg); } 72% { transform: rotate(36deg); } 82% { transform: rotate(58deg); } 92%, 100% { transform: rotate(46deg); } }
@keyframes joy-gift-fig { 0%, 58% { transform: none; } 66% { transform: translateY(-10%); } 74% { transform: translateY(0) scale(1.04, .96); } 82% { transform: translateY(-6%); } 90%, 100% { transform: none; } }
@keyframes joy-gift-spark { 0%, 56% { opacity: 0; transform: scale(.2); } 66% { opacity: 1; transform: scale(1.2); } 80% { opacity: .5; transform: scale(.8); } 92% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(.4); } }
@keyframes joy-f-a { 0%, 55% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes joy-f-b { 0%, 55% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes joy-tear { 0% { opacity: 0; transform: translateY(-2px) scaleY(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px) scaleY(1.2); } }
@keyframes joy-drip { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(7px); } }
@keyframes joy-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes joy-shiver { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1.2%); } 75% { transform: translateX(1.2%); } }
@keyframes joy-talk { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes joy-talk-arm { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(-30deg); } }
@keyframes joy-swing-l { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(-5deg); } }
@keyframes joy-swing-r { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(5deg); } }
@keyframes joy-run-l { 0%, 100% { transform: rotate(32deg); } 50% { transform: rotate(-32deg); } }
@keyframes joy-run-r { 0%, 100% { transform: rotate(-32deg); } 50% { transform: rotate(32deg); } }
@keyframes joy-run-ar { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(100deg); } }
@keyframes joy-run-al { 0%, 100% { transform: rotate(-100deg); } 50% { transform: rotate(-20deg); } }
@keyframes joy-run-fig { 0%, 50%, 100% { transform: translateY(0) rotate(7deg); } 25%, 75% { transform: translateY(-5%) rotate(7deg); } }
@keyframes joy-speed { 0% { opacity: 0; transform: translateX(6px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateX(-8px); } }
@keyframes joy-go-l { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } }
@keyframes joy-go-r { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
@keyframes joy-go-ar { 0%, 100% { transform: rotate(48deg); } 50% { transform: rotate(80deg); } }
@keyframes joy-go-al { 0%, 100% { transform: rotate(-80deg); } 50% { transform: rotate(-48deg); } }
@keyframes joy-go-fig { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-3%); } }
@keyframes joy-stand { 0% { transform: translateY(5%) scale(1.04, .94); } 22% { transform: translateY(-5%) scale(.97, 1.04); } 38%, 100% { transform: none; } }
@keyframes joy-stand-ar { 0% { transform: rotate(100deg); } 26%, 100% { transform: rotate(62deg); } }
@keyframes joy-stand-al { 0% { transform: rotate(-100deg); } 26%, 100% { transform: rotate(-62deg); } }
/* cheer (с 23.10 — новой рукой вместо «палки»): правая машет над головой, левая поднята */
.sunny--cheer .arm--r { animation: joy-arm-wave .45s ease-in-out infinite; }
.sunny--cheer .arm--l { transform: rotate(46deg); animation: joy-arm-cheer-l .9s ease-in-out infinite; }
/* calm — эмоция 0–2: спокойное лицо, медленное дыхание */
.sunny--calm .f-open, .sunny--calm .f-rest { display: inline; }
.sunny--calm .sunny__fig { --breathe: 1.03; animation: joy-breathe 5s ease-in-out infinite; }
.sunny--calm .f-open { animation: joy-blink 6s ease-in-out infinite; }
.sunny--calm .sunny__rays g { animation: joy-spin 60s linear infinite; }
/* wave — машет: правая рука над плечом из стороны в сторону */
.sunny--wave .f-open, .sunny--wave .f-smile { display: inline; }
.sunny--wave .f-open { animation: joy-blink 5s ease-in-out infinite; }
.sunny--wave .f-cheek { opacity: .5; }
.sunny--wave .sunny__fig { --breathe: 1.03; animation: joy-breathe 3s ease-in-out infinite; }
.sunny--wave .arm--r { transform: rotate(-76deg); animation: joy-arm-wave 1s ease-in-out infinite; }
.sunny--wave .sunny__rays g { animation: joy-spin 40s linear infinite; }
/* point — показывает рукой: dir right (по умолчанию) | left (зеркально) | down | up; палец и лёгкий «тычок» */
.sunny--point .f-open, .sunny--point .f-smile { display: inline; }
.sunny--point .f-open > * { transform: translate(2.2px, 0); }
.sunny--point.sunny--dir-down .f-open > * { transform: translate(1px, 2.4px); }
.sunny--point.sunny--dir-up .f-open > * { transform: translate(1px, -2.4px); }
.sunny--point .arm--r { --pa: -6deg; transform: rotate(var(--pa)); animation: joy-point 1.4s ease-in-out infinite; }
.sunny--point.sunny--dir-down .arm--r { --pa: 74deg; }
.sunny--point.sunny--dir-up .arm--r { --pa: -78deg; }
.sunny--point .arm--r .a-finger { display: inline; }
.sunny--point .sunny__fig { --breathe: 1.02; animation: joy-breathe 4s ease-in-out infinite; }
.sunny--flip > .sunny__fig { scale: -1 1; }
/* phone — держит телефон обеими руками, смотрит в экран */
.sunny:is(.sunny--phone, .sunny--gift) .arm--r { transform: rotate(140deg); }
.sunny:is(.sunny--phone, .sunny--gift) .arm--l { transform: rotate(-140deg); }
.sunny--phone .f-open, .sunny--phone .f-smile { display: inline; }
.sunny--phone .f-open > * { transform: translateY(2.6px); }
.sunny--phone .p-phone__screen { animation: joy-screen 2.4s ease-in-out infinite; }
.sunny--phone .sunny__fig { --breathe: 1.02; animation: joy-breathe 4s ease-in-out infinite; }
/* gift — 3 кадра за 3,6 с: смотрит в телефон → из экрана вылетает сюрприз → руки вверх, прыгает. Без анимации — последний кадр */
.sunny--gift :is(.f-open, .f-smile, .f-happy, .f-big, .f-tongue) { display: inline; }
.sunny--gift .f-open > * { transform: translateY(2.4px); }
.sunny--gift :is(.f-open, .f-smile) { opacity: 0; animation: joy-f-a 3.6s ease infinite; }
.sunny--gift :is(.f-happy, .f-big, .f-tongue) { animation: joy-f-b 3.6s ease infinite; }
.sunny--gift .f-cheek { opacity: .55; }
.sunny--gift .arm--r { transform: rotate(-46deg); animation: joy-gift-ar 3.6s ease-in-out infinite; }
.sunny--gift .arm--l { transform: rotate(46deg); animation: joy-gift-al 3.6s ease-in-out infinite; }
.sunny--gift .p-phone { opacity: 0; animation: joy-gift-phone 3.6s ease infinite; }
.sunny--gift .p-phone__screen { animation: joy-gift-screen 3.6s ease infinite; }
.sunny--gift .p-gift { animation: joy-gift-fly 3.6s cubic-bezier(.3, .7, .3, 1) infinite; }
.sunny--gift .p-spark { animation: joy-gift-spark 3.6s ease infinite; }
.sunny--gift .sunny__fig { transform-origin: 50% 100%; animation: joy-gift-fig 3.6s ease-in-out infinite; }
.sunny--gift .sunny__rays g { animation: joy-spin 10s linear infinite; }
/* heart — подмигивает и отправляет сердечко вверх, повтор раз в 2,4 с */
.sunny--heart .f-open, .sunny--heart .f-smile { display: inline; }
.sunny--heart .f-eye--r .f-open { animation: joy-wink 2.4s ease-in-out infinite; }
.sunny--heart .f-eye--r .f-happy { display: inline; opacity: 0; animation: joy-wink-arc 2.4s ease-in-out infinite; }
.sunny--heart .f-cheek { animation: joy-blush 2.4s ease-in-out infinite; }
.sunny--heart .arm--r { transform: rotate(-32deg); animation: joy-heart-arm 2.4s ease-in-out infinite; }
.sunny--heart .p-heart { animation: joy-heart-up 2.4s ease-out infinite; }
.sunny--heart .sunny__fig { --breathe: 1.03; animation: joy-breathe 2.4s ease-in-out infinite; }
/* sad — эмоция 6–8 и «грустит»: брови домиком, рот вниз, взгляд вниз, лучи поникли, руки опущены */
.sunny:is(.sunny--sad, .sunny--locked, .sunny--cry) :is(.f-open, .f-brows) { display: inline; }
.sunny:is(.sunny--sad, .sunny--locked) .f-frown { display: inline; }
.sunny:is(.sunny--sad, .sunny--locked) .f-open > * { transform: translateY(1.6px); }
.sunny:is(.sunny--sad, .sunny--locked, .sunny--cry) .sunny__rays { opacity: .5; transform: scale(.93); }
.sunny:is(.sunny--sad, .sunny--locked) .sunny__fig { --breathe: 1.02; animation: joy-breathe 6s ease-in-out infinite; }
.sunny:is(.sunny--sad, .sunny--locked, .sunny--cry) .f-cheek { opacity: .18; }
.sunny--sad .arm--r { transform: rotate(80deg); } .sunny--sad .arm--l { transform: rotate(-80deg); }
/* locked — грустит за замком (сессия закрыта): обнимает замок, одна слеза */
.sunny--locked .arm--r { transform: rotate(124deg); } .sunny--locked .arm--l { transform: rotate(-124deg); }
.sunny--locked .f-tears { display: inline; }
.sunny--locked .f-tear--r { display: none; }
.sunny--locked .f-tear--l { animation: joy-tear 3.2s ease-in infinite; }
/* cry — эмоция 9–10: плачет, над головой тучка с каплями, мелко дрожит («загруженное») */
.sunny--cry :is(.f-wail, .f-tears) { display: inline; }
.sunny--cry .f-tear { animation: joy-tear 1.3s ease-in infinite; }
.sunny--cry .sunny__fig { animation: joy-shiver .7s ease-in-out infinite; }
.sunny--cry .p-cloud { animation: joy-bob 3s ease-in-out infinite; }
.sunny--cry .p-drop { animation: joy-drip 1s ease-in infinite; }
/* run — бежит: наклон вперёд, ноги и руки в такт, линии скорости сзади (dir: 'left' — зеркально) */
.sunny--run .f-open, .sunny--run .f-smile { display: inline; }
.sunny--run .f-open > * { transform: translateX(2px); }
.sunny--run .sunny__fig { transform-origin: 50% 100%; transform: rotate(7deg); animation: joy-run-fig .5s linear infinite; }
.sunny--run .leg--l { animation: joy-run-l .5s ease-in-out infinite; }
.sunny--run .leg--r { animation: joy-run-r .5s ease-in-out infinite; }
.sunny--run .arm--r { transform: rotate(60deg); animation: joy-run-ar .5s ease-in-out infinite; }
.sunny--run .arm--l { transform: rotate(-60deg); animation: joy-run-al .5s ease-in-out infinite; }
.sunny--run .p-speed path { animation: joy-speed .5s linear infinite; }
.sunny--run .sunny__rays g { animation: joy-spin 4s linear infinite; }
/* sit — сидит на пуфе и говорит: рот открывается, рука жестикулирует, ноги болтаются, над головой «…» */
.sunny--sit .f-open, .sunny--sit .f-talk { display: inline; }
.sunny--sit .f-open { animation: joy-blink 4s ease-in-out infinite; }
.sunny--sit .f-talk { animation: joy-talk .42s ease-in-out infinite; }
.sunny--sit .g-seat { display: inline; }
.sunny--sit .leg--l { animation: joy-swing-l 2.4s ease-in-out infinite; }
.sunny--sit .leg--r { animation: joy-swing-r 2.4s ease-in-out infinite; }
.sunny--sit .arm--r { transform: rotate(18deg); animation: joy-talk-arm 1.6s ease-in-out infinite; }
.sunny--sit .arm--l { transform: rotate(-70deg); }
.sunny--sit .p-talk__d { animation: joy-dot 1.5s ease-in-out infinite; }
.sunny--sit .sunny__rays { opacity: .7; }
/* stand — встаёт: распрямляется и тянется вверх, руки опускаются */
.sunny--stand .f-open, .sunny--stand .f-hm { display: inline; }
.sunny--stand .sunny__fig { transform-origin: 50% 100%; animation: joy-stand 2.8s cubic-bezier(.3, .7, .3, 1) infinite; }
.sunny--stand .arm--r { animation: joy-stand-ar 2.8s ease-out infinite; }
.sunny--stand .arm--l { animation: joy-stand-al 2.8s ease-out infinite; }
/* go — идёт: шаг спокойнее бега, улыбается */
.sunny--go .f-open, .sunny--go .f-smile { display: inline; }
.sunny--go .f-open > * { transform: translateX(1.6px); }
.sunny--go .f-cheek { opacity: .5; }
.sunny--go .sunny__fig { animation: joy-go-fig .9s ease-in-out infinite; }
.sunny--go .leg--l { animation: joy-go-l .9s ease-in-out infinite; }
.sunny--go .leg--r { animation: joy-go-r .9s ease-in-out infinite; }
.sunny--go .arm--r { transform: rotate(62deg); animation: joy-go-ar .9s ease-in-out infinite; }
.sunny--go .arm--l { transform: rotate(-62deg); animation: joy-go-al .9s ease-in-out infinite; }
.sunny--go .sunny__rays g { animation: joy-spin 14s linear infinite; }
/* ───────── С3. эмоция по шкале: h.scale({mood: true}) ───────── */
.scale__mood { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: var(--s-2); }
.scale__mood-cap { font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-semibold); color: var(--mood-c, var(--ink-2)); transition: color .3s ease; }
.scale--m-calm { --mood-c: var(--mood-calm); }
.scale--m-think { --mood-c: var(--mood-think); }
.scale--m-sad { --mood-c: var(--mood-sad); }
.scale--m-cry { --mood-c: var(--mood-cry); }
.scale--mood .sunny--mood .sunny__body { transition: filter .3s ease; }
.scale--m-cry .sunny--mood .sunny__body { filter: saturate(.8); }
/* mood: 'follow' — солнышко едет над бегунком */
.scale--mood-follow .scale__mood { position: relative; display: block; height: calc(var(--sunny-mood-h, 56px) + 6px); margin-bottom: 0; }
.scale--mood-follow .scale__mood .sunny { position: absolute; bottom: 0; left: calc(22px + (100% - 44px) * var(--v) / 10); margin-left: calc(var(--sunny-size) / -2); transition: left .12s ease; }
.scale--mood-follow .scale__mood-cap { display: none; }
/* ───────── сценка h.sunnyScene('talk-act'): сидит и говорит → встаёт → идёт ───────── */
@keyframes joy-ss-1 { 0%, 30% { opacity: 1; } 34%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes joy-ss-2 { 0%, 31% { opacity: 0; } 35%, 63% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes joy-ss-3 { 0%, 64% { opacity: 0; transform: translateX(-34%); } 68% { opacity: 1; transform: translateX(-34%); } 93% { opacity: 1; transform: translateX(44%); } 97%, 100% { opacity: 0; transform: translateX(50%); } }
@keyframes joy-ssc-1 { 0%, 30% { opacity: 1; } 34%, 97% { opacity: .42; } 100% { opacity: 1; } }
@keyframes joy-ssc-2 { 0%, 31% { opacity: .42; } 35%, 63% { opacity: 1; } 67%, 100% { opacity: .42; } }
@keyframes joy-ssc-3 { 0%, 64% { opacity: .42; } 68%, 95% { opacity: 1; } 99%, 100% { opacity: .42; } }
@keyframes joy-ss-glow { 0%, 64% { opacity: 0; } 76%, 92% { opacity: 1; } 100% { opacity: 0; } }
.sunny-scene { margin: 0; }
.sunny-scene__stage { position: relative; height: calc(var(--ss-size) * 1.42); overflow: hidden; }
.sunny-scene__stage::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 4px; height: 6px; border-radius: 50%; background: currentColor; opacity: .08; }
.sunny-scene__glow { position: absolute; left: 50%; bottom: -20%; width: 120%; height: 130%; transform: translateX(-50%); border-radius: 50%;
background: radial-gradient(closest-side, rgba(255,209,92,.55), rgba(255,209,92,0)); opacity: 0; animation: joy-ss-glow 9s ease-in-out infinite; }
.sunny-scene__frame { position: absolute; left: 50%; bottom: 6px; z-index: 1; width: var(--ss-size); margin-left: calc(var(--ss-size) / -2); opacity: 0; }
.sunny-scene__frame--1 { animation: joy-ss-1 9s ease-in-out infinite; }
.sunny-scene__frame--1 .sunny { filter: saturate(.6); }
.sunny-scene__frame--2 { animation: joy-ss-2 9s ease-in-out infinite; }
.sunny-scene__frame--3 { animation: joy-ss-3 9s linear infinite; }
.sunny-scene__caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.sunny-scene__cap { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: var(--fs-2); line-height: var(--lh-2); opacity: .42; }
.sunny-scene__cap b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-1); line-height: 1;
background: linear-gradient(135deg, var(--fill-a), var(--fill-b)); color: var(--on-fill); }
.sunny-scene__cap--1 { animation: joy-ssc-1 9s ease-in-out infinite; }
.sunny-scene__cap--2 { animation: joy-ssc-2 9s ease-in-out infinite; }
.sunny-scene__cap--3 { animation: joy-ssc-3 9s ease-in-out infinite; }
/* strip: true — три кадра рядом, как комикс (и всегда при prefers-reduced-motion) */
.sunny-scene--strip .sunny-scene__stage { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; height: auto; padding-top: 26px; }
.sunny-scene--strip .sunny-scene__frame { position: static; margin: 0 auto; opacity: 1; animation: none; transform: none; }
.sunny-scene--strip .sunny-scene__cap { opacity: 1; animation: none; }
.sunny-scene--strip .sunny-scene__glow { display: none; }
/* ───────── «было → стало»: h.beforeAfter({before, after}) ───────── */
@keyframes joy-ba-flow { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } }
.ba { margin: 0; }
.ba__row { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: var(--s-1); }
.ba__side { display: flex; flex-direction: column; align-items: center; }
.ba__k { margin-top: 4px; font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold); letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--ink-2); }
.ba__v { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 32px; }
.ba__side--was .ba__v { color: var(--ba-was); }
.ba__side--now .ba__v { color: var(--ba-now); }
.ba__arc { display: block; width: 100%; height: auto; overflow: visible; margin-bottom: 18px; }
.ba__track { fill: none; stroke-width: 10; stroke-linecap: round; opacity: .85; }
.ba__tick { stroke: var(--ink-3); stroke-width: 1.4; stroke-linecap: round; opacity: .5; }
.ba__path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 4 5; animation: joy-ba-flow 1.4s linear infinite; }
.ba__head { fill: var(--ink); }
.ba__dot--was { fill: var(--surface); stroke: var(--ba-was); stroke-width: 3.5; }
.ba__dot--now { fill: var(--ba-now); stroke: var(--surface); stroke-width: 3; }
.ba__end { font-family: var(--font); font-size: 8px; fill: var(--ink-3); }
.ba__delta { font-family: var(--font-display); font-size: 18px; fill: var(--ba-now); }
.ba__cap { margin-top: var(--s-3); text-align: center; font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
/* ───────── карточка СМИ «как скрин статьи»: h.mediaCard ───────── */
.media-card, .person-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--r-1); background: var(--surface);
box-shadow: var(--sh-1); border: 1px solid var(--card-border); color: var(--ink); }
.media-card__chrome { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; background: var(--media-chrome); border-bottom: 1px solid var(--line); }
.media-card__chrome i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #FF6159; }
.media-card__chrome i:nth-child(2) { background: #FFBD2E; }
.media-card__chrome i:nth-child(3) { background: #28C840; }
.media-card__url { flex: 1; min-width: 0; height: 18px; margin-left: 8px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface);
font-size: 11px; line-height: 18px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-card__shot { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--media-shot); }
.media-card__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.media-card__ph { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 9px; padding: 14px 16px; }
.media-card__ph-outlet { align-self: flex-start; margin-bottom: 4px; padding: 4px 10px; border-radius: 6px; background: var(--media-outlet); color: var(--media-outlet-ink);
font-family: var(--font-display); font-size: 13px; line-height: 18px; letter-spacing: .08em; text-transform: uppercase; }
.media-card__ph i { height: 9px; border-radius: 5px; background: var(--media-shot-ink); opacity: .22; }
.media-card__ph i.is-short { width: 60%; }
.media-card__ph-tag { position: absolute; right: 12px; bottom: 10px; font: 600 11px/14px ui-monospace, Menlo, monospace; color: var(--media-shot-ink); }
.media-card__body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.media-card__outlet { font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-bold); letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--accent-ink); }
.media-card__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-4); line-height: var(--lh-4); color: var(--ink);
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.media-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: auto; padding-top: var(--s-2); }
.media-card__date { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-3); }
.btn.media-card__btn { min-height: 40px; padding: 0 16px; font-size: var(--fs-2); }
.media-card__nolink { font: 600 11px/14px ui-monospace, Menlo, monospace; color: var(--ink-3); }
/* ───────── карточка персоны: h.personCard ───────── */
.person-card--peach { --pc-bg: var(--card-peach); --pc-ic: var(--card-peach-ic); --pc-ic-on: var(--card-peach-ic-on); }
.person-card--lavender { --pc-bg: var(--card-lavender); --pc-ic: var(--card-lavender-ic); --pc-ic-on: var(--card-lavender-ic-on); }
.person-card--mint { --pc-bg: var(--card-mint); --pc-ic: var(--card-mint-ic); --pc-ic-on: var(--card-mint-ic-on); }
.person-card--sun { --pc-bg: var(--card-sun); --pc-ic: var(--card-sun-ic); --pc-ic-on: var(--card-sun-ic-on); }
.person-card--sky { --pc-bg: var(--card-sky); --pc-ic: var(--card-sky-ic); --pc-ic-on: var(--card-sky-ic-on); }
.person-card__photo { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: var(--pc-bg, var(--media-shot)); }
.person-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person-card__ini { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: var(--pc-ic); color: var(--pc-ic-on);
font-family: var(--font-display); font-size: 34px; letter-spacing: .04em; box-shadow: 0 0 0 6px rgba(255,255,255,.45); }
.person-card__ph-tag { position: absolute; right: 10px; bottom: 8px; font: 600 11px/14px ui-monospace, Menlo, monospace; color: var(--ink-3); }
.person-card__body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.person-card__name { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-4); line-height: var(--lh-4); }
.person-card__role { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
.person-card__src { display: flex; align-items: flex-start; gap: 6px; margin-top: 2px; font-size: var(--fs-1); line-height: var(--lh-1); color: var(--ink-3); }
.person-card__src .ic { margin-top: 1px; }
.person-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: auto; padding-top: var(--s-2); }
.person-card__foot .btn--ghost { margin-left: -12px; }
.person-card__more { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font-size: var(--fs-2); line-height: var(--lh-2); font-weight: var(--fw-semibold); color: var(--accent-ink); }
.person-card--link { cursor: pointer; transition: transform .3s cubic-bezier(.2, .8, .3, 1.3); }
.person-card--link:active { transform: scale(.98); transition-duration: .1s; }
/* ───────── меньше движения (23.10): жесты — конечный кадр, сценка — комикс в ряд, декор стоит ───────── */
@media (prefers-reduced-motion: reduce) {
.cloud, .floaters i, .scene--shimmer .scene__art *, .ld-hero--shimmer .sunny__glow, .ba__path, .sunny-scene *, .sunny-scene__glow { animation: none !important; }
.floaters i { opacity: .5; }
.feednav__panel, .feednav__mini, .feednav__chip, .navhint .ic, .scale--mood-follow .scale__mood .sunny { transition: none; }
.sunny .f-tear { opacity: 1; }
.sunny-scene .sunny-scene__stage { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; height: auto; padding-top: 26px; }
.sunny-scene .sunny-scene__frame { position: static; margin: 0 auto; opacity: 1; transform: none; }
.sunny-scene .sunny-scene__cap { opacity: 1; }
.sunny-scene .sunny-scene__glow { display: none; }
}
/* fix 23.10: .clouds{inset:0} перебивал .ld-hero__clouds — облака в шапке только сверху, не под текстом */
.ld-hero .ld-hero__clouds.clouds, .ld-hero__clouds.clouds { inset: 0 0 46% 0; }
.scene .scene__clouds.clouds { inset: 0 0 46% 0; }
/* QA 23.10: контраст номеров секций ≥ 4,5:1 (светлая тема) и тач-цели ≥ 44 px */
:root:not([data-theme="dark"]) .ld-eyebrow__mark { background: color-mix(in srgb, var(--acc, var(--accent)) 78%, #000); }
.btn { min-height: max(var(--btn-h, 44px), 44px); }
.ms-src, .ld-src, a.src-link { position: relative; }
.ms-src::after, .ld-src::after, a.src-link::after { content: ""; position: absolute; inset: -14px -4px; }
/* QA 23.10 (2): тач-цели 44 px у мелких кнопок и чипов */
.btn.btn--secondary, .btn.btn--primary, .pick__opt, .pl-chip, .pl-hint { min-height: 44px; }
/* ═════════ Финал 23.10: руки, луна, один лик на шкале, чистый режим (qa/КРИТИКА_v3.md, Топ-1, 2, 3, 5) ═════════ */
/* руки: толще луча в 2–2,5 раза, тёплый коралл с обводкой в цвет лица, ладошка-варежка за контуром лучей */
.sunny { --sunny-arm: #D9532E; --sunny-arm-line: #FFC75E; --sunny-palm: #EA6A3E; --sunny-palm-line: #FFC75E; }
.sunny .arm--l { transform-origin: 25px 74px; }
.sunny .arm--r { transform-origin: 95px 74px; }
.sunny .a-out { fill: none; stroke: var(--sunny-arm-line); stroke-width: 13.5; stroke-linecap: round; }
.sunny .a-limb { stroke: var(--sunny-arm); stroke-width: 9.5; }
.sunny :is(.a-palm, .a-thumb, .a-fing circle) { fill: var(--sunny-palm); stroke: var(--sunny-arm-line); stroke-width: 2.4; }
.sunny :is(.a-finger, .a-finger-o) { display: none; fill: none; stroke-linecap: round; }
.sunny .a-finger-o { stroke: var(--sunny-arm-line); stroke-width: 10.5; }
.sunny .a-finger { stroke: var(--sunny-palm); stroke-width: 6; }
.sunny--point .arm--r :is(.a-finger, .a-finger-o) { display: inline; }
.sunny--point .arm--r .a-fing, .sunny:is(.sunny--phone, .sunny--run, .sunny--locked) .a-fing { display: none; }
.sunny .g-limb { stroke-width: 8; }
.sunny .g-foot { stroke: var(--sunny-arm-line); stroke-width: 2.2; }
/* машет у плеча, а не над лучами: ладонь за контуром лучей большую часть взмаха */
@keyframes joy-arm-wave-2 { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(-62deg); } }
.sunny--wave .arm--r { transform: rotate(-40deg); animation: joy-arm-wave-2 1s ease-in-out infinite; }
.sunny--cheer .arm--r { animation-name: joy-arm-wave-2; }
.sunny--heart .arm--r { transform: rotate(-24deg); }
/* луна в тёмной теме: тёплая, кремово-жёлтая, с мягким свечением (не серая); руки светлые, контраст к фону ≥ 3:1 */
:is(.sunny--moon, [data-theme="dark"] .sunny--auto) { --sunny-ink: #6B4716; --sunny-cheek: #FF9A7A; --sunny-glow: rgba(255,214,140,.5); --sunny-limb: #FFD9A8; --sunny-ray-2: #E8B060;
--sunny-arm: #FFB98A; --sunny-arm-line: #E0935A; --sunny-palm: #FFCBA0; --sunny-palm-line: #E0935A; }
:is(.sunny--moon, [data-theme="dark"] .sunny--auto) .sunny__body {
background: radial-gradient(circle at 38% 32%, #FFF6D6 0, #FFE49A 52%, #F2C268 100%); box-shadow: 0 0 calc(var(--sunny-size) * .24) rgba(255,214,140,.55); }
:is(.sunny--moon, [data-theme="dark"] .sunny--auto) .f-crater { fill: #DDA556; opacity: .34; }
/* бегунок обычной шкалы в тёмной теме — та же тёплая луна */
[data-theme="dark"] { --thumb-sun: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2238%25%22%20cy%3D%2232%25%22%20r%3D%2280%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FFF9E4%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23F5CF80%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%2222%22%20fill%3D%22%233A3480%22/%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%2217%22%20fill%3D%22url%28%23g%29%22/%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%236B4716%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M13.8%2021.3q2%201.7%204%200M26.2%2021.3q2%201.7%204%200%22/%3E%3Cpath%20d%3D%22M19.6%2026.2q2.4%201.7%204.8%200%22/%3E%3C/g%3E%3C/svg%3E"); }
/* шкала с эмоцией: лицо одно — у большого солнышка; бегунок без лица, с цифрой значения */
.scale__track { position: relative; }
.scale--mood { --knob-a: #FFE39A; --knob-b: #FFBE55; --knob-c: #FF8F3F; --knob-ring: #FFFFFF; --knob-ink: #8C3B12; }
[data-theme="dark"] .scale--mood { --knob-a: #FFF9E4; --knob-b: #FFEBB4; --knob-c: #F5CF80; --knob-ring: #3A3480; --knob-ink: #6B4716; }
.scale--mood input::-webkit-slider-thumb { box-sizing: border-box; border: 5px solid var(--knob-ring);
background: radial-gradient(circle at 38% 32%, var(--knob-a) 0, var(--knob-b) 55%, var(--knob-c) 100%); }
.scale--mood input::-moz-range-thumb { box-sizing: border-box; border: 5px solid var(--knob-ring);
background: radial-gradient(circle at 38% 32%, var(--knob-a) 0, var(--knob-b) 55%, var(--knob-c) 100%); }
.scale__knob { position: absolute; top: 50%; left: calc(22px + (100% - 44px) * var(--v) / var(--n, 10)); width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
display: grid; place-items: center; pointer-events: none; counter-reset: knob var(--v); font: 700 15px/1 var(--font); color: var(--knob-ink); }
.scale__knob::after { content: counter(knob); }
/* чистый режим (по умолчанию): служебные метки скрыты ядром (cleanStubs в app.js); ?stubs=1 или клавиша S — показать заглушки */
html:not(.is-stubs) :is(.media-card__ph-tag, .person-card__ph-tag, .media-card__nolink) { display: none; }
[data-stub-hidden] { display: none !important; }
/* мокап фото без метки: мягкая «фотография» — солнце и холмы вместо пустой плашки */
html:not(.is-stubs) .ld-gallery__tile--ph { background:
radial-gradient(circle at 74% 30%, rgba(255,214,120,.85) 0 9%, transparent 10%),
radial-gradient(120% 60% at 20% 108%, rgba(255,255,255,.34) 0 60%, transparent 61%),
radial-gradient(110% 55% at 86% 112%, rgba(255,255,255,.22) 0 60%, transparent 61%),
linear-gradient(180deg, var(--sky-1, #6C5CE7), var(--sky-3, #F29B7B)); color: #FFFFFF; }
html:not(.is-stubs) .ld-gallery__tile--ph > .ic { opacity: .0; }
/* луна в шапке-сцене h.scene (тёмная тема): та же тёплая луна, что и Джой; лицо — тёплый коричневый */
.scene__art #moonFill stop:first-child { stop-color: #FFF6D6; }
.scene__art #moonFill stop:last-child { stop-color: #F2C268; }
.scene__art .moon > g:nth-of-type(1) { fill: #DDA556; opacity: .4; }
.scene__art .moon > g:nth-of-type(2) { stroke: #6B4716; }
[data-theme="dark"] .scene__art .moon > circle:first-child { filter: drop-shadow(0 0 14px rgba(255,214,140,.55)); }