/* ══ v10 · кнопка записи «заливка металлом» и момент первого экрана ══ */

/* Кнопка записи (класс btn-fill в разметке: две кнопки первого экрана, Telegram в #zapis, «Записаться» нижней полосы).
   Металл знака въезжает снизу, подпись и иконка переходят в чернила (контраст 7.96), кольцо 1px металла, тень --float.
   Идея fill-on-hover из каталогов Magic UI / Cult UI (MIT), переписано на clip-path, код свой. */
html .btn-main.btn-fill::before{background:var(--metal);transform:none;clip-path:inset(100% 0 0 0);transition:clip-path 250ms var(--ease-out-quart)}
@media (hover:hover){
  html .btn-main.btn-fill:hover{color:var(--ink);box-shadow:0 0 0 1px var(--metal),var(--float)}
  html .btn-main.btn-fill:hover::before{transform:none;clip-path:inset(0);transition:clip-path 300ms var(--ease-out-quint)}
}
/* нажатие после наведения: при равной специфичности побеждает порядок */
html .btn-main.btn-fill:active{color:var(--ink);transform:scale(.97)}
html .btn-main.btn-fill:active::before{clip-path:inset(0);transition:clip-path 100ms var(--ease-out-quart)}

/* Первый экран и блоки 2-3: один заметный момент (слова заголовка из размытия, мини-видео из угла)
   и два тихих появления разных типов (проявление и маска слева направо); одинаковых подряд не больше трёх.
   Кнопки первого экрана на месте к 590 мс (около 300 мс запаса до 900 мс на загрузку видео). Идеи: motion-lexicon, kylezantos/design-motion-principles (MIT), код свой. */
.h-words .h-word{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  /* туман первого экрана снят: его роль забирает момент заголовка */
  .stage .fog-in{animation:none;opacity:0}
  /* каскад миниатюр «Работ» при загрузке не играет (его не видно); после смены зоны пользователем работает, как в v9 */
  html:not(.th-zoned) .w-th.is-in{animation:none}
  .h-words .h-word{animation:hWord 700ms var(--ease-out-expo) calc(var(--w,0) * 110ms) backwards}
  .stage .lead{animation:inFade 450ms var(--ease-out-quart) 50ms backwards}
  .stage .sig{animation:inFade 450ms var(--ease-out-quart) 95ms backwards}
  .stage .ctas{animation:inFade 450ms var(--ease-out-quart) 140ms backwards}
  /* панель записи и мини-видео — после последнего слова заголовка (4 слова: 330 + 700 = 1030 мс),
     чтобы одновременно двигалось не больше трёх групп: слова, текстовый ряд, портрет → портрет, панель, мини-видео */
  .stage .booking{animation:inMask 700ms var(--ease-out-quint) 1050ms backwards}
  .stage .mini-slot{transform-origin:0 100%;animation:inCorner 750ms var(--ease-out-expo) 1100ms backwards}
  /* блоки 2-3: assets/b4.js ставит data-in и, когда блок входит в экран, is-shown (один раз) */
  [data-in]:not(.is-shown){opacity:0}
  [data-in="f"].is-shown{animation:inFade 500ms var(--ease-out-quart) backwards}
  [data-in="m"].is-shown{animation:inMask 700ms var(--ease-out-quint) backwards}
}
@media (prefers-reduced-motion:reduce){
  .h-words .h-word,[data-in]{opacity:1;transform:none;filter:none;clip-path:none;animation:none}
}
@keyframes hWord{from{opacity:0;filter:blur(10px);transform:translateY(.22em)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes inFade{from{opacity:0}to{opacity:1}}
@keyframes inMask{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes inCorner{from{opacity:0;transform:translate(-28px,40px) scale(.84)}to{opacity:1;transform:none}}

/* Кнопка записи без движения: только смена цвета */
@media (prefers-reduced-motion:reduce){
  html .btn-main.btn-fill:active{transform:none;background:var(--metal)}
}
@media (hover:hover) and (prefers-reduced-motion:reduce){
  html .btn-main.btn-fill:hover{background:var(--metal)}
}

/* a5: кадр «сразу после процедуры» в строке «Восстановление» шторки */
.dr-rec-ph{margin:12px 0 0}
.dr-rec-ph figure{display:flex;align-items:center;gap:12px;margin:0}
.dr-rec-ph img{width:88px;height:156px;object-fit:cover;border-radius:12px;flex:none}
.dr-rec-ph figcaption{font-size:14px;line-height:1.45}
/* a5: пара «Веки: до и после» во вкладке «Зона вокруг глаз» — кадр держит веко в центре */
#dp-glaza .cmp{--op:50% 40%}

/* a10 · П38: вкладка «Рубцы и постакне» — на телефоне (окно 4:3) кадр опущен к спине и руке врача; на десктопе окно 9:16 = ролик, сдвига нет */
#dp-rubcy .dir-media video{object-position:50% 90%}