/*!
 * home-mobile-perf.css
 * Giảm tải hiệu ứng trang chủ trên MOBILE/TABLET (≤850px) và prefers-reduced-motion.
 * Nguyên tắc: chỉ TẮT/giảm hiệu ứng TRANG TRÍ (blur, backdrop-filter, starfield,
 * animation chạy vô hạn) — KHÔNG đụng nội dung/layout. Desktop giữ nguyên 100%.
 * Nạp SAU cùng (sau benefit-a.css) trong header.php để thắng cascade.
 * Cặp với guard mobile trong home-redesign.js & benefit-a.js (tắt hiệu ứng JS).
 */

@media (max-width: 850px) {

  /* 1) BỎ blur & backdrop-filter — đắt nhất trên GPU mobile (re-blur mỗi frame) */
  .hero-circuit::before,                    /* quầng sáng blur(4px) sau banner */
  #quyen_loi .benefit-a-wrapper .wrap,      /* card kính mờ backdrop-filter:blur(5px) */
  #quyen_loi .bne-item .wrap::after {       /* quầng glow filter:blur(26px) sau card active */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }
  /* card frosted mất blur → tăng nhẹ nền để vẫn đủ tương phản đọc chữ */
  #quyen_loi .benefit-a-wrapper .wrap {
    background: rgba(255, 255, 255, .1) !important;
  }

  /* 1b) Coin vàng trang trí banner: GIỮ blur nhưng NHẸ (đỡ tải GPU hơn blur 8px gốc,
     vẫn còn chiều sâu). Coin lớn (data-depth 1.0): 8px → 3px; coin nhỏ (0.28): giữ 1px. */
  .banner-receive .gold-coin[data-depth="1.0"] img { filter: blur(3px) !important; }
  .banner-receive .gold-coin[data-depth="0.28"] img { filter: blur(1px) !important; }

  /* 2) ẨN starfield — box-shadow ~12KB tạo layer rất nặng khi rasterize/scroll */
  #stars, #stars2, #stars3 {
    display: none !important;
  }

  /* 3) ẨN hạt trang trí mạch điện (particle/pulse/node) trong banner hero-circuit */
  .hc-dot, .hc-pulse, .hc-node {
    display: none !important;
  }

  /* 4) DỪNG animation trang trí chạy vô hạn (chỉ mất lấp lánh, nội dung giữ nguyên) */
  .sec-com-tt .txt-ani-bg.style-border::after,          /* ttPing tiêu đề section */
  .sec-com-tt .txt-ani-bg::before,                       /* ttPing */
  .hall-of-fame .hall-of-fame-header .hof-star,          /* hofStarTwinkle */
  .hall-of-fame .hall-of-fame-header .hof-title,         /* hofTitleTwinkle */
  .hall-of-fame .hall-of-fame-header .hof-title .hof-top,/* hofGlit */
  #quyen_loi .bfx-grp,                                   /* coinFloat */
  #quyen_loi .bne-item.bfx-live .wrap::before,           /* bfxSpin */
  .personalized .fb-stroke .fb-run {                     /* fb-march */
    animation: none !important;
  }

  /* 5) BỎ HẲN lớp decor "sao băng" (meteors) của hero banner — ẩn cả lớp, không chỉ giảm blur */
  .hero-meteors {
    display: none !important;
  }

  /* 6) Badge "120+ videos" = cube 3D GSAP xoay rotationX mỗi frame → lag trên mobile.
     Ép cube lên COMPOSITOR LAYER GPU riêng: tách khỏi vùng repaint của hero, GPU chỉ
     transform texture (không re-raster mỗi frame). .kha-flip-inner đã có will-change. */
  .kha-flip-wrapper {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/* Người dùng bật "giảm chuyển động" — tắt hiệu ứng nặng ở mọi kích thước màn hình */
@media (prefers-reduced-motion: reduce) {
  #stars, #stars2, #stars3,
  .hc-dot, .hc-pulse, .hc-node,
  .hero-meteors {
    display: none !important;
  }
  .hero-circuit::before,
  #quyen_loi .benefit-a-wrapper .wrap,
  #quyen_loi .bne-item .wrap::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }
}