/* ============================================================
   ЧТО СТРОИМ — КОЛОДА (30.09.2026): карточки лежат стопкой (--pos:
   0 — сверху), нижние сдвинуты и повёрнуты; верхняя при уходе улетает
   вправо и ложится под низ (.is-fly).
   ============================================================ */
.mvt__box{ display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:clamp(28px, 5vw, 90px); align-items:center; }
.mvt__index{ list-style:none; margin:clamp(18px, 2vw, 28px) 0 0; padding:0; display:grid; gap:2px; }
.mvt__index button{
  display:flex; align-items:baseline; gap:14px; width:100%; padding:12px 12px; border:0; border-radius:6px; background:none; cursor:pointer; text-align:left;
  font:600 clamp(15px, 1.1vw, 18px)/1.3 var(--font); color:var(--fg-mute); transition:background .2s, color .2s;
}
.mvt__index i{ font:500 12px/1 var(--font-mono); font-style:normal; color:var(--fg-mute); }
.mvt__index button:hover{ color:var(--fg); background:var(--surface-2); }
.mvt__index button.is-on{ color:var(--fg); background:var(--accent-wash); }
.mvt__index button.is-on i{ color:var(--accent-1); }
.mvt__index button:focus-visible{ outline:2px solid var(--accent-1); outline-offset:2px; }

.mvt__deck{ position:relative; height:clamp(360px, 32vw, 440px); }
.mvt__card{
  position:absolute; inset:0 8% 8% 0;
  display:flex; flex-direction:column; padding:clamp(22px, 2.4vw, 36px);
  border-radius:16px; background:#fff; border:1px solid var(--line);
  box-shadow:0 30px 60px -30px rgba(80,20,90,.35);
  transform:translate(calc(var(--pos) * 14px), calc(var(--pos) * 14px)) rotate(calc(var(--pos) * 1.6deg)) scale(calc(1 - var(--pos) * .03));
  z-index:calc(10 - var(--pos));
  opacity:calc(1 - var(--pos) * .12);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s;
  cursor:pointer;
}
.mvt__card.is-fly{ animation:mvt-fly .55s cubic-bezier(.5,0,.2,1); }
@keyframes mvt-fly{ 40%{ transform:translate(60%, -6%) rotate(10deg); } }
.mvt__n{ margin:0; font:500 12px/1 var(--font-mono); color:var(--accent-1); letter-spacing:.06em; }
.mvt__card h3{ margin:12px 0 0; font:600 clamp(24px, 2.2vw, 36px)/1.08 var(--font-display); letter-spacing:-.025em; color:var(--fg); }
.mvt__s{ margin:12px 0 0; max-width:40ch; font-size:clamp(15px, 1.08vw, 17.5px); line-height:1.5; color:var(--fg-lead); }
.mvt__ui{ margin-top:auto; display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; padding-top:20px; }
.mvt__ui i{ height:54px; border-radius:8px; background:linear-gradient(160deg, var(--accent-wash), #fff); border:1px solid var(--accent-line); }
.mvt__ui em{ grid-column:1 / -1; height:10px; border-radius:5px; background:linear-gradient(90deg, var(--accent-1) 0 40%, var(--surface-2) 40%); }
.mvt__next{ position:absolute; right:20px; top:20px; font:600 12.5px/1 var(--font); color:var(--fg-mute); }
@media (max-width: 900px){ .mvt__box{ grid-template-columns:1fr; } .mvt__deck{ order:-1; height:360px; } }
@media (prefers-reduced-motion: reduce){ .mvt__card{ transition:none; } .mvt__card.is-fly{ animation:none; } }