/* ==========================================================================
   Блок 3 «Кейсы» (#cases) — живые превью: у каждого кейса ПК-окно + телефон.
   Движение только на ховере/фокусе карточки (и на ховере сцены в попапе кейса),
   только transform/opacity (без layout). prefers-reduced-motion — без движения.
   Типы экранов (разметку собирает assets/js/cases.js, функция mock):
     .mk-st  — 2–4 экрана-состояния, переключаются по кругу (вкладки/разделы);
     .mk-sc  — длинный полностраничный скрин, плавно прокручивается вниз;
     .mk-chat — переписка: сообщения появляются по одному.
   Новых линий/обводок не добавляет.
   ========================================================================== */

/* ПК-окно с фиксированной пропорцией экрана 16:10 */
.mk-win__scr--fix{position:relative;aspect-ratio:16 / 10;overflow:hidden;background:#f4f4f2}
.mk-win__scr--fix > .mk-st,.mk-win__scr--fix > .mk-sc{position:absolute;inset:0}

/* --- экраны-состояния --- */
.mk-st{display:block;position:relative;overflow:hidden;width:100%;height:100%}
.mk-st .mk-st__i{position:absolute;inset:0;display:block}
.mk-st .mk-st__i img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.mk-st .mk-st__i--l{opacity:0}

/* --- длинный экран: прокрутка --- */
.mk-sc{display:block;position:relative;overflow:hidden;width:100%;height:100%}
.mk-phone__scr > .mk-sc{position:absolute;inset:0}
.mk-sc .mk-sc__img{position:absolute;left:0;top:0;width:100%}
.mk-sc .mk-sc__img img{transition:transform .9s var(--ease)}

/* --- переписка: «шторка» цвета фона чата съезжает вниз, открывая сообщения по одному --- */
.mk-chat{position:absolute;left:0;right:0;top:13.9%;height:75.5%;overflow:hidden;pointer-events:none}
.mk-chat i{position:absolute;inset:0;background:#F1ECE5;transform:translateY(100%)}

/* --- запуск движения --- */
:is(.case:hover,.case:focus-within,.cpop__stage:hover) .mk-st__i--l{
  animation:mk-st3 calc(var(--n) * var(--t,2.3s)) cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay:calc((var(--k) - .6) * var(--t,2.3s))}
:is(.case:hover,.case:focus-within,.cpop__stage:hover) .mk-st--n2 .mk-st__i--l{animation-name:mk-st2}
:is(.case:hover,.case:focus-within,.cpop__stage:hover) .mk-st--n4 .mk-st__i--l{animation-name:mk-st4}
:is(.case:hover,.case:focus-within,.cpop__stage:hover) .mk-sc .mk-sc__img img{
  transform:translateY(var(--sy));transition:transform var(--sd,6s) cubic-bezier(.45,0,.35,1) .25s}
:is(.case:hover,.case:focus-within,.cpop__stage:hover) .mk-chat i{animation:mk-chat 9s cubic-bezier(.3,0,.2,1) infinite}

/* слой k виден 1/N цикла: въезжает чуть справа (смена вкладки), затем уходит, открывая следующий/первый */
@keyframes mk-st2{0%{opacity:0;transform:translateX(4%)}5%,50%{opacity:1;transform:none}56%,100%{opacity:0;transform:none}}
@keyframes mk-st3{0%{opacity:0;transform:translateX(4%)}4%,33.3%{opacity:1;transform:none}38%,100%{opacity:0;transform:none}}
@keyframes mk-st4{0%{opacity:0;transform:translateX(4%)}3%,25%{opacity:1;transform:none}29%,100%{opacity:0;transform:none}}

/* сообщения WhatsApp (bot-wa): вопрос → ответ с окнами → 12:30 → марка авто → Camry → запись подтверждена */
@keyframes mk-chat{
  0%,9%{transform:translateY(10.9%)}
  12%,24%{transform:translateY(32.8%)}
  27%,36%{transform:translateY(39.7%)}
  39%,50%{transform:translateY(53.4%)}
  53%,62%{transform:translateY(60.9%)}
  66%,100%{transform:translateY(100%)}}

@media (prefers-reduced-motion:reduce){
  .mk-st .mk-st__i--l,.mk-chat i{animation:none!important}
  .mk-chat i{transform:translateY(100%)!important}
  .mk-sc .mk-sc__img img{transform:none!important;transition:none!important}
}

/* ==========================================================================
   Правки владельца 2026-11-05: шапка блока, плашка «Подобрать кейсы», фильтр на всю ширину
   ========================================================================== */
/* шапка: заголовок и подпись под ним слева, плашка подбора справа (низ к низу); счётчик «06» убран */
.cases__head{height:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:40px}
.cases__hl{min-width:0}
.cases__lead{position:static;width:auto;max-width:480px;margin-top:14px}

/* плашка подбора: неяркое стекло БЕЗ контура (заливка + тёплый/мятный отсвет), не спорит с жёлтыми CTA */
.cases__pick{flex:none;display:flex;align-items:center;gap:24px;max-width:700px;padding:12px 12px 12px 28px;border-radius:var(--r-pill);
  background:radial-gradient(70% 160% at 0% 0%,rgba(251,208,128,.07),transparent 70%),
             radial-gradient(60% 160% at 100% 100%,rgba(128,225,166,.06),transparent 70%),rgba(255,255,255,.045)}
.cases__pick-t{max-width:340px;font:400 14px/21px var(--f-text);color:rgba(255,255,255,.6)}
/* кнопка — полупрозрачная заливка без контура; ховер — тёплый градиент и свечение (как вторичные кнопки блоков 2 и 5) */
.cases__pick .btn--ghost{flex:none;height:48px;padding:0 24px;box-shadow:none;background-color:rgba(255,255,255,.08);color:rgba(255,255,255,.82)}
.cases__pick .btn--ghost::before{display:none}
.cases__pick .btn--ghost:hover{color:var(--c-white);
  background:linear-gradient(120deg,rgba(251,208,128,.2),rgba(226,194,120,.1) 50%,rgba(128,225,166,.18)) rgba(255,255,255,.06);
  box-shadow:0 12px 30px -18px rgba(226,194,120,.55)}

/* фильтр — на всю ширину контента: чипсы делят свободное место поровну, пилюля .cfilter__ind ездит как раньше (offsetLeft/Width) */
.cfilter{display:flex;width:100%}
.cfilter__chip{flex:1 1 auto;justify-content:center}

/* кейсы без мобильной версии: окно ПК по центру в попапе */
.cpop__stage .mk--desk:not(.has-phone) .mk-win,.cases__grid[data-n="1"] .mk--desk:not(.has-phone) .mk-win{left:18cqw;width:64cqw}