/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

.brxe-button {
  /* Tối ưu: chỉ chuyển transform + opacity, tránh 'all' */
  transition: transform 210ms cubic-bezier(.2,.9,.2,1), 
              opacity 160ms linear;
  will-change: transform, opacity; /* dùng tiết chế: chỉ 1-2 thuộc tính */
  transform: translateZ(0); /* hint để kích hoạt compositing layer (GPU) */
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  /* tránh filter và quá nhiều shadow mặc định nếu có */
}

/* hover nhẹ nhàng, không dùng filter */
.brxe-button:hover {
  transform: translate3d(0, -3px, 0); /* translate3d để chắc GPU */
  opacity: 0.98; /* thay cho filter brightness */
}

/* active: scale nhỏ lại, vẫn animate transform */
.brxe-button:active {
  transform: translate3d(0, -1px, 0) scale(0.98);
  opacity: 0.96;
}

/* focus-visible: dùng outline nhẹ, box-shadow nếu cần nhưng đơn giản */
.brxe-button:focus-visible {
  outline: none;
  /* chỉ 1 shadow nhỏ — tránh lớn và mờ quá nhiều */
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

/* respect user preference */
@media (prefers-reduced-motion: reduce) {
  .brxe-button,
  .brxe-button:hover,
  .brxe-button:active {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}