/* mfx.css — мобильный слой движения (пара к mfx.js). Классы ставит только скрипт, без него ничего не меняется.
   Появления — анимациями с fill-mode backwards: после конца у элемента снова родные opacity/translate страницы. */
.mfx{--mfx-e:cubic-bezier(.2,.8,.2,1);--mfx-d:900ms;--mfx-x:44px;--mfx-y:22px;--mfx-rot:4deg;--mfx-st:55ms;--mfx-zoom:1.14}
/* характер по нише: спокойные (психолог, онлайн-врач, медцентр) — мягче и снизу; ветклиника — живее; стройка и
   недвижимость — крупнее и медленнее, «архитектурно» */
.mfx body.tk,.mfx body.vs,.mfx body.su{--mfx-d:1100ms;--mfx-x:0px;--mfx-y:28px;--mfx-rot:0deg;--mfx-st:70ms;--mfx-zoom:1.08}
.mfx body.hn{--mfx-e:cubic-bezier(.34,1.4,.64,1);--mfx-d:800ms;--mfx-rot:7deg;--mfx-st:45ms}
.mfx body.d1,.mfx body.d4,.mfx body.se{--mfx-d:1200ms;--mfx-x:64px;--mfx-rot:0deg;--mfx-st:80ms;--mfx-zoom:1.2}
.mfx body.bl,.mfx body.d2,.mfx body.d3{--mfx-x:40px;--mfx-rot:3deg}

/* 1. заголовки: свои теги, чтобы стили страниц для span (плашки, цвет) не ложились на каждое слово */
.mfx mfx-m{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.mfx mfx-w{display:inline-block;transform:translate3d(0,108%,0) rotate(var(--mfx-rot));transform-origin:0 100%;transition:transform var(--mfx-d) var(--mfx-e) calc(var(--i,0) * var(--mfx-st))}
.mfx .mfx-h.mfx-in mfx-w{transform:none}
/* 2. абзацы */
.mfx .mfx-p:not(.mfx-in){opacity:0}
.mfx .mfx-p.mfx-in{animation:mfx-up var(--mfx-d) var(--mfx-e) 120ms backwards}
@keyframes mfx-up{from{opacity:0;translate:0 var(--mfx-y)}}
/* 3. фото */
.mfx .mfx-img{transition:clip-path 1100ms var(--mfx-e),transform 1400ms var(--mfx-e)}
.mfx .mfx-img.mfx-l{clip-path:inset(0 100% 0 0)}
.mfx .mfx-img.mfx-r{clip-path:inset(100% 0 0 0)}
.mfx .mfx-img.mfx-solo{transform:scale(var(--mfx-zoom))}
.mfx .mfx-img.mfx-in{clip-path:inset(0 0 0 0)}
.mfx .mfx-img.mfx-solo.mfx-in{transform:scale(1.1)}
.mfx .mfx-img.mfx-live{transition:none;will-change:transform}
/* 4. карточки и пункты */
.mfx .mfx-c:not(.mfx-in){opacity:0}
.mfx .mfx-c.mfx-in{animation:mfx-l var(--mfx-d) var(--mfx-e) calc(var(--i,0) * 70ms) backwards}
.mfx .mfx-c.mfx-r.mfx-in{animation-name:mfx-r}
@keyframes mfx-l{from{opacity:0;translate:calc(var(--mfx-x) * -1) var(--mfx-y)}}
@keyframes mfx-r{from{opacity:0;translate:var(--mfx-x) var(--mfx-y)}}
/* 5. кнопки: блик и нажатие */
.mfx .mfx-b{transition:scale 160ms ease-out}
.mfx .mfx-b:active{scale:.97}
.mfx .mfx-sh{position:absolute;top:-20%;bottom:-20%;left:0;width:45%;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 0,rgba(255,255,255,.08) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.08) 70%,transparent 100%);transform:translate3d(-130%,0,0) skewX(-18deg);mix-blend-mode:soft-light}
.mfx .mfx-b.mfx-in .mfx-sh{animation:mfx-shine 5.5s cubic-bezier(.4,0,.2,1) 1.2s infinite}
@keyframes mfx-shine{0%{transform:translate3d(-130%,0,0) skewX(-18deg)}20%,100%{transform:translate3d(330%,0,0) skewX(-18deg)}}
/* 7. полоса прогресса */
.mfx-bar{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;background:currentColor;transform:scaleX(0);transform-origin:0 50%;pointer-events:none;opacity:.9}
@media (prefers-reduced-motion:reduce){.mfx-bar{display:none}}