/* yandexpro: a finite, progressively enhanced instrument. */
:root { --motion-scene: 900ms; }
/* A1 (MOTION-CONTRACT-2): до старта motion.js hero и шапка скрыты CSS-входом с задержкой 1100 мс
   (без JS страница соберётся сама), при JS — классом motion-waiting до общего старта сборки. */
html:not(.motion-ready) :is([data-motion], .site-header .ad-brand, .site-header .header-nav > a) { animation: motion-enter var(--motion-hero) var(--motion-enter) 1100ms 1 backwards; }
.motion-ready [data-motion] { animation: none; }
html.motion-waiting :is(.hero-copy > :is([data-motion], .hero-label, .hero-author, h1, .hero-lead), .hero-copy > .attention-actions, .attention-card, .site-header .ad-brand, .site-header .header-nav > a) { opacity: 0; }
.motion-ready .attention-card.motion-pending { opacity: 0; }
.motion-word { display: inline-block; }
.motion-ready :is(a, button, input, textarea, summary, .field, .dark-field) { transition-property: transform, opacity; }
.motion-ready .motion-resize, .motion-ready .motion-answer.is-sizing { transition: none; }
.motion-ready .calc { height: auto !important; }
.motion-ready .calc-top.motion-leave, .motion-ready .calc-top.motion-arrive { animation: none; }
.motion-ready .report-panel.is-entering { animation: none; }
.motion-ready .attention-card { transform-origin: 50% 15%; }
.motion-ready .attention-card > ol > li { position: relative; color: var(--pencil); }
.motion-ready .attention-card > ol > li.is-lit { color: var(--ink); }
.motion-ready .attention-card > ol > li::before { color: var(--pencil); }
.motion-ready .attention-card > ol > li.is-lit::before { color: var(--brick); }
.motion-ready .attention-card > ol > li::after {
  content: ''; position: absolute; inset: 4px -8px; border: 1px solid var(--hair);
  pointer-events: none; opacity: 0;
}
.motion-ready .attention-card > ol > li.is-lighting::after { animation: motion-check-light var(--motion-scene) var(--motion-breath) both; }
@keyframes motion-check-light { 0%, 100% { opacity: 0; } 30% { opacity: .7; } }

/* Buttons keep their existing palette and hit areas. */
.motion-ready .attention-primary { position: relative; transform: translate(var(--magnet-x, 0px), var(--magnet-y, 0px)); transition: transform var(--motion-medium) var(--motion-reveal); }
.motion-ring { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; }
.motion-ready .attention-primary > span { display: inline-block; transition: transform var(--motion-small) var(--motion-response); }
.motion-ready .attention-primary:active { transform: translate(var(--magnet-x, 0px), var(--magnet-y, 0px)) scale(.985); transition-duration: var(--motion-press); }
.motion-ready .chip:active { transform: scale(.96) !important; transition-duration: var(--motion-press); }
@media (hover: hover) {
  .motion-ready .attention-primary:hover > span { transform: translate(2px, -2px); }
  .motion-ready .btn:hover svg { transform: translate(2px, -2px); }
}
@media (hover: none) {
  .attention-primary:hover { background: #a14120; }
  .price-cta a:hover { opacity: 1; }
}

/* Decorations occupy no flow space. */
/* B: маршрут «от спроса до заявки» — тонкая терракотовая линия от курсива заголовка к кнопке; C1: тёплый свет в hero. */
.motion-ready .hero-grid { position: relative; }
.motion-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.motion-route path { fill: none; stroke: var(--brick); stroke-linecap: round; stroke-linejoin: round; }
.motion-route-line { stroke-width: 1.2px; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .8; }
.motion-route-run { stroke-width: 3px; stroke-dasharray: .045 1.2; stroke-dashoffset: .08; opacity: 0; }
.motion-light { position: absolute; left: 30%; top: -20%; width: 60vw; height: 60vw; border-radius: 50%; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(234, 225, 200, .5) 0%, rgba(234, 225, 200, .22) 38%, rgba(234, 225, 200, 0) 68%); }
.motion-ready :is(.direct-workbench, .contact-box) { position: relative; isolation: isolate; }
.motion-lamp { display: none; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; }
@media (pointer: fine) and (hover: hover) {
  .motion-ready .motion-lamp { display: block; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(242,235,217,.08), transparent 75%); transition: opacity var(--motion-medium) var(--motion-response); }
  .motion-ready .is-lit-by-pointer > .motion-lamp { opacity: 1; }
}
.site-header.is-scrolled { background: var(--canvas); border-bottom-color: var(--hair); }

