/* ============================================================
   MOTION LAYER — Этап 1: линия прогресса прокрутки
   Для отката блока 1: удалить из index.html строку
   <link rel="stylesheet" href="motion-layer.css">
   ============================================================ */

/* --- EFFECT 1 START --- */
@supports (color: var(--burgundy)) {
  .scroll-progress {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--burgundy);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 80ms linear;
    pointer-events: none;
    z-index: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .scroll-progress {
      transition: none;
    }
  }
}
/* --- EFFECT 1 END --- */

/* ============================================================
   MOTION LAYER — Этап 4: обводка карточек при наведении
   Откат: удалить всё между
   "MOTION EFFECT 4: CARD HOVER OUTLINE — START" и "— END"
   ============================================================ */

/* MOTION EFFECT 4: CARD HOVER OUTLINE — START */

@media (hover: hover) and (pointer: fine) {
  /* Переопределяем transition для practice-list: сохраняем baseline
     border-color + transform и добавляем box-shadow 220ms */
  .practice-list > li {
    transition:
      border-color 220ms cubic-bezier(.2, .7, .2, 1),
      transform 220ms cubic-bezier(.2, .7, .2, 1),
      box-shadow 220ms cubic-bezier(.2, .7, .2, 1);
  }

  .process-list > li {
    transition: box-shadow 220ms cubic-bezier(.2, .7, .2, 1);
  }

  .practice-list > li:hover,
  .practice-list > li:focus-within,
  .process-list > li:hover,
  .process-list > li:focus-within {
    /* inset box-shadow: не меняет box-size, не вызывает layout */
    box-shadow: inset 0 0 0 1px var(--burgundy);
  }
}

/* MOTION EFFECT 4: CARD HOVER OUTLINE — END */