/* «Увидишь первые результаты уже через 3 месяца» и история двух друзей — на странице курса (web.html) шесть экранов подряд.
   #first — рама: «2–3 часа в день и два выходных → 3 месяца»: слева текст и строка «что остаётся с тобой», справа графитовая плитка
            с большой «3» и календарём 13 недель в духе графика коммитов (будни — лайм, выходные — пустые клетки, в конце — первые заказы).
   Дальше — повествование прокруткой (владелец 22.09: «было так → Денис позвал Диму, и Дима учился не месяц, а год → мораль этой басни»),
   у каждого экрана своя композиция:
   #first-denis     — «было так»: Денис полароидом слева, справа крупным столбиком — кредиты, ипотека, жена, дети, «и это всё надо тащить»;
   #first-denis-run — «потом»: график дохода на весь кадр, заголовок — в его пустом левом верхе, пунктир — доход до курса;
   #first-invite    — связка «Денис [фото] позвал [фото] Диму» во весь кадр, по центру;
   #first-dmitry    — «Дима учился не месяц, а год»: сверху заголовок и доход, снизу год полосой — месяц Дениса против года Димы;
   #first-moral     — мораль плакатом и ссылки на истории целиком.
   Главы связывает нить слева (.wf-rail, ≥1024), швов между главами нет. Прокрутка: js/web-first.js ставит главе .wf-live, сценам
   [data-wf-p] — --p (0…1), главе — --rp (заливка нити); здесь из них считаются только transform / opacity / clip-path / background-size —
   раскладка не двигается. Без .wf-live (нет JS, reduced-motion) — сразу итог. Факты: stories/denis.html, stories/dmitry.html, js/stories.js,
   js/story-details.js, владелец 22.09. Классы wf-*: общие .first__* с главной не трогаем. Liquid Bento: графит + бумага (полароид), лайм — акцент. */

/* ---------- Экран 1: темп ---------- */
.wf-pace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.wf-pace__copy { display: grid; align-content: center; gap: 20px; min-width: 0; }
.wf-pace__copy .h2 { text-wrap: balance; }
.wf-pace__how { margin: 0; max-width: 34em; font-size: 18px; line-height: 28px; color: var(--muted-2); text-wrap: pretty; }
.wf-pace__how b { font-weight: 600; color: #fff; }

/* что остаётся с тобой — одной строкой-фактами: подпись сверху, срок крупно */
.wf-keep { margin: 12px 0 0; padding: 20px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 14px 40px; border-top: 1px solid rgba(255, 255, 255, .1); }
.wf-keep__item { display: grid; gap: 2px; min-width: 0; }
.wf-keep__item span { font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .56); white-space: nowrap; }
.wf-keep__item b { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.wf-keep__item:not(:last-child) b { color: var(--lime); }

/* графитовая плитка: «3 месяца» и календарь недель */
.wf-cal { position: relative; isolation: isolate; margin: 0; min-width: 0; display: grid; gap: 28px; padding: 36px; border-radius: 28px; overflow: hidden; color: #fff; border: 1px solid rgba(255, 255, 255, .08); background: radial-gradient(70% 60% at 0% 0%, rgba(199, 255, 46, .16), rgba(199, 255, 46, 0) 64%), radial-gradient(50% 40% at 100% 100%, rgba(184, 163, 255, .08), rgba(184, 163, 255, 0) 70%), linear-gradient(165deg, #18191D 0%, #121316 100%); box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05); }
.wf-cal__num { margin: 0; display: flex; align-items: flex-end; gap: 16px; }
.wf-cal__num b { font-size: clamp(120px, calc(11vw / var(--z, 1)), 200px); line-height: .8; font-weight: 700; letter-spacing: -.06em; color: var(--lime); text-shadow: 0 0 48px rgba(199, 255, 46, .3); }
.wf-cal__num span { display: block; padding-bottom: 4px; font-size: clamp(26px, calc(2.2vw / var(--z, 1)), 36px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.wf-cal__num small { display: block; margin-top: 6px; font-size: 16px; line-height: 22px; font-weight: 400; letter-spacing: 0; color: var(--muted-2); }

/* доска: колонка дней + 13 недель; неделя — столбик из 7 клеток. Подписи дней тянутся по высоте столбика недели — строки совпадают */
.wf-cal__board { --g: 6px; position: relative; display: grid; grid-template-columns: auto repeat(13, minmax(0, 1fr)); column-gap: var(--g); row-gap: 10px; }
.wf-cal__months { grid-column: 2 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wf-cal__months i { font-style: normal; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, .46); border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 8px; white-space: nowrap; }
.wf-cal__days { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); row-gap: var(--g); padding-right: 6px; }
.wf-cal__days i { display: flex; align-items: center; font-style: normal; font-size: 12px; line-height: 1; color: rgba(255, 255, 255, .56); }
.wf-cal__days i:nth-child(n+6) { color: rgba(255, 255, 255, .34); }
.wf-cal__grid { display: contents; }
.wf-cal__grid > span { grid-row: 2; display: grid; grid-template-rows: repeat(7, auto); row-gap: var(--g); }
.wf-cal__grid i { display: block; aspect-ratio: 1; border-radius: 22%; background: rgba(199, 255, 46, .78); }
/* последняя неделя — финиш: ярче и со свечением, флажок «первые заказы» под ней */
.wf-cal__grid > span:last-child i:nth-child(-n+5) { background: var(--lime); box-shadow: 0 0 18px -2px rgba(199, 255, 46, .75); }
.wf-cal__grid i:nth-child(n+6) { background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
/* неделя за неделей — клетки «заливаются» при появлении; только opacity/transform, раскладка не двигается */
[data-reveal] .wf-cal__grid i { opacity: .12; transform: scale(.7); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: calc(var(--w) * 70ms + .2s); }
[data-reveal].is-visible .wf-cal__grid i { opacity: 1; transform: none; }
[data-reveal] .wf-cal__grid i:nth-child(n+6) { opacity: 1; transform: none; transition: none; }
/* флажок под последней неделей: здесь первые заказы */
.wf-cal__flag { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 5px; border-radius: 999px; background: linear-gradient(135deg, var(--lime-3), var(--lime-2)); color: var(--ink); font-size: 12px; line-height: 14px; font-weight: 700; white-space: nowrap; box-shadow: 0 0 18px rgba(199, 255, 46, .35); }
.wf-cal__flag i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: 12px; line-height: 1; font-style: normal; font-weight: 700; }
.wf-cal__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: -10px; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .6); }
.wf-cal__key::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 3px; vertical-align: -1px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.wf-cal__key--on::before { background: var(--lime); box-shadow: none; }

/* ---------- История двух друзей: общее ---------- */
.wf-ch { position: relative; }
/* главы — одна история: шва и свечения на стыке нет, их связывает нить */
.wf-ch + .wf-ch { --seam: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); --seam-glow: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); }
.wf-lead { margin: 0; font-size: 18px; line-height: 26px; color: var(--muted-2); text-wrap: pretty; }