/* G5 explicitly permits the grid-height transition; there are no height tweens. */
.motion-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--motion-medium) var(--motion-response); }
.motion-fold > .motion-fold-inner { min-height: 0; overflow: hidden; }
.motion-fold.is-collapsed { grid-template-rows: 0fr; }
.motion-ready .motion-disclosure > summary::after { transition: transform var(--motion-small) var(--motion-response); }
.motion-ready .attention-options.motion-disclosure > summary::after { content: '+'; transform: rotate(0deg); }
.motion-ready .attention-options.motion-disclosure[data-motion-open="true"] > summary::after { transform: rotate(45deg); }
.motion-ready .doubt .motion-answer { height: auto !important; }
.motion-ready .forecast-note.motion-note { margin: 0; padding: 0; max-width: 78ch; }
.motion-note > .motion-fold-inner { display: block; font-size: inherit; text-transform: none; letter-spacing: normal; margin: 0; color: inherit; }
.motion-note .motion-note-copy { display: block; padding: 0 44px 20px 0; }
.motion-note .motion-note-copy > span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; color: #e9a17b; }

.motion-ready .forecast-rows { --range-axis: 144px; --range-arrow: 32px; }
.motion-ready .forecast-row { position: relative; }
.motion-ready .query-range { display: inline-block; position: relative; text-align: right; }
.range-bar { position: absolute; pointer-events: none; bottom: -6px; right: calc(var(--range-arrow) + (1 - var(--range-max)) * var(--range-axis)); width: calc((var(--range-max) - var(--range-min)) * var(--range-axis)); height: 3px; background: #c9784f; opacity: .78; transform-origin: left center; }
.motion-ready .report-tabs { position: relative; }
.motion-ready .direct-workbench .report-tabs button[aria-selected="true"] { border-bottom-color: transparent; }
.motion-tab-line { position: absolute; left: 0; bottom: -1px; width: 1px; height: 3px; background: #c9784f; pointer-events: none; transform-origin: left center; transform: translateX(var(--tab-x, 0px)) scaleX(var(--tab-width, 0)); transition: transform var(--motion-medium) var(--motion-response); }
.motion-panels { position: relative; min-height: var(--panels-height, 0px); }
.motion-ready .report-panel.motion-tab-leaving[hidden] { display: block !important; position: absolute; inset: 0 0 auto; pointer-events: none; }
.motion-ready .report-panel.motion-measure[hidden] { display: block !important; position: absolute; inset: 0 0 auto; visibility: hidden; pointer-events: none; }
.motion-ready .calc-count { position: relative; }
.motion-ready #stepNum { display: inline-block; position: relative; }
.motion-step-old { position: absolute; pointer-events: none; top: 4px; left: 10px; }
.motion-progress { position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--brick); transform-origin: left center; transform: scaleX(var(--calc-progress, .333333)); transition: transform var(--motion-medium) var(--motion-response); }
.motion-field-flash { position: absolute; pointer-events: none; inset: -1px; border: 1px solid var(--brick); border-radius: inherit; opacity: 0; }
.motion-ready .how-list { position: relative; }
.motion-ready .how-card:not(:last-child)::after { content: ''; position: absolute; top: 50px; left: 100%; width: 30px; height: 1px; background: var(--brick); opacity: .5; transform-origin: left; transform: scaleX(0); transition: transform 700ms var(--motion-enter); }
.motion-ready #how.is-in .how-card:not(:last-child)::after { transform: scaleX(1); }
@supports (animation-timeline: view()) {
  .motion-ready #how .how-card:not(:last-child)::after { animation: motion-link-grow linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  @keyframes motion-link-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (min-width: 721px) and (max-width: 1120px) {
  .motion-ready .how-card:nth-child(2)::after { display: none; }
}
@media (max-width: 720px) {
  .motion-ready .forecast-rows { --range-axis: 96px; --range-arrow: 18px; }
  .motion-fold { transition-duration: calc(var(--motion-medium) * .7); }
  .motion-note .motion-note-copy { padding: 0 0 17px; }
  .motion-ready .how-card:not(:last-child)::after { top: 100%; left: 41px; width: 1px; height: 16px; transform-origin: top; transform: scaleY(0); }
  .motion-ready #how.is-in .how-card:not(:last-child)::after { transform: scaleY(1); }
  @supports (animation-timeline: view()) {
    .motion-ready #how .how-card:not(:last-child)::after { animation-name: motion-link-grow-mobile; }
    @keyframes motion-link-grow-mobile { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}
/* Pausing the original ambient loops also avoids background-tab work. */
html.motion-suspended *, html.motion-suspended *::before, html.motion-suspended *::after { animation-play-state: paused !important; transition: none !important; }
html.no-anim *, html.no-anim *::before, html.no-anim *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.no-anim :is([data-motion], .motion-step, .forecast-row, .report-panel, .attention-card, #stepNum) { opacity: 1 !important; transform: none !important; clip-path: none !important; }
html.no-anim :is(.attention-primary, .attention-primary > span, .btn, .btn svg, .chip) { transform: none !important; }
html.no-anim :is(.site-header .ad-brand, .site-header .header-nav > a, .hero-copy > *, .motion-word, .hero-label i, .attention-primary, .attention-actions > *) { opacity: 1 !important; transform: none !important; translate: none !important; }
html.no-anim .motion-route-line { stroke-dashoffset: 0 !important; }
html.no-anim .motion-route-run, html.no-anim .motion-light { display: none; }
html.no-anim .motion-lamp { display: none; }
html.no-anim .how-card::after { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  :is([data-motion], .motion-step, .forecast-row, .report-panel, .attention-card, #stepNum) { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  :is(.attention-primary, .attention-primary > span, .btn, .btn svg, .chip) { transform: none !important; }
  :is(.site-header .ad-brand, .site-header .header-nav > a, .hero-copy > *, .motion-word, .hero-label i, .attention-card, .attention-actions > *) { opacity: 1 !important; transform: none !important; translate: none !important; }
  .motion-route-line { stroke-dashoffset: 0 !important; }
  .motion-route-run, .motion-light { display: none !important; }
  .motion-lamp { display: none !important; }
  .how-card::after { transform: none !important; }
}

/* Подчёркивание курсива заголовка: статично 100 %, при сборке прячется классом motion-assembling и рисуется
   слева направо по классу motion-inked сразу после последнего слова h1. */
h1 em {
  background-image: linear-gradient(var(--brick, #b5452a), var(--brick, #b5452a));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - .04em);
  background-size: 100% .05em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
h1.motion-assembling em { background-size: 0% .05em; }
@media (prefers-reduced-motion: no-preference) {
  html.motion-ready:not(.no-anim) h1.motion-inked em { animation: motion-underline 520ms cubic-bezier(.2, .7, .2, 1) both; }
}
html.no-anim h1 em { animation: none !important; background-size: 100% .05em !important; }
@media (prefers-reduced-motion: reduce) {
  h1 em { animation: none !important; background-size: 100% .05em !important; }
}
@keyframes motion-underline {
  from { background-size: 0% .05em; }
  to { background-size: 100% .05em; }
}

/* C: дыхание после сборки — только под html.motion-alive (ставит JS), пауза при скрытой вкладке (motion-suspended)
   и когда hero ушёл с экрана (motion-hero-away). Амплитуды ≤ 4px, периоды ≥ 3 с; под reduce/no-anim выключено выше. */
html.motion-alive .motion-light { opacity: 1; transition: opacity 1600ms var(--motion-breath); animation: motion-light-drift 14s var(--motion-breath) infinite alternate; }
@keyframes motion-light-drift { from { transform: translate(-4%, -3%); } to { transform: translate(4%, 3%); } }
html.motion-ready.motion-alive .attention-card { animation: motion-card-float 7s var(--motion-breath) infinite alternate; }
@keyframes motion-card-float { from { translate: 0 3px; } to { translate: 0 -3px; } }
html.motion-alive .hero-label i { animation: motion-dot-breath 3s var(--motion-breath) infinite alternate; }
@keyframes motion-dot-breath { from { opacity: .6; } to { opacity: 1; } }
html.motion-alive .attention-primary > span { animation: motion-arrow-step 8s var(--motion-response) 3s infinite; }
@keyframes motion-arrow-step { 0%, 10%, 100% { translate: 0 0; } 5% { translate: 2px -2px; } }
html.motion-alive .motion-route-run { opacity: .95; animation: motion-route-run 8s linear 1200ms infinite; }
@keyframes motion-route-run {
  0% { stroke-dashoffset: .08; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  17.5%, 100% { stroke-dashoffset: -1.06; }
}
html.motion-hero-away :is(.motion-light, .attention-card, .hero-label i, .attention-primary > span, .motion-route-run) { animation-play-state: paused; }