/* Свои компоненты лендинга «Интенсив по анимации в PowerPoint»: форма вопросов,
   корзина, замена гифок на видео, холст масштабируемых зеро-блоков.
   Токены — design-systems/anim.md (акцент #ff7324, hover #000, TildaSans).
   Форма и корзина повторяют вид тильда-оригинала: геометрия сверена с живой
   страницей до десятых пикселя (см. README лендинга). */

/* ── общее ── */
.an-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.an-form__msg--err { color: #ff0000; }
.an-form__msg--ok { color: #1d8a3c; }

/* ══════ ФОРМА «Свяжитесь с нами» (внутри зеро-элемента .tn-atom__form) ══════
   База = артборды 1200/960/640 (вьюпорт ≥640px): поле 45px, шаг 20px, шрифт 16px, кнопка 160×50. */
.tn-atom__form .an-form { position: relative; width: 100%; font-family: 'TildaSans', Arial, sans-serif; }
.tn-atom__form .an-form__row { margin-bottom: 20px; }
.tn-atom__form .an-input {
  display: block; width: 100%; box-sizing: border-box; height: 45px; margin: 0; padding: 0 20px;
  background: #fafafa; border: 1px solid #000; border-radius: 25px;
  font-family: 'TildaSans', Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.33; color: #000;
  outline: none; -webkit-appearance: none; appearance: none;
}
.tn-atom__form .an-input::placeholder { color: #000; opacity: .5; }
.tn-atom__form .an-input:focus { border-color: #ff7324; box-shadow: 0 0 0 2px rgba(255,115,36,.18); }
.tn-atom__form .an-input--err { border-color: #ff0000; }
/* телефон: флаг 18×13 + треугольник 8×5 + статичный «+7», как у Тильды */
.an-phone { position: relative; }
.an-phone__flag { position: absolute; left: 21px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; pointer-events: none; }
.an-phone__flag svg { display: block; width: 18px; height: 13px; box-shadow: 0 0 5px rgba(0,0,0,.3); }
.an-phone__flag i { width: 0; height: 0; margin-left: 6px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #9a9a9a; }
.an-phone__flag b { margin-left: 10px; font-weight: 400; font-size: 16px; line-height: 1.33; color: #000; }
.tn-atom__form .an-input--phone { padding-left: 85px; }
/* низ формы: кнопка 160px слева, галочки справа от неё */
.an-form__foot { display: flex; align-items: center; gap: 16px; }
.tn-atom__form .an-form__submit {
  order: -1; flex: 0 0 160px; width: 160px; height: 50px; padding: 0 15px; box-sizing: border-box;
  background: #ff7324; color: #fff; border: 0; border-radius: 25px;
  font-family: 'TildaSans', Arial, sans-serif; font-size: 14px; font-weight: 400; cursor: pointer; transition: .3s ease all;
}
.tn-atom__form .an-form__submit:hover { background: #000; color: #fff; }
.tn-atom__form .an-form__submit[disabled] { opacity: .6; cursor: default; }
.an-form__consents { flex: 1 1 auto; min-width: 0; }
.tn-atom__form .an-check { display: flex; gap: 7px; align-items: flex-start; margin: 0; font-family: 'TildaSans', Arial, sans-serif; font-size: 11px; line-height: 1.25; color: #303030; cursor: pointer; }
.tn-atom__form .an-check + .an-check { margin-top: 5px; }
.tn-atom__form .an-check input { flex: 0 0 auto; width: 13px; height: 13px; margin: 0; accent-color: #ff7324; }
.tn-atom__form .an-check a { color: #ff7324 !important; text-decoration: underline; }
/* сообщение об ошибке — вне потока, чтобы форма не росла и не вылезала из белой карточки */
.tn-atom__form .an-form__msg { position: absolute; left: 0; right: 0; top: 100%; margin-top: 3px; font-size: 12px; line-height: 1.3; }

/* ≤639px — артборды 480 и 320 (data-field-*-res-480 зеро-формы): поля 40px, шаг 17px, шрифт 14px, кнопка 40px */
@media screen and (max-width: 639px) {
  .tn-atom__form .an-form__row { margin-bottom: 17px; }
  /* шрифт полей 16px, а не 14 как у Тильды: блок увеличивает transform, а iOS смотрит на
     вычисленный кегль — при меньшем 16px Safari сам увеличивает страницу при тапе в поле */
  .tn-atom__form .an-input { height: 40px; font-size: 16px; }
  .an-phone__flag b { font-size: 16px; }
  .tn-atom__form .an-input--phone { padding-left: 85px; }
  .tn-atom__form .an-form__submit { height: 40px; }
  .tn-atom__form .an-check { font-size: 10.5px; line-height: 1.2; }
  .tn-atom__form .an-check + .an-check { margin-top: 2px; }
  .tn-atom__form .an-check input { width: 12px; height: 12px; }
}
/* ≤479px — артборд 320: справа от кнопки места нет (261−160=101px), галочки встают НАД кнопкой.
   Форма становится выше на 47.5px → нужны правки геометрии блока в сборщике (см. отчёт, раздел 3.4). */
@media screen and (max-width: 479px) {
  /* ошибка в две строки вылезала под белую карточку (красным по оранжевому) —
     ставим её справа от кнопки «Отправить». Только ошибку: у «Спасибо» тот же класс */
  .tn-atom__form .an-form__msg--err { left: 172px; right: 0; top: auto; bottom: -8px; margin: 0; font-size: 10.5px; line-height: 1.15; }
  .an-form__foot { display: block; }
  .an-form__consents { margin-bottom: 14px; }
  .tn-atom__form .an-check { font-size: 11px; line-height: 1.25; }
  .tn-atom__form .an-check + .an-check { margin-top: 6px; }
  .tn-atom__form .an-check input { width: 13px; height: 13px; }
}

/* ══════ КОРЗИНА (вид тильдовской t706: белая панель 560px без скруглений, поля 56px, кнопка r=8) ══════ */
.an-cart { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000002; display: block; padding: 0; overflow-y: auto;
  background: rgba(0,0,0,.8); font-family: 'TildaSans', Arial, sans-serif; color: #000; animation: an-cart-in .3s ease; }
.an-cart[hidden] { display: none; }
.an-cart:focus { outline: none; }
@keyframes an-cart-in { from { opacity: 0; } to { opacity: 1; } }
.an-cart__bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: transparent; pointer-events: none; }
.an-cart__close { position: fixed; top: 10px; right: 10px; z-index: 2; width: 43px; height: 43px; padding: 10px; box-sizing: border-box;
  border: 0; background: transparent; cursor: pointer; display: block; }
.an-cart__close svg { display: block; width: 23px; height: 23px; }
.an-cart__panel { position: relative; z-index: 1; box-sizing: border-box; width: 100%; max-width: 560px; min-height: 300px;
  margin: 65px auto; padding: 40px; background: #fff; border-radius: 0; }
.an-cart__title { margin: 0; padding: 0 0 30px; border-bottom: 1px solid rgba(0,0,0,.2); font-size: 24px; font-weight: 600; line-height: 1.35; }
.an-cart__product { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0; padding: 15px 0;
  border: 0; border-bottom: 1px solid rgba(0,0,0,.2); font-size: 16px; line-height: 1.55; }
.an-cart__product span { font-weight: 600; }
.an-cart__product b { font-weight: 400; white-space: nowrap; padding-right: 60px; }
.an-cart__sum { padding: 30px 0 20px; text-align: right; font-size: 16px; font-weight: 600; line-height: 1.55; }
.an-cart form { margin: 20px 0; }
.an-cart .an-form__row { margin: 0 0 20px; }
.an-cart .an-input { display: block; width: 100%; box-sizing: border-box; height: 56px; margin: 0; padding: 0 20px;
  background: #fff; border: 1px solid #000; border-radius: 0; font-family: 'TildaSans', Arial, sans-serif;
  font-size: 16px; font-weight: 400; line-height: 1.33; color: #000; outline: none; -webkit-appearance: none; appearance: none; }
.an-cart .an-input::placeholder { color: #000; opacity: .5; }
.an-cart .an-input:focus { border-color: #ff7324; box-shadow: 0 0 0 2px rgba(255,115,36,.18); }
.an-cart .an-input--err { border-color: #ff0000; }
.an-cart__total { padding-top: 35px; text-align: right; font-size: 16px; font-weight: 600; line-height: 19px; }
.an-cart__consents { margin-top: 30px; }
.an-cart .an-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; font-size: 13px; line-height: 1.35; color: #000; cursor: pointer; }
.an-cart .an-check input { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0; accent-color: #ff7324; }
.an-cart .an-check a { color: #ff7324 !important; text-decoration: underline; }
.an-cart .an-cart__submit { display: block; width: 100%; height: 60px; margin: 20px 0 10px; padding: 0 60px; box-sizing: border-box;
  background: #ff7324; color: #fff; border: 0; border-radius: 8px; font-family: 'TildaSans', Arial, sans-serif;
  font-size: 16px; font-weight: 600; line-height: 1.4; cursor: pointer; transition: background-color .2s ease-in-out, color .2s ease-in-out; }
.an-cart .an-cart__submit:hover { background: #000; color: #fff; }
.an-cart .an-cart__submit[disabled] { opacity: .6; cursor: default; }
.an-cart .an-form__msg { margin-top: 10px; font-size: 14px; line-height: 1.45; }
@media screen and (max-width: 1200px) {
  .an-cart__title { font-size: 22px; }
    .an-cart .an-cart__submit { padding: 0 45px; }
}
@media screen and (max-width: 640px) {
  .an-cart__panel { max-width: 460px; }
  .an-cart__title { font-size: 20px; }
  .an-cart__product { display: block; padding: 35px 0; line-height: 1.45; }
  .an-cart__product span { display: block; padding: 0 30px 10px 0; }
  .an-cart__product b { display: inline-block; padding-right: 0; }
  .an-cart__sum { line-height: 1.45; }
  .an-cart__sum,     .an-cart .an-cart__submit { padding: 0 30px; margin-bottom: 0; }
  .an-cart form { padding-bottom: 20px; }
}
@media screen and (max-width: 560px) {
  .an-cart__panel { max-width: 100%; margin: 50px auto 0; min-height: calc(100vh - 50px); }
  .an-cart__close { top: 0; left: 0; right: 0; width: 100%; height: 50px; padding: 0 20px 0 0; background: #000; display: flex; align-items: center; justify-content: flex-end; }
  .an-cart__close svg { width: 16px; height: 16px; }
}
@media screen and (max-width: 480px) {
  .an-cart__panel { padding: 20px; }
  .an-cart form { margin-bottom: 40px; }
}

.an-check--err { color: #ff0000 !important; }
/* пока открыта корзина, страница под ней не прокручивается */
body.an-lock { overflow: hidden; }
/* докрутив корзину до края, не «цепляем» прокрутку страницы под ней (iPhone) */
.an-cart { overscroll-behavior: contain; }
.an-cart form[hidden], 
/* ── у одного блока артборд не обрезает содержимое (overflow: visible) —
   в оригинале рантайм Тильды в этом случае вешал overflow:hidden на всю ленту
   блоков, иначе на телефонах появляется горизонтальная прокрутка ── */
#allrecords { overflow: hidden; }

/* ── блок-манифест (обложка Тильды t232, не зеро-блок) ──
   В оригинале высоту вёл скрипт: блок — в экран (100vh), а если текст не
   помещается — блок растёт до «текст + поля». Скрипт мерил текст ДО загрузки
   шрифта, поэтому высота у него гуляла от захода к заходу. Здесь то же правило
   статикой: минимум — экран, от края блока до плашки 20px (окно до 568), 60px
   (до 720) или 120px, текст по центру. Сверено с рантаймом Тильды на 93 окнах.
   Слои carrier/filter Тильды (серый градиент под сплошным оранжевым) заменены
   фоном самого блока. */
#rec808700365 .t-cover {
  display: flex;
  align-items: center;
  height: auto !important;
  min-height: 100vh;
  min-height: 100svh;
  background: #ff7324 !important;
}
#rec808700365 .t-cover__carrier,
#rec808700365 .t-cover__filter { display: none; }
#rec808700365 .t203 { flex: 1 1 auto; width: 100%; min-width: 0; }
#rec808700365 .t-cover .t-container { position: relative; top: auto; right: auto; bottom: auto; left: auto; }
#rec808700365 .t-cover__wrapper {
  display: block;
  width: auto;
  height: auto !important;
  padding: 60px 0;                 /* + 60px у .t203__wrapper (page.css) = 120px до плашки */
}
@media screen and (max-width: 720px) {
  #rec808700365 .t-cover__wrapper { padding: 40px 0; }   /* + margin 20px плашки = 60px */
}
@media screen and (max-width: 568px) {
  #rec808700365 .t-cover__wrapper { padding: 0; }        /* остаётся margin 20px плашки */
}

/* ── холст зеро-блока: в нём лежат все элементы артборда. В режиме
   upscale=window его целиком масштабирует transform (правила с шириной и
   коэффициентом для каждого блока и брейкпоинта генерирует сборщик) ── */
.an-canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  transform-origin: top center;
  /* transform создаёт свой контекст наложения: без z-index холст с элементами
     оказался бы ПОД фильтром артборда (у .t396__filter z-index:1) */
  z-index: 2;
}

/* видео Kinescope: пока плеер грузится — чёрная подложка, как у Тильды */
.t396 .tn-elem[data-elem-type="video"] .tn-atom { background-color: #000; }
/* на растянутых артбордах холст увеличивал и сам плеер (кнопка ▶ крупнее и мыльнее,
   чем в оригинале): даём фрейму настоящий размер и уменьшаем обратно */
@media screen and (max-width: 959px) { #rec805544962 .an-video { --an-vk: var(--an-k640, 1); } }
@media screen and (max-width: 639px) { #rec805544962 .an-video { --an-vk: var(--an-k480, 1); } }
@media screen and (max-width: 479px) { #rec805544962 .an-video { --an-vk: var(--an-k320, 1); } }
#rec805544962 .an-video {
  width: calc(100% * var(--an-vk, 1)) !important;
  height: calc(100% * var(--an-vk, 1)) !important;
  transform: scale(calc(1 / var(--an-vk, 1)));
  transform-origin: 0 0;
}

/* ── гифки, заменённые на лёгкие видео ──
   На месте каждой гифки лежит картинка-постер (держит размер, грузится лениво),
   поверх неё — <video>, которое js/anim.js запускает у экрана. Если автозапуск
   запрещён, рантайм заменяет ролик запасной анимированной картинкой. */

/* гифка была ФОНОМ фигуры (background-size: cover по центру) — то же самое
   делает object-fit; скругление фигуры обрезает вложенное */
.an-bgbox { position: relative; overflow: hidden; }
/* цвет подложки фигуры просвечивал тонкой каймой по скруглённому краю (у Тильды
   цвет и картинка были фоном одного элемента) — убираем подложку на 1px под картинку */
.t396 .tn-elem .tn-atom.an-bgbox { background-clip: content-box; padding: 1px; box-sizing: border-box; }
.an-bgmedia {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: inherit;
}

/* мозаика на окнах 640–1199: плитка срезает кадр на долю строки меньше, чем поле
   холста гифки, и по низу ролика проступала серая строка — расширяем на 1px */
@media screen and (min-width: 640px) and (max-width: 1199px) {
  #rec805544953 .an-bgbox > .an-poster,
  #rec805544953 .an-bgbox > .an-poster ~ .an-bgmedia { top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
}

/* гифка была картинкой-элементом: постер ведёт себя как прежний <img>,
   ролик лежит ровно поверх него */
.t396 .tn-elem[data-elem-type="image"] .tn-atom { position: relative; }
.t396 img.tn-atom__img[width] { height: auto; object-fit: cover; object-position: left top; }
.t396 .tn-atom__img.an-over {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: left top;
}
.an-vid { pointer-events: none; }
/* без JavaScript ролик запустить некому, а пустой <video> браузер рисует тёмной
   панелью плеера поверх постера — прячем его (класс an-js ставит скрипт в <head>) */
html:not(.an-js) video.an-vid { display: none; }


/* ── опечатки геометрии оригинала на базовом артборде 1200 (меньшие артборды
   правятся в ELEM_OVERRIDES сборщика, базовый — только здесь) ── */
@media screen and (min-width: 1200px) {
  /* плитка портфолио стояла на 720 при столбце 723 */
  #rec805544959 .t396__artboard .tn-elem[data-elem-id="1720453389148"] { left: calc(50% - 600px + 723px); }
}

/* ── Описания картинок (alt, сборщик: apply_alts) ──
   Если картинка не загрузилась, браузер печатает на её месте alt — в абсолютной
   вёрстке блоков это текст поверх соседей. Делаем его прозрачным: место остаётся
   пустым, как было при пустых alt; поисковики и программы чтения alt видят.
   Стили заголовка h1/h3 живут не здесь, а в <style> самой страницы (seo_headings). */
.t396 img { color: transparent; }