/* Перенесено из итога этапа 1 (build/ui-kits.js) как есть — раскладка и оформление утверждённых страниц. Цвета — переменные системы. */
/* focustrack · Направление А · заставка главной до входа.
   «Средствами HTML» по приложению Д задания: фигуры — SVG, движение — transform и opacity,
   расписание — @keyframes и animation-delay. Ни видео, ни библиотек.
   Ни одного цвета значением: всё через переменные профиля.
   Время каждого движения задаётся в разметке переменными --t (начало) и --d (длительность). */

.intro { display: none; gap: var(--space-3); }
.pz[data-intro="on"] .intro { display: grid; }
.pz[data-intro="on"] .ring, .pz[data-intro="on"] .intro-start { display: none; }
.intro-start { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

/* Один экран: высота сцены задана, чтобы зона целиком помещалась в окно платформы без прокрутки */
.intro-screen { position: relative; width: 100%; height: 560px; border: var(--border-thin) solid var(--border-divider); border-radius: var(--radius-md); background: var(--bg-card); overflow: hidden; box-shadow: var(--elev-1); }
.sc { position: absolute; inset: 0; display: none; --k: 1; }
.sc svg { display: block; width: 100%; height: 100%; color: var(--text-primary); }
.sc[data-on] { display: block; }
/* Рисунки — файлы img/intro/*.svg (цвета в них атрибутами и переменными профиля), сцены берут их части через <use>.
   Надписи — текст HTML поверх рисунка в поле сцены. --k — точек экрана на единицу поля (считает intro.js):
   кегль не мельше 12 точек на экране, каким бы ни было уменьшение кадра */
.sc foreignObject { overflow: visible; pointer-events: none; }
.sc .it { font-family: var(--font-text); color: var(--text-primary); line-height: 1.25; font-size: max(var(--fs), calc(12px / var(--k))); }
.sc .it > span { display: block; font-size: max(var(--fs), calc(12px / var(--k))); }
.sc .it-c { text-align: center; }
.sc .it .t-head { font-family: var(--font-heading); font-weight: var(--weight-heading); color: var(--text-primary); }
.sc .it .t-dim { color: var(--text-secondary); }
.sc .it span span.t-dim { font-family: var(--font-text); font-weight: normal; }
.intro:not([data-narrow]) .sc .it { white-space: nowrap; }
/* подписи меню у доски задач: на телефоне кегль крупнее — надпись начинается на 8 единиц левее, чтобы не задеть черту колонки */
.intro:not([data-narrow]) .sc .it-in { padding-left: 8px; }
/* телефон: абзац подсказки и двухстрочные заголовки переносятся по ширине своего места, а не по строкам стола */
.intro[data-narrow] .sc .it-flow > span { display: inline; }

/* ── Ход и управление ── */
.intro-scrub { position: relative; display: grid; }
.intro-seek { position: absolute; inset: 50% 0 auto; width: 100%; height: 32px; margin-top: -16px; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.intro-seek::-webkit-slider-runnable-track { height: 32px; background: transparent; }
.intro-seek::-moz-range-track { height: 32px; background: transparent; }
.intro-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: 9px; border-radius: 50%; background: var(--action-primary); border: 2px solid var(--bg-card); box-shadow: var(--elev-1); }
.intro-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--action-primary); border: 2px solid var(--bg-card); }
.intro-seek:focus-visible { outline: var(--border-strong) solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.intro-bar { position: relative; display: flex; gap: 3px; }
/* Полоса хода — только показание: переход по сценам делают кнопки «‹» и «›» и стрелки клавиатуры */
.intro-bar i { position: relative; flex: 1 1 auto; height: 6px; border-radius: var(--radius-round); background: var(--bg-selection); overflow: hidden; }
.intro-bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--action-primary); }
.intro-bar i[data-done]::after { width: 100%; }
.intro-foot { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.intro-title { display: grid; gap: 2px; min-width: 0; flex: 1 1 240px; }
.intro-title b { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--font-size-5); }
.intro-title span { font-size: var(--font-size-2); color: var(--text-muted); font-family: var(--font-mono); }
.intro-acts { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.intro-note { font-size: var(--font-size-2); color: var(--text-muted); }

/* ══ Общие приёмы движения: их расписание задаётся --t и --d ══ */
.sc.is-play .a-fade { animation: in-fade calc(var(--d, .6s) / var(--speed, 1)) var(--motion-ease) calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) both; }
.sc.is-play .a-out { animation: out-fade calc(var(--d, .6s) / var(--speed, 1)) var(--motion-ease) calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) both; }
.sc.is-play .a-rise { animation: in-rise calc(var(--d, .6s) / var(--speed, 1)) var(--motion-ease) calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) both; }
.sc.is-play .a-grow { animation: in-grow calc(var(--d, .6s) / var(--speed, 1)) var(--motion-ease) calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) both; }
/* Выделение пункта меню переезжает с прежнего места: --dy — расстояние до него */
.sc.is-play .a-slide { animation: in-slide calc(var(--d, .6s) / var(--speed, 1)) var(--motion-ease) calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) both; }
.sc.is-play .a-move { animation: in-move calc(var(--d, .8s) / var(--speed, 1)) var(--motion-ease) calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) both; }
.sc.is-play .a-zoom { animation: cam-zoom calc(var(--d, 1s) / var(--speed, 1)) var(--motion-ease) calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) both; }
.sc.is-play .a-unroll { animation: unroll calc(var(--d, .8s) / var(--speed, 1)) var(--motion-ease) calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) both; }
/* Надпись выходит крупной в середину кадра, держится и поднимается на своё место наверху:
   --dy — насколько ниже она появляется, --s — во сколько раз крупнее */
