/**
 * Лёгкие tactile-микроанимации при hover/press на плитках и кнопках.
 *
 * Идея — kinetics.colorion.co: spring-физика (перелёт/затухание) вместо
 * обычного fixed-duration easing. Здесь без JS/React — тот же tactile-эффект
 * чистым CSS через cubic-bezier с "перелётом" (.34,1.56,.64,1) на transform/
 * box-shadow. Ничего в существующих transition (цвет фона у .btn и т.п.)
 * не меняем — только добавляем transform.
 *
 * Откат: убрать строку с этим файлом из
 * src/partials/modx/assets.json (секция "css") и пересобрать сайт.
 */

.tile__item {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  will-change: transform;
}

.tile__item:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 16px 32px -12px rgba(57, 44, 112, 0.45);
}

.tile__item:active {
  transform: translateY(-1px) scale(0.985);
  transition-duration: 0.15s;
}

.btn {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, color 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  .tile__item,
  .btn {
    transition: none !important;
  }

  .tile__item:hover,
  .btn:hover {
    transform: none !important;
  }
}