/* Motion is an enhancement: no JS means the original, fully visible page. */
:root { --motion-scene: 900ms; }
/* The existing page also contains height/colour transitions. Keep the entire
   enhancement on compositor-safe properties, including those inherited rules. */
*, *::before, *::after {
  transition-property: transform, opacity, clip-path, background-position !important;
}
/* Only G5 disclosures and the absolute scan tape may interpolate grid rows. */
.motion-details-grid, .wb-scan {
  transition-property: grid-template-rows, opacity !important;
}
html:not(.motion-enabled) .hero::after,
html:not(.motion-enabled) .auction::after { animation: none !important; }
[data-motion] { animation: none; }
.hero-shell::before { animation: none; }
/* Контракт 2, A1 (26.09): без JS hero собирается сам через 1,1 с; с JS вход ведёт WAAPI-хореография (motion.js),
   а до неё страница стоит в состоянии «ждёт» — ни одного кадра с текстом hero до его входа. */
html:not(.motion-ready) [data-motion] { animation: motion-enter var(--motion-hero) var(--motion-enter) 1100ms 1 backwards; }
html.motion-waiting :is(.site-header .ad-brand, .site-header .wordmark, .header-nav a, .hero-label, .hero-person, #hero-title, .hero-lead,
  .attention-actions > *, .attention-options, .workbench-stage, .specimen-caption, .hero-bottom) {
  animation: motion-enter var(--motion-hero) var(--motion-enter) 1100ms 1 both;
}
.workbench-stage.motion-panel-wait { opacity: 0; }
.motion-word { display: inline-block; }
.attention-primary { position: relative; }
.motion-ring { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; }
.motion-reveal { opacity: 1; transform: none; }
html.motion-enabled .motion-pending .motion-reveal {
  opacity: 0;
  transform: translateY(12px);
}
html.motion-enabled .is-in .motion-reveal {
  transition: opacity var(--motion-hero) var(--motion-enter), transform var(--motion-hero) var(--motion-enter);
  transition-delay: var(--motion-delay, 0ms);
}
.site-header { isolation: isolate; }
.site-header::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--paper); border-bottom: 1px solid var(--rule); opacity: 0;
  transition: opacity var(--motion-medium) var(--motion-response);
}
.site-header.is-scrolled::after { opacity: .72; }
.attention-primary, .primary {
  --magnet-x: 0px; --magnet-y: 0px;
  transform: translate(var(--magnet-x), var(--magnet-y));
  transition: transform var(--motion-medium) var(--motion-reveal);
}
.attention-primary > span, .primary svg { display: inline-block; transition: transform var(--motion-small) var(--motion-response); }
@media (hover: hover) {
  .attention-primary:hover > span,
  .primary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"] *):hover svg { transform: translate(2px, -2px); }
}
@media (hover: hover) and (pointer: fine) {
  .primary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"] *):hover { transform: translate(var(--magnet-x), var(--magnet-y)); }
}
.attention-primary:active,
.primary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"] *):active {
  transform: translate(var(--magnet-x), var(--magnet-y)) scale(.985);
  transition-duration: var(--motion-press);
}
.motion-lamp {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgb(242 235 217 / .09), transparent 72%);
  transition: opacity var(--motion-medium) var(--motion-response);
}
@media (pointer: fine) {
  html.motion-enabled .motion-lamp-on > .motion-lamp { opacity: 1; }
}
/* The scan lives in the existing result footprint; it never pushes text below. */
.wb-selection { position: relative; isolation: isolate; }
.wb-selection > strong, .wb-selection > p { position: relative; z-index: 1; }
.wb-scan {
  position: absolute; top: 8px; left: 8px; right: 8px; height: var(--scan-height, 83px); display: grid; grid-template-rows: 1fr;
  pointer-events: none; overflow: clip; opacity: .9; z-index: 0;
  transition: grid-template-rows var(--motion-medium) var(--motion-exit), opacity var(--motion-medium) var(--motion-exit);
}
.wb-scan.is-folded { grid-template-rows: 0fr; opacity: 0; }
.wb-scan-body { position: relative; min-height: 0; overflow: hidden; }
.wb-scan-row {
  height: 6px; margin-bottom: 3px; width: 100%;
  background: rgb(242 235 217 / .08); transform-origin: left;
}
.wb-scan-line {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--canvas), transparent); opacity: .45;
}
/* B (26.09): взгляд покупателя — пятно света идёт по ленте вместе с линией сканера. */
.wb-scan-gaze {
  position: absolute; top: 0; left: 50%; width: 220px; height: 180px; margin: -90px 0 0 -110px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(242 235 217 / .12), transparent);
}
.wb-selection::after {
  content: ''; position: absolute; inset: -1px; border: 1px solid var(--light);
  border-radius: inherit; pointer-events: none; opacity: 0; transform-origin: center;
}
/* B: фокус-лок — рамка сжимается 106% → 100% за 240 мс и «щёлкает». */
.wb-selection.motion-lock::after { animation: motion-lock 600ms var(--motion-response); }
@keyframes motion-lock {
  0% { opacity: 0; transform: scale(1.06); }
  40% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.wb-miss { position: absolute; right: 14px; bottom: 6px; opacity: .55; color: var(--dust); }
.motion-number.motion-number { display: inline-block; position: relative; font: inherit; letter-spacing: inherit; color: inherit; font-variant-numeric: tabular-nums; }
.motion-number > .motion-number-source { display: inline; font: inherit; letter-spacing: inherit; color: inherit; opacity: 0; }
.motion-number > .motion-number-display { position: absolute; inset: 0; font: inherit; letter-spacing: inherit; color: inherit; white-space: pre; }
.wb-cell { transition: transform var(--motion-medium) var(--motion-response); }
.wb-tab { transition: transform var(--motion-small) var(--motion-response); }
.wb-cell::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px;
  background: var(--dust); opacity: .55; transform-origin: left;
}
.wb-cell[data-band="top"]::after { background: var(--light); }
.wb-cell[data-band="middle"]::after { background: var(--pencil); }
.wb-cell[aria-pressed="true"]::after { background: var(--light); opacity: 1; }
.wb-cell.motion-cell-in::after {
  animation: motion-band var(--motion-small) var(--motion-response) var(--band-delay, 0ms) backwards;
}
@keyframes motion-band { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); } }
.auction-explained article { position: relative; }
.auction-motion-bar {
  position: absolute; left: 24px; right: 24px; bottom: 9px; height: 2px;
  background: var(--light); transform: scaleX(var(--bid-ratio, 1)); transform-origin: left;
}
.diagnosis-strip article { position: relative; }
.diagnosis-strip article + article::before {
  content: ''; position: absolute; left: -43px; top: 8px; width: 42px; height: 1px;
  background: var(--brick); opacity: .45; transform: scaleX(1); transform-origin: left;
}
html.motion-enabled .diagnosis-strip.motion-pending article + article::before { transform: scaleX(0); }
html.motion-enabled .diagnosis-strip.is-in article + article::before {
  transition: transform 700ms var(--motion-enter); transition-delay: var(--motion-delay, 0ms);
}
@supports (animation-timeline: view()) {
  html.motion-enabled .diagnosis-strip.is-in article + article::before {
    animation: motion-connect linear both;
    animation-timeline: view(); animation-range: entry 0% entry 90%;
  }
  @keyframes motion-connect { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
/* G5 is the contract's explicit layout-property exception. */
.motion-details-grid { display: grid; grid-template-rows: 0fr; }
.motion-details-grid.is-open { grid-template-rows: 1fr; }
.motion-details-body { min-height: 0; overflow: hidden; }
html.motion-enabled .motion-details-grid { transition: grid-template-rows var(--motion-medium) var(--motion-response); }
.motion-details[data-motion-opening="false"] > summary::after,
.motion-details[data-motion-opening="false"] > summary > span { transform: rotate(0); }
summary::after, .wb-explore summary > span, .auction-source summary > span {
  transition: transform var(--motion-small) var(--motion-response);
}
.attention-options[open] > summary::after { content: '+'; transform: rotate(45deg); }
/* Existing assets include unrestricted hover rules. Neutralise those on touch. */
@media (hover: none) {
  .attention-primary:hover { background: #a14120; }
  .wb-tab:hover { color: var(--wb-muted); background: transparent; }
  .wb-tab[aria-pressed="true"]:hover { background: #3e261d; color: #f2ebd9; }
  .wb-cell:hover { border-color: #35332f; }
  .wb-cell[data-band="top"]:hover { border-color: #78513b; }
  .wb-cell[data-band="middle"]:hover { border-color: #565044; }
  .wb-cell[aria-pressed="true"]:hover { border-color: #cc5f35; }
  .wb-footer a:hover { color: #e8e2d0; }
}
@media (max-width: 767px) {
  .auction-motion-bar { left: 17px; right: 17px; bottom: 6px; }
  .diagnosis-strip article + article::before { left: 1px; top: -25px; width: 1px; height: 24px; transform-origin: top; }
  html.motion-enabled .diagnosis-strip.motion-pending article + article::before { transform: scaleY(0); }
  @supports (animation-timeline: view()) {
    html.motion-enabled .diagnosis-strip.is-in article + article::before { animation-name: motion-connect-mobile; }
    @keyframes motion-connect-mobile { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::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 .motion-reveal, html.no-anim [data-motion], html.no-anim .motion-number-source,
html.no-anim .motion-word, html.no-anim .motion-panel-wait { opacity: 1 !important; transform: none !important; }
html.no-anim .motion-number-display, html.no-anim .wb-scan, html.no-anim .motion-lamp,
html.no-anim .motion-drift, html.no-anim .motion-radar, html.no-anim .motion-ring { display: none !important; }
html.no-anim :is(a, button, input, textarea, summary):not(.skip) { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .motion-details-grid, .wb-scan { transition: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motion-reveal, [data-motion], .motion-number-source, .motion-word, .motion-panel-wait { opacity: 1 !important; transform: none !important; }
  .motion-number-display, .wb-scan, .motion-lamp, .motion-drift, .motion-radar, .motion-ring { display: none !important; }
  h1 em { background-size: 100% .05em !important; }
  :is(a, button, input, textarea, summary):not(.skip) { transform: none !important; }
}

/* Добавка 26.09 (Fable): карандашная линия под курсивной фразой заголовка рисуется слева направо после входа заголовка. */
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;
}
/* Контракт 2, A2: JS ставит motion-assembling при старте (линии нет) и motion-inked сразу после последнего слова. */
h1.motion-assembling em { background-size: 0% .05em; }
@media (prefers-reduced-motion: no-preference) {
  html.motion-enabled h1.motion-inked em { animation: motion-underline 720ms cubic-bezier(.2, .7, .2, 1) both; }
}
html.no-anim h1 em { animation: none !important; background-size: 100% .05em !important; }
@keyframes motion-underline {
  from { background-size: 0% .05em; }
  to { background-size: 100% .05em; }
}

/* ── Контракт 2, C: дыхание. Всё под html.motion-alive (ставит JS после сборки), пауза вне экрана и в скрытой вкладке.
   Амплитуды: сдвиг ≤ 4 px, opacity ≤ .12, период ≥ 2,4 с. ────────────────────────────────────────────── */
.motion-drift {
  position: absolute; left: -6%; top: -18%; width: 60vw; height: 60vw; max-width: 880px; max-height: 880px;
  z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(234 225 200 / .45), transparent);
}
html.motion-alive .motion-drift { animation: motion-drift 14s var(--motion-breath) infinite alternate; }
@keyframes motion-drift { from { transform: translate(-4%, -3%); } to { transform: translate(4%, 3%); } }
/* C2: раз в 8 с стрелка ↗ делает шаг и возвращается; при наведении работает обычный hover-сдвиг. */
html.motion-alive .attention-primary > span { animation: motion-arrow-step 8s var(--motion-response) infinite; }
@keyframes motion-arrow-step {
  0%, 100% { transform: translate(0, 0); }
  2.5% { transform: translate(2px, -2px); }
  5% { transform: translate(0, 0); }
}
@media (hover: hover) { html.motion-alive .attention-primary:hover > span { animation: none; } }
/* C3: стрелка ↓ в hero-bottom покачивается, пока hero в экране. */
html.motion-alive .hero-bottom a span { display: inline-block; animation: motion-bob 2.4s var(--motion-breath) infinite; }
@keyframes motion-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
/* B, дыхание инструмента: кольцо-радар из строки запроса раз в 7 с, блик «повторная проверка» по плашке раз в 9 с,
   тёмная карточка плывёт ±3 px за 7 с. */
.wb-query { position: relative; }
.motion-radar {
  position: absolute; left: 16px; bottom: 24px; width: 10px; height: 10px; margin: 0 0 -5px -5px;
  border-radius: 50%; border: 1px solid var(--canvas, #f2ebd9); opacity: 0; pointer-events: none;
}
html.motion-alive .motion-radar { animation: motion-radar 7s cubic-bezier(.2, .6, .3, 1) infinite; }
@keyframes motion-radar {
  0% { transform: scale(.4); opacity: .3; }
  17% { transform: scale(7); opacity: 0; }
  100% { transform: scale(7); opacity: 0; }
}
.wb-selection::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 0 40%, rgb(240 213 184 / .09) 50%, transparent 60% 100%);
  background-size: 300% 100%; background-position: 0% 0;
}
html.motion-alive .wb-selection::before { animation: motion-sheen 9s linear infinite; }
@keyframes motion-sheen { 0% { background-position: 0% 0; } 12% { background-position: 100% 0; } 100% { background-position: 100% 0; } }
html.motion-alive .wb { animation: motion-float 7s var(--motion-breath) infinite; }
@keyframes motion-float {
  0%, 50%, 100% { transform: translateY(0); }
  25% { transform: translateY(-3px); }
  75% { transform: translateY(3px); }
}
/* C4: hero вне экрана — дыхание стоит (класс ставит IntersectionObserver на .hero-shell). */
html.motion-hero-away :is(.motion-drift, .attention-primary > span, .hero-bottom a span, .wb, .motion-radar),
html.motion-hero-away .wb-selection::before { animation-play-state: paused; }
@media (max-width: 767px) {
  .motion-radar { left: 12px; bottom: 22px; }
  .motion-drift { width: 90vw; height: 90vw; left: -20%; top: -10%; }
}