.sc.is-play .a-lift { animation: in-lift calc(var(--d, 3s) / var(--speed, 1)) var(--motion-ease) calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) both; transform-box: fill-box; transform-origin: center; }
.sc.is-play .a-draw { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); animation: draw calc(var(--d, 1s) / var(--speed, 1)) linear calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) both; }
.sc.is-play .a-sway { animation: sway calc(3.2s / var(--speed, 1)) ease-in-out calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) infinite; }
.sc.is-play .a-pulse { animation: dot-pulse calc(1s / var(--speed, 1)) ease-in-out calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) infinite; }
.sc.is-play .a-spin { animation: spin-slow calc(3s / var(--speed, 1)) linear calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) infinite; transform-box: fill-box; transform-origin: center; }
/* Вторая шестерня вертится навстречу первой: иначе сцепление не читается */
.sc.is-play .a-spin-back { animation: spin-back calc(4.2s / var(--speed, 1)) linear calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) infinite; transform-box: fill-box; transform-origin: center; }
.sc.is-play .a-run { animation: road-run calc(1.1s / var(--speed, 1)) linear calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) infinite; }
.sc.is-play .a-blink { animation: blink calc(var(--d, 1.2s) / var(--speed, 1)) var(--motion-ease) calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) both; }
.sc.is-play .a-land { animation: phone-land calc(var(--d, 1.1s) / var(--speed, 1)) var(--motion-ease) calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) both; transform-box: fill-box; transform-origin: center; }
.sc.is-play .a-wave { stroke-dasharray: 16 24; animation: wave-flow calc(1.4s / var(--speed, 1)) linear calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) infinite; }
.sc .a-wave { opacity: 0; }
.sc.is-play .a-wave { opacity: 1; }
.sc.is-play .a-tilt { animation: tilt-road calc(var(--d, 1.2s) / var(--speed, 1)) var(--motion-ease) calc((var(--t, 0s) - var(--off, 0s)) / var(--speed, 1)) both; transform-box: fill-box; transform-origin: bottom center; }
.sc .a-fade, .sc .a-rise, .sc .a-grow, .sc .a-move, .sc .a-blink, .sc .a-unroll, .sc .a-lift { opacity: 0; }

