/* ── МОУШН-СЛОЙ САЙТА (2026-10-21) ─────────────────────────────────────────
   Подключается на всех страницах без блокировки отрисовки (media=print → all, см. docs/motion/head_block.py).
   Все состояния ставит /js/motion.js (класс html.mo). Без JS ничего не скрывается.
   Отключить эффекты для блока — атрибут data-no-motion. */

/* Кириллица для Outfit (Onest) и исправление хлебных крошек nav.bc — встроены в каждую страницу
   (<style id="mo-crit"> в начале <head>, см. docs/motion/head_block.py): они нужны для первого кадра,
   а сам этот файл грузится без блокировки отрисовки. */

:root{--mo-e:cubic-bezier(.16,1,.3,1);--mo-teal:#1F5C51;--mo-teal3:#3D9A8A;}

/* 1. Появление блоков: подъём + проявление, каскад через --mo-d */
html.mo .mo-r{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s var(--mo-e),transform .9s var(--mo-e);transition-delay:var(--mo-d,0s);}
html.mo .mo-r.mo-in{opacity:1;transform:none;}

/* 2. Фото раскрываются маской снизу вверх с «отъездом» масштаба */
html.mo .mo-m{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--mo-e);transition-delay:var(--mo-d,0s);}
html.mo .mo-m img,html.mo .mo-m video,html.mo img.mo-m{transform:scale(1.08);transition:transform 1.5s var(--mo-e);transition-delay:var(--mo-d,0s);}
html.mo img.mo-m{transform-origin:50% 60%;}
html.mo .mo-m.mo-in{clip-path:inset(0 0 0 0);}
html.mo .mo-m.mo-in img,html.mo .mo-m.mo-in video,html.mo img.mo-m.mo-in{transform:none;}

/* 3. Блик по курсивному акценту заголовка — один проход при появлении */
html.mo .mo-gloss{background-image:linear-gradient(100deg,var(--mo-c,#1F5C51) 0%,var(--mo-c,#1F5C51) 38%,#d9f3ec 50%,var(--mo-c,#1F5C51) 62%,var(--mo-c,#1F5C51) 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:moGloss 1.6s .25s var(--mo-e) both;}
@keyframes moGloss{from{background-position:100% 0;}to{background-position:0 0;}}

/* 4. Блик по фото при наведении (только мышь) */
html.mo .mo-gl{position:relative;}
html.mo .mo-gl>.mo-sh{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;border-radius:inherit;}
html.mo .mo-gl>.mo-sh::before{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:60%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,.26) 48%,rgba(255,255,255,.06) 56%,transparent 80%);transform:translate3d(-130%,0,0) skewX(-8deg);}
html.mo .mo-gl:hover>.mo-sh::before{transform:translate3d(230%,0,0) skewX(-8deg);transition:transform 1.15s var(--mo-e);}

/* 5. Отблеск стекла, следующий за курсором, на карточках */
html.mo .mo-glare{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .45s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),rgba(255,255,255,0) 60%);mix-blend-mode:soft-light;}
html.mo .mo-tilt:hover>.mo-glare{opacity:1;}

/* 6. Параллакс больших фото — средствами CSS (scroll-driven animations) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    html.mo .mo-px{animation:moPx linear both;animation-timeline:view();animation-range:cover 0% cover 100%;will-change:transform;}
    @keyframes moPx{from{transform:translate3d(0,-5%,0) scale(1.12);}to{transform:translate3d(0,5%,0) scale(1.12);}}
  }
}

/* 7. Полоса прогресса чтения */
.mo-prog{position:fixed;left:0;top:0;width:100%;height:2px;z-index:100000;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--mo-teal),var(--mo-teal3));}

/* 8. Ленивые фото проявляются после загрузки, а не «выскакивают» */
html.mo img.mo-wait{opacity:0;}
html.mo img.mo-fade{transition:opacity .7s ease;}

/* 9. Видео: плавная смена постера на видео */
html.mo video.mo-vwait{opacity:.001;}
html.mo video.mo-vfade{transition:opacity .6s ease;}

/* 10. «До/после» в лентах: одна подсказывающая проводка шторки вместо бесконечной */
html.mo.mo-touch body .bacard .ba-after-layer{animation:none;clip-path:inset(0 50% 0 0);}
html.mo.mo-touch body .bacard .ba-line{animation:none;left:50%;}
html.mo.mo-touch body .bacard{touch-action:pan-y;}
html.mo.mo-touch body .bacard.mo-hint .ba-after-layer{animation:moBaClip 2.4s var(--mo-e) both;}
html.mo.mo-touch body .bacard.mo-hint .ba-line{animation:moBaLine 2.4s var(--mo-e) both;}
html.mo.mo-touch body .bacard.mo-drag .ba-after-layer,html.mo.mo-touch body .bacard.mo-drag .ba-line{animation:none;}
@keyframes moBaClip{0%{clip-path:inset(0 100% 0 0);}45%{clip-path:inset(0 0 0 0);}100%{clip-path:inset(0 50% 0 0);}}
@keyframes moBaLine{0%{left:0%;}45%{left:100%;}100%{left:50%;}}
html.mo.mo-touch .ba-strips-label::after{content:'Проведите пальцем по карточке: слева «до», справа «после»';}
html.mo .ba-cmp:focus-visible{outline:2px solid var(--mo-teal3);outline-offset:3px;}