/* нить: от узла главы 1 до узла морали; заливка идёт за серединой окна (--rp), узел загорается, когда заливка до него дошла */
.wf-rail { display: none; }
@media (min-width: 1280px) {
  .wf-live > .wf-rail { display: block; position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--wf-rail-x, 24px); width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .08); pointer-events: none; }
  .wf-live > .wf-rail::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(var(--lime-2), var(--lime)); box-shadow: 0 0 14px rgba(199, 255, 46, .45); transform-origin: 50% 0; transform: scaleY(var(--rp, 0)); }
  .wf-rail i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .26); background: var(--canvas); transition: background .3s, border-color .3s, box-shadow .3s; }
  .wf-ch.is-lit > .wf-rail i { border-color: var(--lime); background: var(--lime); box-shadow: 0 0 0 6px rgba(199, 255, 46, .16); }
  .wf-ch--was > .wf-rail { top: 50%; }
  .wf-ch--was > .wf-rail i { top: 0; }
  .wf-ch--moral > .wf-rail { bottom: 50%; }
  .wf-ch--moral > .wf-rail i { top: 100%; width: 20px; height: 20px; margin: -10px 0 0 -10px; }
}

/* ---------- Глава 1, «было так»: полароид + столбик слов ---------- */
.wf-was { display: grid; gap: 36px; }
.wf-snap { position: relative; margin: 0; justify-self: start; width: min(100%, 240px); padding: 10px 10px 0; border-radius: 14px; color: var(--ink); background: var(--paper); box-shadow: 0 36px 64px -30px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .6); transform: rotate(-3deg); }
.wf-snap img { display: block; width: 100%; height: auto; aspect-ratio: 384 / 432; object-fit: cover; border-radius: 8px; background: #DAD4C8; }
.wf-snap figcaption { display: grid; padding: 12px 6px 16px; }
.wf-snap b { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.012em; }
.wf-snap span { font-size: 14px; line-height: 20px; color: rgba(23, 24, 28, .58); }
.wf-was__copy { container-type: inline-size; display: grid; align-content: center; gap: 22px; min-width: 0; }
.wf-was__title { margin: 0; font-size: clamp(34px, min(8.1cqi, calc(10.4vh / var(--z, 1))), 150px); line-height: 1.04; font-weight: 700; letter-spacing: -.038em; color: #fff; }
.wf-was__title > span { display: block; }
.wf-was__title small { font-size: .46em; line-height: 1; font-weight: 600; letter-spacing: -.02em; color: rgba(255, 255, 255, .46); white-space: nowrap; }
.wf-was__punch { color: var(--lime); }
.wf-was__note { margin: 0; max-width: 40em; font-size: 18px; line-height: 28px; color: var(--muted-2); text-wrap: pretty; }

/* ---------- Глава 1, «потом»: график дохода на весь кадр ---------- */
.wf-run { margin: 0; display: grid; gap: 28px; }
.wf-run__head { display: grid; gap: 14px; align-content: start; min-width: 0; }
.wf-run__title { margin: 0; font-size: clamp(34px, min(calc(4.1vw / var(--z, 1)), calc(7.6vh / var(--z, 1))), 108px); line-height: 1.04; font-weight: 700; letter-spacing: -.036em; color: #fff; text-wrap: balance; }
.wf-run__title em { font-style: normal; color: var(--lime); white-space: nowrap; }
.wf-run__sub { margin: 0; max-width: 30em; font-size: 18px; line-height: 28px; color: var(--muted-2); text-wrap: pretty; }
.wf-run__sub b { font-weight: 600; color: #fff; }
/* --plot — высота поля столбцов (с местом под подпись над столбцом, --val-h); столбец = --v × (--plot − --val-h) */
.wf-bars { --plot: 240px; --val-h: 36px; position: relative; min-width: 0; }
.wf-bars__list { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(8px, calc(2.2vw / var(--z, 1)), 44px); }
.wf-bar { display: grid; grid-template-rows: var(--plot) auto auto; justify-items: center; align-content: start; min-width: 0; text-align: center; }
.wf-bar__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; height: var(--plot); border-bottom: 1px solid rgba(255, 255, 255, .18); }
.wf-bar__col b { display: block; flex: none; height: var(--val-h); font-size: clamp(16px, calc(2vw / var(--z, 1)), 36px); line-height: var(--val-h); font-weight: 700; letter-spacing: -.03em; color: rgba(255, 255, 255, .88); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wf-bar__col i { display: block; flex: none; width: min(100%, 200px); height: calc(var(--v) * (var(--plot) - var(--val-h))); border-radius: 14px 14px 3px 3px; background: linear-gradient(180deg, #43464E 0%, #2A2C32 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); transform-origin: 50% 100%; }
.wf-bar--now .wf-bar__col b { font-size: clamp(22px, calc(3.4vw / var(--z, 1)), 64px); color: var(--lime); text-shadow: 0 0 40px rgba(199, 255, 46, .35); }
.wf-bar--now .wf-bar__col i { background: linear-gradient(180deg, var(--lime-2) 0%, var(--lime) 100%); box-shadow: 0 0 70px -12px rgba(199, 255, 46, .6), inset 0 1px 0 rgba(255, 255, 255, .5); }
.wf-bar__when { margin-top: 12px; font-size: 16px; line-height: 22px; font-weight: 600; color: #fff; }
.wf-bar__note { font-size: 14px; line-height: 20px; color: var(--muted-2); text-wrap: balance; }
.wf-bar--now .wf-bar__when { color: var(--lime); }
/* пунктир «до курса»: на высоте 150 000 из 350 000 — столбец «спустя полгода» упирается ровно в него */
.wf-bars__was { position: absolute; z-index: 0; left: 0; right: 0; top: calc(var(--plot) - .4286 * (var(--plot) - var(--val-h))); margin: 0; height: 0; border-top: 2px dashed rgba(255, 255, 255, .34); pointer-events: none; }
.wf-bars__was span { position: absolute; left: 0; bottom: 8px; font-size: 14px; line-height: 18px; font-weight: 600; color: rgba(255, 255, 255, .62); white-space: nowrap; }

/* ---------- Связка «Денис позвал Диму»: фраза во весь кадр, фото в строке ---------- */
.wf-invite { container-type: inline-size; display: grid; justify-items: center; gap: clamp(24px, calc(3.4vh / var(--z, 1)), 44px); text-align: center; }
.wf-invite__title { margin: 0; font-size: clamp(44px, min(12.4cqi, calc(15.5vh / var(--z, 1))), 236px); line-height: 1.02; font-weight: 700; letter-spacing: -.048em; color: #fff; }
.wf-invite__line { display: block; }
.wf-invite__verb { color: var(--lime); }
/* кружок в строке — не больше 120 px (аватар 96 × 96 не расплывается) */
.wf-invite__ph { display: inline-block; width: min(.7em, 116px); height: min(.7em, 116px); margin: 0 .04em; vertical-align: -.02em; object-fit: cover; border-radius: 50%; border: .035em solid var(--paper-1); background: #1F1F21; box-shadow: 0 .14em .36em -.1em rgba(0, 0, 0, .9); }
.wf-invite__text { margin: 0; max-width: 34em; font-size: clamp(18px, min(calc(1.35vw / var(--z, 1)), calc(2.2vh / var(--z, 1))), 30px); line-height: 1.45; color: var(--muted-2); text-wrap: balance; }

/* ---------- Глава 2: «Дима учился не месяц, а год» + год полосой ---------- */
.wf-year { display: grid; gap: 28px; }
.wf-year__head { display: grid; gap: 18px; min-width: 0; }
.wf-who { margin: 0; display: flex; align-items: center; gap: 14px; }
.wf-who__ava { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .26); background: #1F1F21; }
.wf-who > span { display: grid; min-width: 0; }
.wf-who b { font-size: 18px; line-height: 24px; font-weight: 600; color: #fff; }
.wf-who b + span { font-size: 15px; line-height: 20px; color: var(--muted-2); }
.wf-year__title { margin: 0; font-size: clamp(38px, min(calc(5.4vw / var(--z, 1)), calc(8.6vh / var(--z, 1))), 140px); line-height: 1.02; font-weight: 700; letter-spacing: -.04em; color: #fff; text-wrap: balance; }
.wf-year__title s { position: relative; text-decoration: none; color: rgba(255, 255, 255, .42); }
.wf-year__title s::after { content: ""; position: absolute; left: -.05em; right: -.07em; top: 54%; height: .075em; border-radius: 1em; background: var(--coral); transform: rotate(-3deg); }
.wf-year__title em { font-style: normal; color: var(--lime); }
.wf-year__text { margin: 0; max-width: 36em; font-size: 18px; line-height: 28px; color: var(--muted-2); text-wrap: pretty; }
.wf-year__money { margin: 0; display: grid; gap: 2px; }
.wf-year__was { font-size: 18px; line-height: 26px; color: rgba(255, 255, 255, .56); white-space: nowrap; }
.wf-year__money b { display: block; font-size: clamp(36px, min(calc(3.9vw / var(--z, 1)), calc(7vh / var(--z, 1))), 100px); line-height: 1.06; font-weight: 700; letter-spacing: -.035em; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* полоса года: слева кто, справа 12 месяцев; у Дениса залит один, у Димы — все двенадцать по фазам (--c — цвет фазы) */
.wf-track { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; row-gap: 12px; align-items: center; min-width: 0; }
.wf-track__scale { position: relative; z-index: 1; grid-row: 1; grid-column: 2; align-self: stretch; margin: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 4px; align-items: end; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, .34); pointer-events: none; }
.wf-track__scale i { padding: 0 10px 8px 0; font-style: normal; text-align: right; white-space: nowrap; }
.wf-track__scale i:first-child { visibility: hidden; } /* под ним — «1 месяц» Дениса */
@media (min-width: 1024px) {
  .wf-track__row--denis > * { grid-row: 1; }
  .wf-track__row--dmitry > * { grid-row: 2; }
}
.wf-track__row { display: contents; }
.wf-track__who { grid-column: 1; display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 20px; font-weight: 600; color: #fff; white-space: nowrap; }
.wf-track__who img { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #1F1F21; }
.wf-track__bar { position: relative; grid-column: 2; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 4px; height: 64px; border-radius: 14px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 calc(100% / 12 - 1px), rgba(255, 255, 255, .09) calc(100% / 12 - 1px) calc(100% / 12)), rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.wf-track__seg { --c: var(--lime); position: relative; display: flex; align-items: center; min-width: 0; padding: 0 18px; border-radius: 12px; font-size: 15px; line-height: 19px; font-weight: 600; color: #fff; background: linear-gradient(var(--c), var(--c)) 0 0 / 100% 100% no-repeat; }
.wf-track__row--denis .wf-track__seg { justify-content: center; padding: 0 6px; color: var(--ink); white-space: nowrap; }
.wf-track__row--dmitry .wf-track__seg:nth-child(1) { --c: rgba(199, 255, 46, .2); }
.wf-track__row--dmitry .wf-track__seg:nth-child(2) { --c: rgba(199, 255, 46, .44); }
.wf-track__seg--wp { box-shadow: 0 0 36px -6px rgba(199, 255, 46, .6); }
/* подпись последнего месяца — флажком под полосой, по правому краю */
.wf-track__seg--wp span { position: absolute; bottom: calc(100% + 9px); right: 0; padding: 7px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--lime-3), var(--lime-2)); color: var(--ink); font-size: 14px; line-height: 18px; font-weight: 700; white-space: nowrap; box-shadow: 0 0 18px rgba(199, 255, 46, .3); }
.wf-track__seg--wp span::before { content: ""; position: absolute; bottom: -5px; right: 22px; width: 10px; height: 10px; background: var(--lime-3); transform: rotate(45deg); }

/* ---------- Мораль: плакат ---------- */
.wf-moral { container-type: inline-size; display: grid; justify-items: start; gap: clamp(16px, calc(2.8vh / var(--z, 1)), 40px); }
.wf-moral__eyebrow { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.wf-moral__title { margin: 0; font-size: clamp(46px, min(9.6cqi, calc(12.6vh / var(--z, 1))), 184px); line-height: .98; font-weight: 700; letter-spacing: -.052em; color: #fff; }
.wf-moral__title > * { display: block; }
.wf-moral__title em { font-style: normal; color: var(--lime); }
.wf-moral__both { display: flex; align-items: center; gap: 18px; }
.wf-moral__text { margin: 0; max-width: 40em; font-size: clamp(18px, min(calc(1.4vw / var(--z, 1)), calc(2.2vh / var(--z, 1))), 30px); line-height: 1.42; color: var(--muted-2); text-wrap: pretty; }
.wf-moral__text b { font-weight: 700; color: #fff; }
.wf-moral__avas { flex: none; display: flex; }
.wf-moral__avas img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--canvas); background: #1F1F21; }
.wf-moral__avas img + img { margin-left: -16px; }
.wf-moral__links { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* приземление и Primary экрана морали (CRO-аудит 22.09, п. 10): средние из #ceiling тихой строкой, кнопка разбора первой в ряду ссылок */
.wf-moral__say { display: grid; gap: clamp(6px, calc(1vh / var(--z, 1)), 12px); min-width: 0; }
.wf-moral__land { margin: 0; max-width: 40em; font-size: clamp(16px, min(calc(1.1vw / var(--z, 1)), calc(1.8vh / var(--z, 1))), 22px); line-height: 1.45; color: rgba(255, 255, 255, .56); text-wrap: pretty; }
.wf-moral__land b { font-weight: 600; color: rgba(255, 255, 255, .86); }
.wf-moral__cta { margin-right: 8px; }
.wf-read { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #fff; font: 600 16px/20px var(--font); letter-spacing: -.008em; text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s; }
.wf-read img { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #1F1F21; }
.wf-read span { transition: transform .2s var(--ease); }
.wf-read:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .36); }
.wf-read:hover span { transform: translateX(3px); }

/* ---------- Прокрутка: всё считается из --p сцены (0 — только показалась снизу, 1 — целиком в кадре) ---------- */
.wf-live [data-wf-p] { --p: 0; }
/* глава 1: полароид въезжает с поворотом, строки встают по одной, последняя — «падает» сверху, как груз */
.wf-live .wf-snap--denis { --q: clamp(0, calc(var(--p) / .34), 1); opacity: var(--q); transform: translateY(calc((1 - var(--q)) * 48px)) rotate(calc(-3deg - (1 - var(--q)) * 8deg)); }
.wf-live .wf-lead { opacity: clamp(0, calc((var(--p) - .06) / .2), 1); }
.wf-live .wf-was__note { opacity: clamp(0, calc((var(--p) - .72) / .2), 1); }
.wf-live .wf-was__title > span { --q: clamp(0, calc((var(--p) - .14 - var(--i) * .15) / .2), 1); opacity: var(--q); transform: translateY(calc((1 - var(--q)) * .45em)); }
.wf-live .wf-was__title > .wf-was__punch { transform: translateY(calc((1 - var(--q)) * -.6em)); }
/* глава 1, график: пунктир прочерчивается слева, столбцы растут по очереди, подпись едет на макушке столбца */
.wf-live .wf-run__head { --q: clamp(0, calc((var(--p) - .02) / .22), 1); opacity: var(--q); transform: translateY(calc((1 - var(--q)) * 24px)); }
.wf-live .wf-bars__was { clip-path: inset(-40px calc((1 - clamp(0, calc((var(--p) - .12) / .22), 1)) * 100%) -40px 0); }
.wf-live .wf-bar { --q: clamp(0, calc((var(--p) - .22 - var(--k) * .15) / .28), 1); }
.wf-live .wf-bar__col i { transform: scaleY(var(--q)); }
.wf-live .wf-bar__col b { opacity: clamp(0, calc(var(--q) * 4), 1); transform: translateY(calc((1 - var(--q)) * var(--v) * (var(--plot) - var(--val-h)))); }
.wf-live .wf-bar__when, .wf-live .wf-bar__note { opacity: clamp(.25, calc(var(--q) * 1.4), 1); }
/* связка: Денис — слева, Дима — справа, сходятся к «позвал» */
.wf-live .wf-invite__line { --q: clamp(0, calc((var(--p) - .1 - var(--i) * .17) / .24), 1); opacity: var(--q); }
.wf-live .wf-invite__line:first-child { transform: translateX(calc((1 - var(--q)) * -.5em)); }
.wf-live .wf-invite__verb { transform: scale(calc(.86 + var(--q) * .14)); }
.wf-live .wf-invite__line:last-child { transform: translateX(calc((1 - var(--q)) * .5em)); }
.wf-live .wf-invite__text { opacity: clamp(0, calc((var(--p) - .7) / .22), 1); }
/* глава 2: «месяц» зачёркивается, у Дениса загорается одна клетка, полоса Димы заливается месяц за месяцем (--l — доля фазы) */
.wf-live .wf-year__head { opacity: clamp(0, calc(var(--p) / .2), 1); }
.wf-live .wf-year__title s::after { clip-path: inset(-.2em calc((1 - clamp(0, calc((var(--p) - .18) / .16), 1)) * 100%) -.2em 0); }
.wf-live .wf-year__money { opacity: calc(.2 + clamp(0, calc((var(--p) - .82) / .16), 1) * .8); }
.wf-live .wf-track__row--denis .wf-track__seg { --l: clamp(0, calc((var(--p) - .26) / .1), 1); }
.wf-live .wf-track__row--dmitry .wf-track__bar { --q: clamp(0, calc((var(--p) - .36) / .5), 1); }
.wf-live .wf-track__row--dmitry .wf-track__seg { --l: clamp(0, calc((var(--q) * 12 - var(--from)) / (var(--to) - var(--from))), 1); }
.wf-live .wf-track__seg { background-size: calc(var(--l) * 100%) 100%; color: rgba(255, 255, 255, calc(var(--l) * 1.6 - .4)); }
.wf-live .wf-track__row--denis .wf-track__seg { color: rgba(23, 24, 28, calc(var(--l) * 1.6 - .4)); }
.wf-live .wf-track__seg--wp { box-shadow: 0 0 36px -6px rgba(199, 255, 46, calc(var(--l) * .6)); }
.wf-live .wf-track__seg--wp span { opacity: clamp(0, calc((var(--l) - .7) / .3), 1); transform: translateY(calc((1 - clamp(0, calc((var(--l) - .7) / .3), 1)) * 8px)); }
/* мораль: строки по одной, аватары сходятся */
.wf-live .wf-moral__eyebrow { opacity: clamp(0, calc(var(--p) / .15), 1); }
.wf-live .wf-moral__title > * { --q: clamp(0, calc((var(--p) - .08 - var(--i) * .16) / .22), 1); opacity: var(--q); transform: translateY(calc((1 - var(--q)) * .3em)); }
.wf-live .wf-moral__both, .wf-live .wf-moral__links { --q: clamp(0, calc((var(--p) - .66) / .22), 1); opacity: var(--q); }
.wf-live .wf-moral__avas img:first-child { transform: translateX(calc((1 - var(--q)) * -18px)); }
.wf-live .wf-moral__avas img:last-child { transform: translateX(calc((1 - var(--q)) * 18px)); }

/* ---------- Широкий экран ---------- */
@media (min-width: 1024px) {
  .wf-pace { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, calc(4.5vw / var(--z, 1)), 88px); align-items: center; }
  /* кадр секции под шапкой минус поля — по нему высота графика и полароида */
  .wf-ch { --wf-frame: calc(min(var(--screen-h) - var(--nav-h), 1600px) - 2 * var(--section-pad)); }
  .wf-was { grid-template-columns: minmax(0, 3.1fr) minmax(0, 8.9fr); column-gap: clamp(48px, calc(5.4vw / var(--z, 1)), 112px); align-items: center; }
  .wf-snap { width: min(100%, 460px, calc(var(--wf-frame) * .62)); padding: 12px 12px 0; }
  .wf-snap b { font-size: 20px; line-height: 26px; }
  /* график на весь кадр, заголовок — поверх его пустого левого верха */
  .wf-run { grid-template-areas: "s"; }
  .wf-run > * { grid-area: s; }
  .wf-run__head { position: relative; z-index: 2; align-self: start; max-width: min(58%, 900px); }
  .wf-bars { --val-h: clamp(44px, calc(6.4vh / var(--z, 1)), 84px); --plot: clamp(320px, calc(var(--wf-frame) - 88px), 1040px); }
  .wf-bars__was span { bottom: auto; top: 10px; }
  .wf-bar__col b { font-size: clamp(22px, calc(2.2vw / var(--z, 1)), 44px); }
  .wf-bar--now .wf-bar__col b { font-size: clamp(30px, min(calc(3.6vw / var(--z, 1)), calc(5.8vh / var(--z, 1))), 76px); }
  /* глава 2: сверху заголовок слева и доход справа, снизу — полоса на всю ширину */
  .wf-year { grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; row-gap: clamp(36px, calc(6vh / var(--z, 1)), 72px); align-items: end; }
  .wf-year__money { justify-items: end; padding-bottom: 6px; text-align: right; }
  .wf-track { grid-column: 1 / -1; }
  .wf-track__row--dmitry > * { margin-top: clamp(30px, calc(4vh / var(--z, 1)), 44px); } /* зазор между полосами — место под флажок последнего месяца */
  .wf-track__bar { height: clamp(56px, calc(7.4vh / var(--z, 1)), 108px); }
  .wf-track__seg { font-size: clamp(14px, min(calc(1.05vw / var(--z, 1)), calc(1.8vh / var(--z, 1))), 22px); line-height: 1.3; }
  .wf-track__row--denis .wf-track__seg { font-size: clamp(12px, min(calc(1.05vw / var(--z, 1)), calc(1.8vh / var(--z, 1))), 22px); }
}
}
/* невысокие окна (1280×720, 1366×768): календарь рамы площе, глава 2 плотнее */
@media (min-width: 1024px) and (max-height: 820px) {
  .wf-cal { gap: 20px; padding: 28px 32px; }
  .wf-cal__num b { font-size: clamp(96px, calc(15vh / var(--z, 1)), 120px); }
  .wf-cal__grid i { aspect-ratio: 1.5; }
  .wf-cal__legend { margin-top: -6px; }
  .wf-year { row-gap: 28px; }
  .wf-year__head { gap: 12px; }
  .wf-who__ava { width: 44px; height: 44px; }
  .wf-track { row-gap: 10px; }
  .wf-track__bar { height: 52px; }
}
@media (min-width: 1440px) {
  .wf-cal { padding: 44px; }
  .wf-cal__board { --g: 7px; }
}
@media (max-width: 1279px) and (min-width: 1024px) {
  .wf-keep { gap: 12px 28px; }
  .wf-keep__item b { font-size: 20px; line-height: 26px; }
}
/* планшет: колонки главы 1 уже, график ниже */
@media (min-width: 768px) and (max-width: 1023px) {
  .wf-was { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 40px; align-items: center; }
  .wf-bars { --plot: 340px; --val-h: 42px; }
  .wf-year__title { font-size: 56px; }
}
/* год на телефоне и планшете — как диаграмма Ганта: у каждой фазы своя строка — полоска на шкале из 12 месяцев и подпись под ней */
@media (max-width: 1023px) {
  .wf-track { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .wf-track__scale { display: none; }
  .wf-track__row { display: grid; gap: 10px; }
  .wf-track__row + .wf-track__row { margin-top: 14px; }
  .wf-track__who, .wf-track__bar { grid-column: auto; }
  .wf-track__bar { display: flex; flex-direction: column; gap: 14px; height: auto; border-radius: 0; background: none; box-shadow: none; }
  .wf-track__seg, .wf-live .wf-track__seg { display: grid; gap: 7px; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 15px; line-height: 20px; color: rgba(255, 255, 255, .86); white-space: normal; }
  .wf-track__row--denis .wf-track__seg, .wf-live .wf-track__row--denis .wf-track__seg { justify-content: stretch; padding: 0; border-radius: 0; color: rgba(255, 255, 255, .86); white-space: normal; }
  .wf-track__row--dmitry .wf-track__seg:nth-child(1) { --c: rgba(199, 255, 46, .42); }
  .wf-track__row--dmitry .wf-track__seg:nth-child(2) { --c: rgba(199, 255, 46, .7); }
  .wf-track__seg::before { content: ""; height: 14px; border-radius: 7px; background: linear-gradient(90deg, rgba(255, 255, 255, .07) calc(var(--from) / 12 * 100%), var(--c) calc(var(--from) / 12 * 100%) calc(var(--to) / 12 * 100%), rgba(255, 255, 255, .07) calc(var(--to) / 12 * 100%)); }
  .wf-live .wf-track__seg { opacity: clamp(.2, calc(var(--l) * 1.4), 1); }
  .wf-track__seg--wp span, .wf-live .wf-track__seg--wp span { position: static; padding: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font-size: 15px; line-height: 20px; font-weight: 600; white-space: normal; opacity: 1; transform: none; }
  .wf-track__seg--wp span::before { display: none; }
}
@media (max-width: 767px) {
  .wf-pace { gap: 28px; }
  .wf-pace__how { font-size: 16px; line-height: 24px; }
  .wf-keep { gap: 12px 24px; }
  .wf-keep__item span { font-size: 13px; line-height: 18px; white-space: normal; }
  .wf-keep__item b { font-size: 19px; line-height: 24px; }
  .wf-cal { gap: 22px; padding: 24px 20px; border-radius: 22px; }
  .wf-cal__num b { font-size: 112px; }
  .wf-cal__num span { font-size: 24px; }
  .wf-cal__num small { font-size: 14px; line-height: 20px; }
  .wf-cal__board { --g: 3px; }
  .wf-cal__days { padding-right: 4px; }
  .wf-cal__days i, .wf-cal__months i { font-size: 11px; }
  .wf-cal__months i { padding-left: 5px; }
  .wf-cal__grid i { border-radius: 18%; }
  .wf-cal__legend { margin-top: -6px; gap: 8px 14px; }

  .wf-lead, .wf-was__note, .wf-run__sub, .wf-year__text { font-size: 16px; line-height: 24px; }
  .wf-was { gap: 24px; }
  .wf-was__copy { display: contents; } /* на телефоне сначала строка «История двух друзей…», потом фото и столбик */
  .wf-was .wf-lead { order: -1; }
  .wf-snap { width: 200px; margin-left: 6px; }
  .wf-was__title { font-size: 36px; line-height: 1.06; }
  .wf-bars { --plot: 250px; --val-h: 30px; }
  .wf-bars__list { column-gap: 6px; }
  .wf-bar__col b { font-size: 16px; }
  .wf-bar--now .wf-bar__col b { font-size: 22px; }
  .wf-bar__col i { border-radius: 10px 10px 2px 2px; }
  .wf-bar__when { margin-top: 8px; font-size: 13px; line-height: 17px; }
  .wf-bar__note { font-size: 12px; line-height: 16px; }
  .wf-bars__was span { font-size: 12px; line-height: 16px; bottom: 6px; }
  .wf-invite__title { font-size: clamp(44px, 15cqi, 66px); }
  .wf-invite__text { font-size: 16px; line-height: 24px; }
  .wf-year { gap: 26px; }
  .wf-year__title { font-size: 40px; }
  .wf-year__money b { font-size: 36px; }
  .wf-moral__title { font-size: clamp(46px, 14cqi, 62px); }
  .wf-moral__both { flex-direction: column; align-items: flex-start; gap: 12px; }
  .wf-moral__text { font-size: 16px; line-height: 24px; }
  .wf-moral__links { flex-direction: column; align-items: stretch; width: 100%; }
  .wf-moral__cta { margin-right: 0; justify-content: space-between; }
  .wf-moral__land { font-size: 15px; line-height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] .wf-cal__grid i { opacity: 1; transform: none; transition: none; }
  .wf-read, .wf-read span, .wf-rail i { transition: none; }
}