/* ДНЖ · Микроотклик существующих элементов управления.
   Цвета, размеры и спокойные состояния остаются в исходных стилях. */

@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  /* Кнопка чуть приподнимается, затем мягко возвращается под нажатием. */
  :is(.btn,header .add-practice,header .exit,.back):not(:disabled):not([aria-disabled="true"]):not(.soon){
    transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
      border-color var(--dur) var(--ease),box-shadow 240ms var(--ease),
      transform 240ms cubic-bezier(.2,.75,.25,1);
  }
  :is(.btn,header .add-practice,header .exit,.back):not(:disabled):not([aria-disabled="true"]):not(.soon):hover{
    transform:translateY(-1px);
  }
  :is(.btn,header .add-practice,header .exit,.back):not(:disabled):not([aria-disabled="true"]):not(.soon):active{
    transform:translateY(1px) scale(.985);
    transition-duration:100ms;
  }

  :is(header nav button,.subnav button):not(:disabled):not([aria-disabled="true"]):not(.soon):not(.navsoon){
    transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease),transform 220ms cubic-bezier(.2,.75,.25,1);
  }
  header nav button:not(:disabled):not([aria-disabled="true"]):not(.navsoon):hover{
    transform:translateY(-1px);
  }
  :is(header nav button,.subnav button):not(:disabled):not([aria-disabled="true"]):not(.soon):not(.navsoon):active{
    transform:translateY(1px);
    transition-duration:100ms;
  }

  /* Штрих сохраняет свою исходную палитру и итоговую длину. */
  .subnav button.act:not(:disabled):not([aria-disabled="true"]):not(.soon)::after{
    transform-origin:50% 50%;
    animation:motion-controls-underline 420ms cubic-bezier(.16,.8,.24,1);
  }

  /* Карточки библиотеки уже кликабельны: сохраняем их подъём и полосу. */
  .card[data-id]:not([aria-disabled="true"]){
    transition:box-shadow 300ms var(--ease),border-color var(--dur) var(--ease),
      transform 300ms cubic-bezier(.2,.75,.25,1);
  }
  .card[data-id]:not([aria-disabled="true"]):is(:hover,:focus-visible){
    transform:translateY(-2px);
    box-shadow:var(--shadow-lift);
  }
  .card[data-id]:not([aria-disabled="true"]):active{
    transform:translateY(0);
    transition-duration:120ms;
  }
  .card[data-id]:not([aria-disabled="true"])::before{
    transition:transform 280ms cubic-bezier(.2,.75,.25,1);
  }
  .card[data-id]:not([aria-disabled="true"]):focus-visible::before{
    transform:none;
  }

  /* Движение связано с рабочей кнопкой инструмента; заглушки спокойны. */
  .tool-card:not(.soon):not([aria-disabled="true"]){
    transition:box-shadow 300ms var(--ease),transform 300ms cubic-bezier(.2,.75,.25,1);
  }
  .tool-card:not(.soon):not([aria-disabled="true"]):is(:hover,:focus-within){
    transform:translateY(-2px);
    box-shadow:var(--shadow-lift);
  }

  /* Один небольшой удар сердца только у интерактивного родителя. */
  button:not(:disabled):not([aria-disabled="true"]):not(.soon):is(:hover,:focus-visible) .ic-heart,
  a[href]:not([aria-disabled="true"]):is(:hover,:focus-visible) .ic-heart,
  .card[data-id]:not([aria-disabled="true"]):is(:hover,:focus-visible) .ic-heart{
    animation:motion-controls-heart 460ms cubic-bezier(.2,.75,.25,1);
  }
}

@keyframes motion-controls-underline{
  from{transform:scaleX(.35);opacity:.45}
  to{transform:scaleX(1);opacity:1}
}
@keyframes motion-controls-heart{
  0%,100%{transform:scale(1) rotate(0)}
  40%{transform:scale(1.14) rotate(-5deg)}
  72%{transform:scale(1.035) rotate(-1deg)}
}

/* Клавиатурный фокус не зависит от возможности видеть движение. */
:is(.btn,header .add-practice,header .exit,.back,header nav button,.subnav button,.card[data-id]):not(:disabled):not([aria-disabled="true"]):not(.soon):not(.navsoon):focus-visible{
  box-shadow:var(--ring);
}

@media (prefers-reduced-motion:reduce){
  :is(.btn,header .add-practice,header .exit,.back,header nav button,.subnav button,.card[data-id],.tool-card):is(:hover,:active,:focus-visible,:focus-within){
    transform:none;
  }
  .card[data-id]::before,.subnav button::after,
  button .ic-heart,a[href] .ic-heart,.card[data-id] .ic-heart{
    animation:none !important;
    transition:none !important;
  }
}