/* ============================================================
   perf.css — memory / GPU savings. Loaded LAST so it wins ties.
   ------------------------------------------------------------
   TIER 0  (every device)   changes nothing you can see:
            • removes backdrop blur from panels that are already
              88–96 % opaque (blurring what is behind them was
              invisible but cost a full-size GPU blur each frame)
            • pauses ambient animations while the player is open
   ECO     (html.eco-mode)  low-RAM / low-core / data-saver devices:
            same layout & colours, but no backdrop blurs, no
            endless decorative animations, smaller shadows, and the
            page behind the video player is switched off while you
            watch.
   LITE    (html.lite-mode) already flat — see styles.css.
   The `:not(#_)` trick only raises specificity so these rules beat
   the `!important` declarations in black-purple-premium.css.
   ============================================================ */

/* ── TIER 0 · invisible blurs removed ─────────────────────── */
.modal-left-card, .modal-right-card, .detail-box, .confirm-box,
.premium-sheet, .auth-box, .share-box, .fpg-box, .search-dropdown, .toast {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  isolation: isolate;               /* keeps the stacking behaviour backdrop-filter used to give */
}
.detail-hero {                      /* sits on its own opaque image; nothing visible to blur */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ── TIER 0 · pause ambient motion while a video/detail is up ─ */
html.player-open body::before,
html.player-open nav::after,
html.player-open .hero-dot.active,
html.player-open .logo-icon,
html.detail-open body::before,
html.detail-open nav::after {
  animation-play-state: paused !important;
}

/* ── ECO · no backdrop blur anywhere (incl. inline liquid-glass) ─ */
html.eco-mode:not(#_) *,
html.eco-mode:not(#_) *::before,
html.eco-mode:not(#_) *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* …so give the formerly-translucent glass a little more body */
html.eco-mode:not(#_) {
  --glass:     rgba(16, 10, 26, 0.94);
  --glass-mid: rgba(11, 7, 20, 0.95);
}
html.eco-mode:not(#_) .search-wrap,
html.eco-mode:not(#_) .ai-btn,
html.eco-mode:not(#_) .profile-avatar-btn,
html.eco-mode:not(#_) .scroll-top-btn,
html.eco-mode:not(#_) .rc-pill,
html.eco-mode:not(#_) .rc-banner {
  background-color: rgba(22, 16, 36, 0.92) !important;
}
html.eco-mode:not(#_) .btn-play,
html.eco-mode:not(#_) .btn-glass-play { background: rgba(255, 255, 255, 0.16) !important; }
html.eco-mode:not(#_) .btn-info,
html.eco-mode:not(#_) .btn-glass-list,
html.eco-mode:not(#_) .detail-close-btn { background: rgba(255, 255, 255, 0.11) !important; }

/* ── ECO · endless decorative animations off (spinners stay) ─ */
html.eco-mode:not(#_) body::before {
  animation: none !important;
  will-change: auto !important;
  filter: none !important;          /* full-screen blur+saturate layer */
}
html.eco-mode:not(#_) nav::after,
html.eco-mode:not(#_) nav::before,
html.eco-mode:not(#_) .logo-icon,
html.eco-mode:not(#_) .hero-badge::before,
html.eco-mode:not(#_) .hero-dot.active,
html.eco-mode:not(#_) .server-dot,
html.eco-mode:not(#_) .ai-btn-dot,
html.eco-mode:not(#_) .dev-dot,
html.eco-mode:not(#_) .online-dot,
html.eco-mode:not(#_) .prem-crown-big,
html.eco-mode:not(#_) .prem-buy-btn,
html.eco-mode:not(#_) .btn-play,
html.eco-mode:not(#_) .ai-sp,
html.eco-mode:not(#_) .ai-limit-star-wrap,
html.eco-mode:not(#_) .stg-prem-glow,
html.eco-mode:not(#_) .cast-ring,
html.eco-mode:not(#_) .cast-screen-icon,
html.eco-mode:not(#_) .cast-live-dot,
html.eco-mode:not(#_) .rc-live i,
html.eco-mode:not(#_) .rc-eq i,
html.eco-mode:not(#_) .search-wrap:focus-within::before {
  animation: none !important;
  will-change: auto !important;
}
html.eco-mode:not(#_) nav { will-change: auto !important; }
html.eco-mode:not(#_) nav::before { filter: none !important; mix-blend-mode: normal !important; }
html.eco-mode:not(#_) .logo-icon { filter: none !important; }

/* ── ECO · giant soft shadows are huge GPU textures ─────────── */
html.eco-mode:not(#_) nav {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 8px 22px rgba(0,0,0,.45) !important;
}
html.eco-mode:not(#_) .modal-left-card,
html.eco-mode:not(#_) .modal-right-card,
html.eco-mode:not(#_) .detail-box,
html.eco-mode:not(#_) .auth-box,
html.eco-mode:not(#_) .confirm-box,
html.eco-mode:not(#_) .premium-sheet,
html.eco-mode:not(#_) .share-box,
html.eco-mode:not(#_) .fpg-box {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 16px 40px rgba(0,0,0,.6) !important;
}
html.eco-mode:not(#_) .hero-title { text-shadow: 0 2px 10px rgba(0,0,0,.6); }

/* ── ECO · while the player is open, switch the page behind it
        off (it is under a 88–92 % black overlay). `visibility`
        keeps layout + scroll position exactly as they were.
        `player-covered` is added once the overlay has faded in. ── */
html.eco-mode.player-covered #home-page,
html.eco-mode.player-covered #search-page,
html.eco-mode.player-covered #pg-profile-main,
html.eco-mode.player-covered nav,
html.eco-mode.player-covered #scroll-top-btn {
  visibility: hidden !important;
}
html.eco-mode.player-covered body::before { display: none !important; }