/*
 * Lớp kính mờ cho thanh điều hướng điện thoại.
 *
 * Bản CSS của dự án đi qua bước biên dịch CSS, bước này luôn thay `backdrop-filter`
 * bằng `-webkit-backdrop-filter` (kể cả khi đặt mục trình duyệt hiện đại). Chromium
 * không đọc được tên có tiền tố, nên thanh dưới mất hẳn hiệu ứng làm mờ. Tệp này nằm
 * trong public/, được phục vụ nguyên văn, nhờ đó thuộc tính chuẩn đến được trình duyệt.
 * Giá trị lấy từ biến --gima-glass-blur / --gima-drop-blur trong src/styles.css.
 */
@media (max-width: 639px) {
  .mobile-nav { backdrop-filter: var(--gima-glass-blur); -webkit-backdrop-filter: var(--gima-glass-blur); }
  .mobile-nav-liquid-inner { backdrop-filter: var(--gima-drop-blur); -webkit-backdrop-filter: var(--gima-drop-blur); }
}

@media (prefers-reduced-transparency: reduce) {
  .mobile-nav, .mobile-nav-liquid-inner, .rail-liquid-inner { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (min-width:640px) and (max-width:1279px) {
  .rail-liquid-inner { backdrop-filter: var(--gima-drop-blur); -webkit-backdrop-filter: var(--gima-drop-blur); }
}
@media (prefers-reduced-transparency: reduce) {
  .rail-liquid-inner { backdrop-filter: none; -webkit-backdrop-filter: none; }
}