/* Живые обложки главной (covers.js): сюжет кейса поверх статичной обложки. Пока карточка не играет, видна обложка;
   при «уменьшить движение» скрипт не запускается и этих слоёв нет. Цвета внутри — из макетов и обложек, от темы не зависят. */

/* ---------- Офферы: мир 1200×1500 единиц, как у статичной обложки; --u — одна единица ---------- */
.live { position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; container-type: size; transition: opacity .4s var(--ease); }
.live.on { opacity: 1; }
.live { --u: calc(100cqw / var(--W, 1200)); } /* единица мира: ширина сцены — --W единиц (у каждой обложки своя) */
.live--offers { background: #e2ebe5; } /* фон обложки офферов */
.lv-world { position: absolute; inset: 0; transform-origin: 0 0; }
.lv-world > *, .lv-box > *, .lv-sprite > img, .lv-group > * {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
}
.lv-world > .lv-sketch { left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
/* набросок — те же чернила, что у пузырей героя: на светлой обложке они тёмные в обеих темах */
.lv-sketch path {
  fill: none; stroke: var(--comic-ink); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 2; stroke-dashoffset: 1.002; /* штрих спрятан целиком — без точки в начале пути (covers.js: HIDE) */
}
.lv-sketch .lv-marker { stroke: var(--accent); stroke-width: 16; opacity: .42; }
.lv-box { overflow: hidden; border-radius: calc(var(--r, 18) * var(--u)); clip-path: inset(0 0 100% 0); }
.lv-state { opacity: 0; } /* следующее состояние экрана поверх предыдущего */
.lv-box.lv-pill { border-radius: calc(61.5 * var(--u)); }
.lv-shot { object-fit: fill; }
.lv-shadow { border-radius: calc(var(--r, 18) * var(--u)); box-shadow: 0 calc(18 * var(--u)) calc(56 * var(--u)) var(--shade, rgb(30 70 45 / .27)); opacity: 0; }
/* блок на сцене с самого начала — без «печати» */
.lv-shadow.is-on { opacity: 1; }
.lv-box.is-open { clip-path: none; }
.lv-shadow--pill { border-radius: calc(61.5 * var(--u)); }
/* наведение на строку — голубое свечение, как в состояниях карточки активности (кадр 03) */
.lv-glow { border-radius: calc(var(--r) * var(--u)); box-shadow: 0 0 calc(12 * var(--u)) calc(1.5 * var(--u)) rgb(33 150 243 / .38); opacity: 0; }
.lv-press { border-radius: calc(var(--r) * var(--u)); background: rgb(0 0 0 / .07); opacity: 0; }
.lv-erase { background: #fff; opacity: 0; }
/* затемнение под окном (Презентации: окно «Сформировать ссылку» над разделом) */
.lv-scrim { background: rgb(24 24 52 / .34); border-radius: calc(var(--r) * var(--u)); opacity: 0; }
.lv-erase.is-on { opacity: 1; }
/* каретка в поле ввода и касание пальцем на телефоне */
.lv-caret { background: #141415; opacity: 0; }
.lv-touch { border-radius: 50%; background: rgb(20 20 21 / .18); box-shadow: 0 0 0 calc(3 * var(--u)) rgb(255 255 255 / .6); opacity: 0; }
.lv-group { transform-origin: 50% 0; }
/* телемедицина: Face ID — уголки, полоса скана и галочка цветом кнопок приложения; точки кода-пароля; колокольчик */
.lv-face { overflow: visible; }
.lv-face path, .lv-face line { fill: none; stroke: #1062e9; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.lv-face path { stroke-dasharray: 1 2; stroke-dashoffset: 1.002; }
.lv-face .lv-scan { stroke-width: 3; opacity: 0; filter: drop-shadow(0 0 4px #1062e9); }
.lv-dot { border-radius: 50%; background: #1a1d30; opacity: 0; }
.lv-bellbg { background: rgb(248 249 253); }
.lv-bell { transform-origin: 50% 4%; }
/* рукописные подписи сцены (Shantell, как заметки на полях); в узкой карточке не прочесть — прячем */
/* Premium: зачёркивание тушью, рамка «Премиум доступ» вспыхивает, пузырь «печатает…» в манере пузырей героя */
.lv-sketch .lv-strike { stroke-width: 3.2; }
.lv-glow-ring { border-radius: calc(var(--r) * var(--u)); box-shadow: 0 0 0 calc(5 * var(--u)) rgb(255 146 55 / .45), 0 0 calc(22 * var(--u)) rgb(255 146 55 / .55); opacity: 0; }
.lv-glow-ring--green { box-shadow: 0 0 0 calc(5 * var(--u)) rgb(56 200 140 / .45), 0 0 calc(22 * var(--u)) rgb(56 200 140 / .55); }
.lv-bubble {
  display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--u));
  background: var(--comic-paper); border: calc(2.6 * var(--u)) solid var(--comic-ink); border-radius: calc(25 * var(--u));
  transform-origin: 0 100%; opacity: 0;
}
.lv-bubble::after {
  content: ""; position: absolute; left: calc(-9 * var(--u)); bottom: calc(4 * var(--u));
  border-style: solid; border-width: calc(9 * var(--u)) calc(13 * var(--u)) calc(4 * var(--u)) 0;
  border-color: transparent var(--comic-ink) transparent transparent;
}
.lv-bubble i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--comic-ink); animation: lv-typing 1.1s ease-in-out infinite; }
.lv-bubble i:nth-child(2) { animation-delay: .15s; }
.lv-bubble i:nth-child(3) { animation-delay: .3s; }
@keyframes lv-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-40%); opacity: 1; } }
.lv-sketch .lv-tick { stroke-width: 7; }
/* анкета обслуживания: экран темнеет под шторкой (как на обложке — чёрный на 50%), перо обводит бейдж */
.lv-dim { background: rgb(0 0 0 / .5); opacity: 0; }
.lv-red { opacity: 0; } /* красный таймер проступает поверх зелёного */
.lv-b, .lv-done { opacity: 0; } /* состояния анкеты поверх стартового кадра */
.lv-sketch .lv-pen { stroke: var(--accent); stroke-width: 4; }
.lv-labels { display: none; }
.lv-label {
  margin: 0; font: 400 calc(30 * var(--u))/1.2 "Shantell Sans", var(--font); color: var(--comic-ink);
  text-align: center; rotate: -2deg; opacity: 0;
}
@container (max-width: 400px) { .lv-label { display: none; } }
.lv-check { overflow: visible; opacity: 0; }
.lv-check rect { fill: #009b3a; }
.lv-check path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.002; }
.lv-seg { background: #009b3a; border-radius: 99px; transform: scaleX(0); transform-origin: 0 50%; }
.lv-patch { opacity: 0; }
/* акт 2 — список офферов: кусок кадра (окно в ту же картинку), подчёркивание вкладки, отклик клиента */
.lv-sprite { overflow: hidden; }
.lv-foot { border-radius: 0 0 calc(18 * var(--u)) calc(18 * var(--u)); }
.lv-bar { background: #039b37; transform-origin: 0 50%; }
.lv-panel { background: #d5f5e0; } /* зелёная плашка отклика без галочки — галочка выскакивает поверх */
.lv-icon { opacity: 0; }
.lv-shadow--off { transform-origin: 50% 0; }
/* печатающая головка: тонкая тёмная планка идёт по краю проявления блока */
.lv-head { display: block; border-radius: 99px; background: var(--comic-ink); box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgb(20 20 21 / .25); opacity: 0; }
/* курсор — в координатах карточки: left/top — кончик стрелки */
.lv-cursor {
  position: absolute; left: 108%; top: 66%; width: 0; height: 0; opacity: 0;
  font-size: 3.8cqw; line-height: 1; color: #141415; /* размер — от ширины карточки, одинаковый во всех сценах */
  filter: drop-shadow(0 0 .13cqw #fff) drop-shadow(0 0 .13cqw #fff) drop-shadow(0 .33cqw .42cqw rgb(0 0 0 / .28));
}
.lv-cursor i { position: absolute; left: 0; top: 0; translate: -22% -14%; }
.lv-cursor .ph-hand-pointing { translate: -40% -8%; opacity: 0; }

/* ---------- Главная банка: ролик 1920×1128 поверх всей страницы; пометки ревью — в тех же единицах ---------- */
/* covers.js переносит ролик и пометки в .lp-scroll: под роликом — снимок страницы (страница 1280 по центру 1920),
   и между слайдами всё вместе едет вверх-вниз. Низ ролика растворяется в снимке, чтобы не было шва */
.live-page { position: absolute; inset: 0; overflow: hidden; }
.lp-scroll { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1920 / 8248; background: #fff; }
.lp-shot { position: absolute; left: calc(320 / 1920 * 100%); top: 0; width: calc(1280 / 1920 * 100%); height: auto; }
.lp-scroll > video { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1920 / 1128; }
.live-page.on .lp-scroll > video { -webkit-mask-image: linear-gradient(#000 95%, transparent); mask-image: linear-gradient(#000 95%, transparent); }
.live-notes { position: absolute; inset: 0; pointer-events: none; container-type: inline-size; --u: calc(100cqw / 1920); --px: 1.6; }
.ln-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* толщина задана в пикселях экрана: --px — сколько единиц ролика в одном пикселе (covers.js) */
.ln {
  fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.002; opacity: 0;
  transition: opacity .35s, stroke-dashoffset 0s .35s;
}
.ln-ink { stroke: var(--comic-ink); stroke-width: calc(var(--px) * 2.3); }
.ln-pen { stroke: var(--accent); stroke-width: calc(var(--px) * 3); }
.ln-marker { stroke: var(--accent); stroke-width: calc(var(--px) * 13); --o: .42; }
.ln-label {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); margin: 0;
  font: 400 max(13px, calc(34 * var(--u)))/1.25 "Shantell Sans", var(--font); color: var(--comic-ink);
  rotate: -2deg; opacity: 0; transition: opacity .3s;
}
.live-notes[data-step="1"] [data-n="1"], .live-notes[data-step="2"] [data-n="2"], .live-notes[data-step="3"] [data-n="3"],
.live-notes[data-step="4"] [data-n="4"], .live-notes[data-step="5"] [data-n="5"], .live-notes[data-step="6"] [data-n="6"],
.live-notes[data-step="7"] [data-n="7"] {
  opacity: var(--o, 1); stroke-dashoffset: 0;
  transition: opacity .15s, stroke-dashoffset .45s steps(5, end) calc(var(--i, 0) * .3s);
}
.live-notes[data-step="1"] .ln-label[data-n="1"], .live-notes[data-step="2"] .ln-label[data-n="2"],
.live-notes[data-step="3"] .ln-label[data-n="3"], .live-notes[data-step="4"] .ln-label[data-n="4"],
.live-notes[data-step="5"] .ln-label[data-n="5"], .live-notes[data-step="6"] .ln-label[data-n="6"],
.live-notes[data-step="7"] .ln-label[data-n="7"] { transition: opacity .3s .4s; }
/* в узкой карточке подписи не прочесть — остаются только пометки, без стрелок от подписей */
@container (max-width: 640px) { .ln-label, .ln-ink { display: none; } }