@keyframes in-fade { to { opacity: 1; } }
@keyframes out-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes in-rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes in-grow { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
@keyframes in-slide { from { transform: translate3d(0, var(--dy, 0), 0); } to { transform: none; } }
@keyframes in-move { from { opacity: 0; transform: translate3d(var(--dx, 0), var(--dy, 0), 0); } to { opacity: 1; transform: none; } }
@keyframes cam-zoom { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes unroll { from { opacity: 0; transform: scaleY(.04); } to { opacity: 1; transform: scaleY(1); } }
@keyframes in-lift {
  0% { opacity: 0; transform: translate3d(0, var(--dy, 270px), 0) scale(var(--s, 1.7)); }
  14% { opacity: 1; transform: translate3d(0, var(--dy, 270px), 0) scale(var(--s, 1.7)); }
  56% { opacity: 1; transform: translate3d(0, var(--dy, 270px), 0) scale(var(--s, 1.7)); }
  100% { opacity: 1; transform: none; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes dot-pulse { 0%, 100% { transform: scale(.82); opacity: .75; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes spin-back { to { transform: rotate(-360deg); } }
@keyframes road-run { to { stroke-dashoffset: -96; } }
@keyframes phone-land { from { opacity: 0; transform: translate3d(40px, -190px, 0) scale(3.4); } 70% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes wave-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -80; } }
@keyframes tilt-road { from { transform: perspective(1100px) rotateX(0deg) scale(1); } to { transform: perspective(1100px) rotateX(44deg) scale(1.16); } }
@keyframes blink { 0% { opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

/* Пауза — один признак на плеере: инлайн-стилей по узлам нет, снимать нечего */
.intro[data-paused] .sc * { animation-play-state: paused !important; }

/* Средства поворота вокруг своей середины: без transform-box фигуры SVG вертятся вокруг угла холста */
.sc .pivot { transform-box: fill-box; transform-origin: center; }

/* Приложение Д: при пожелании уменьшить движение заставка не проигрывается — сразу последний кадр целиком.
   Конечные приёмы получают нулевую длительность и задержку: каждая часть сразу в конечном положении, без появления;
   бесконечные (качание, вращение, бег, волны, пульс) выключены. «Сначала» и «‹ ›» листают кадры так же — без движения */
@media (prefers-reduced-motion: reduce) {
  .sc.is-play .a-fade, .sc.is-play .a-out, .sc.is-play .a-rise, .sc.is-play .a-grow, .sc.is-play .a-move, .sc.is-play .a-slide,
  .sc.is-play .a-zoom, .sc.is-play .a-unroll, .sc.is-play .a-blink, .sc.is-play .a-land, .sc.is-play .a-lift, .sc.is-play .a-tilt,
  .sc.is-play .a-draw { animation-duration: 0s !important; animation-delay: 0s !important; }
  .sc.is-play .a-sway, .sc.is-play .a-pulse, .sc.is-play .a-spin, .sc.is-play .a-spin-back, .sc.is-play .a-run, .sc.is-play .a-wave { animation: none !important; }
}

/* Телефонная раскладка сцен: кадр 600 × 620 из поля 1200 × 620 (viewBox меняет a/js/intro.js по ширине экрана).
   Надписи во весь кадр — в двух видах: dv — настольный, pv — телефонный, с переносом */
.intro:not([data-narrow]) .sc .pv, .intro[data-narrow] .sc .dv { display: none; }
/* сцены с окном приложения (8–12): на телефоне — меню и подсказка рядом, карточки задач скрыты */
.intro[data-narrow] .sc .ph-shift { transform: translateX(-410px); }

@container (max-width: 767px) {
  /* 600 × 620 в ширину экрана: масштаб около 0,6 — кегль надписей дотягивается до 12 точек через --k */
  .intro-screen { height: auto; aspect-ratio: 600 / 620; }
  /* телефон: название сцены и кнопки управления — по середине */
  .intro-foot { gap: var(--space-2); justify-content: center; }
  .intro-title { flex-basis: 100%; justify-items: center; text-align: center; }
  .intro-acts { justify-content: center; }
  .intro-title b { font-size: var(--font-size-4); }
}

/* На время показа окно платформы равно одному экрану: остальные зоны за его край не выходят */
.app[data-intro="on"] .app-body { height: 836px; overflow: hidden; }
.app[data-intro="on"] .app-foot, .app[data-intro="on"] .bottom-plaques { display: none; }
/* Панель открылась, пока заставка стоит на паузе: ограничение одним экраном снимается, зоны ниже видны */
.app[data-intro="on"][data-guest="open"] .app-body { height: auto; overflow: visible; }
.app[data-intro="on"][data-guest="open"] .app-foot { display: flex; }
.app[data-intro="on"][data-guest="open"] .bottom-plaques { display: grid; }
.app[data-intro="on"]:not([data-guest="open"]) .app-wide { display: none; }
@container (max-width: 767px) {
  /* на телефоне заставка тоже держится в одном экране: пояснение зоны убирается, сцена ниже */
  .app[data-intro="on"] .app-body { height: 800px; }
  .app[data-intro="on"] .pz-note { display: none; }
  .intro-seek { height: 44px; margin-top: -22px; }
  .intro-seek::-webkit-slider-runnable-track { height: 44px; }
  .intro-seek::-webkit-slider-thumb { margin-top: 15px; }
  .intro-acts [data-intro-prev], .intro-acts [data-intro-next] { min-width: 44px; padding-inline: var(--space-2); }
}

/* телефон: заставка не обрезается снизу — окно по содержимому; скорость и «Сначала» убраны, остаются ‹ › «Пауза» «Пропустить» */
@container (max-width: 767px) {
  .app[data-intro="on"] .app-body { height: auto; overflow: visible; }
  .intro-acts .chip-row, .intro-acts [data-intro-again] { display: none; }
  .intro { gap: var(--space-2); }
  .intro-screen { max-height: 62vh; }
}