/* 11. Галерея услуг: «бенто»-ритм и сворачивание длинных галерей */
/* сетка в 3 колонки (≥1025px): первое фото крупно 2×2, последний ряд добирается
   широкой (2 колонки) или панорамной (вся ширина) карточкой — без дыр */
@media (min-width:1025px){
  html.mo .g-grid.mo-bento>.mo-big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;}
  html.mo .g-grid.mo-bento>.mo-w2{grid-column:span 2;aspect-ratio:auto;}
  html.mo .g-grid.mo-bento>.mo-w3{grid-column:1/-1;aspect-ratio:21/9;}
  html.mo .g-grid.mo-bento>.mo-big img,html.mo .g-grid.mo-bento>.mo-w2 img,html.mo .g-grid.mo-bento>.mo-w3 img{position:absolute;inset:0;}
}
/* на телефоне галерея фото сворачивается после 6, видео-сетка — после 4 везде;
   карточки остаются в DOM (SEO), лайтбокс листает все */
@media (max-width:768px){html.mo .g-grid.mo-fold>.g-card:nth-child(n+7){display:none;}}
html.mo .v-grid.mo-fold>.v-card:nth-child(n+5){display:none;}
.mo-more{display:flex;justify-content:center;margin-top:28px;}
.mo-more.mo-more-ph{display:none;}
@media (max-width:768px){.mo-more.mo-more-ph{display:flex;}}
.mo-more button{font:inherit;font-size:14px;letter-spacing:.3px;color:var(--mo-teal);background:transparent;border:1.5px solid rgba(31,92,81,.35);border-radius:100px;padding:13px 28px;cursor:pointer;transition:background .3s var(--mo-e),color .3s,border-color .3s,transform .3s var(--mo-e);}
.mo-more button:hover{background:var(--mo-teal);border-color:var(--mo-teal);color:#fff;transform:translateY(-1px);}

/* 12. Счётчики — цифры не прыгают по ширине */
.mo-num{font-variant-numeric:tabular-nums;}

/* Уменьшение движения: всё статично (и старые бесконечные анимации страниц тоже) */
@media (prefers-reduced-motion: reduce){
  html.mo .mo-r,html.mo .mo-m,html.mo .mo-m img,html.mo .mo-m video,html.mo img.mo-m{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;}
  html.mo .mo-gloss{animation:none!important;-webkit-text-fill-color:currentColor;background:none;}
  html.mo .mo-gl>.mo-sh,html.mo .mo-glare{display:none!important;}
  .strip-track,.ins3-track,.ins1-line,.ba-after-layer,.ba-line,.mq-track,.rev-track,.wcard-shine,.ba-after-shine,.ba-ashd,.ig1,.ig2,.ig3,.ig4,.ffloat{animation:none!important;}
  .strip-row,.ins3-row,.rev-strip{overflow-x:auto!important;}
  html{scroll-behavior:auto!important;}
}

/* Ролик «до/после» на страницах кейсов raboty/ (видео грузит /js/block-media.js в зоне видимости) */
.ba-anim{margin:22px auto 0;max-width:520px;}
.ba-anim-v{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#0f0e0c;box-shadow:0 12px 40px rgba(15,14,12,.12);}
.ba-anim-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.ba-anim figcaption{margin-top:10px;font-size:13px;color:#6A6760;text-align:center;line-height:1.5;}

/* Ролик «до/после» первой плиткой галереи (.g-card.g-ba, видео грузит block-media.js) */
.g-card.g-ba{background:#0f0e0c;}
.g-card.g-ba video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* Печать: всё, что ждало появления при прокрутке, печатается сразу */
@media print{
  html.mo .mo-r,html.mo .mo-m,html.mo .mo-m img,html.mo .mo-m video,html.mo img.mo-m,html.mo img.mo-wait{opacity:1!important;transform:none!important;clip-path:none!important;}
  html.mo .g-grid.mo-fold>.g-card,html.mo .v-grid.mo-fold>.v-card{display:block!important;}
  .mo-more,.mo-prog,.mo-sh,.mo-glare{display:none!important;}
}