/* ═══════════════════════════════════════════════════════════════ DESKTOP PERFORMANCE OVERRIDE — v1.0 Companion to mobile-perf.css (which covers ≤768px). Targets: Tablets (769-1024px) + old laptops (769-1280px) Strategy: REDUCE intensity, NOT eliminate animations. The mystical aesthetic is preserved — just less GPU-heavy. ═══════════════════════════════════════════════════════════════ */ /* ═══ SECTION A: ALL DESKTOP (769px+) ═══ */ @media (min-width: 769px) { /* ── A1. RESTRICT TRANSITION — targeted only ── Only .tm-fo-magnify has the expensive backdrop-filter + transition:all combo. All other expensive combos handled by A3/A4/B2. */ .tm-fo-magnify, .tm-fo-label, .tm-fo-badge { transition-property: opacity, transform !important; } /* ── A2. RESET will-change ON DECORATIVE-ONLY ELEMENTS ── 640 will-change declarations create 640 compositor layers. Each layer consumes GPU memory. On old laptops = memory pressure. Keep will-change only on actively-animated functional elements. EXPANDED Đợt 4a: thêm patterns mandala/portal/cine/hero/orbit/spin/petals (~91 -ring + mandala + orbit decorative; specificity cao hơn cho functional state .is-analyzing nên submit-btn-loading ring vẫn giữ will-change). */ [class*="-seal"], [class*="-emblem"], [class*="-constellation"], [class*="-nebula"], [class*="-starfield"], [class*="-particle"], [class*="-sacred"], [class*="-meander"], [class*="-aurora"], [class*="-compass-ring"], [class*="-bagua-ring"], [class*="-dragon"], [class*="-phoenix"], [class*="-flame"]:not(.qa-sr-ember), [class*="-twinkle"], [class*="-breathe"], [class*="-float"], /* Đợt 4a expansion: decorative rings/spinners không phải functional state */ [class*="-mandala"], [class*="-portal-ring"]:not(button):not(input):not(a), [class*="-portal-svg"]:not(button):not(input):not(a), [class*="-cine-ring"], [class*="-hero-ring"], [class*="-orn-ring"], [class*="-mau-ring"], [class*="-spin-cw"]:not(button):not(input):not(a), [class*="-spin-ccw"]:not(button):not(input):not(a), [class*="-petals-cw"], [class*="-petals-ccw"], [class*="-bagua-spin"], [class*="-bagua-outer"], [class*="-bagua-inner"], [class*="-pent-ring"], [class*="-frame-corner"], [class*="-portrait-deco"]:not(button), [class*="-orbit"]:not(.sm-logo-orbit):not(.sm-hero-orbit):not(button):not(input):not(a) { will-change: auto !important; } /* ── A3. CAP backdrop-filter BLUR ON DECORATIVE PANELS ── 37 active backdrop-filter across 10 files, values 4-28px. Header keeps original. Non-header elements capped at 8px. */ .sm-mobile-menu, .sm-toc-bar, .sm-toc-backdrop, .tr-modal-backdrop, .km-fs-header, .km-lg-card, .xnt-steps-bar, .tm-fo-magnify, .tm-fo-lens, .tm-fo-iris, .about-card { -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; } /* ── A4. KILL ANIMATED box-shadow IN @keyframes ── box-shadow animated every frame is the worst GPU operation. Override specific elements known to have animated box-shadow. */ .sm-aiv-bubble { animation-name: none !important; } .tsh-pyth-frame { animation-duration: 12s !important; } /* ── A5. REDUCE TEXT-SHADOW BLOOM ── Floating decorative numbers (.tsh-fn, .addr-fn, etc.) have 30-60px text-shadow glow. Reduce to 8px on desktop. */ .tsh-fn, .addr-fn, .biz-fn, .compat-fn, .baby-fn, .phone-fn, .plate-fn, .daily-fn, .wd-fn { text-shadow: 0 0 8px currentColor !important; } /* ── A6. CAP box-shadow BLUR ≥40px ON DECORATIVE COSMOS/TOC ── 185 declarations blur ≥40px trên decorative containers. Gaussian blur cost scales với blur² → 80px = 4× 40px cost. Cap blur 24px giữ depth feel, GPU cost giảm ~60%. Functional buttons/inputs giữ box-shadow gốc (selector exclude). */ [class*="-cosmos"]:not(button):not(input):not(a), [class*="-toc-bar"]:not(button):not(input), [id$="-toc-bar"]:not(button):not(input), [class*="-form-cosmos"], [class*="-result-cosmos"], [class*="-bottom-cosmos"], [class*="-hero-cosmos"] { box-shadow: 0 -4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04) !important; } /* ── A7. THROTTLE infinite animation duration ── Sub-3s infinite loops produce excessive GPU work per second. B1 cũ chỉ áp dụng tablet/laptop (769-1280px), giờ extend ra toàn desktop. Slow decorative spins/orbits to minimum 20s (functional exclude). */ [class*="-ring"]:not(.loading):not(.spinner):not(.sm-vvm__ring--outer):not(.sm-vvm__ring--middle):not(.sbh-ring--slow):not(.sbh-ring--counter):not(.sbh-ring--medium):not([class*="portal-ring"]):not([class*="btn-ring"]):not([class*="toss-ring"]):not([class*="gc-ring"]), [class*="-orbit"]:not(.sm-logo-orbit):not(.sm-hero-orbit), [class*="-mandala"]:not(button) { animation-duration: 20s !important; } } /* ═══ SECTION B: TABLETS + OLD LAPTOPS (769-1280px) ═══ */ @media (min-width: 769px) and (max-width: 1280px) { /* ── B1. SLOW DOWN FAST INFINITE LOOPS ── Sub-3s infinite loops produce excessive GPU work per second. Slow decorative spins/orbits to minimum 8s. */ [class*="-ring"]:not(.loading):not(.spinner):not(.sm-vvm__ring--outer):not(.sm-vvm__ring--middle):not(.sbh-ring--slow):not(.sbh-ring--counter):not(.sbh-ring--medium):not([class*="portal-ring"]):not([class*="btn-ring"]):not([class*="toss-ring"]):not([class*="gc-ring"]), [class*="-orbit"], [class*="-mandala"] { animation-duration: 8s !important; } /* ── B2. REDUCE MULTI-LAYER box-shadow ON CARDS/PANELS ── 2100 multi-layer (3+) box-shadow declarations across 53 files. Reduce to simpler 2-layer shadow on weaker hardware. */ [class*="-card"]:not(.sm-aiv-panel):not(.sm-aiv-bubble):not([class*="sm-aiv-"]):not(.is-active):not(.is-selected):not(.is-flipped):not(.tr-card), [class*="-panel"]:not(.sm-aiv-panel):not([class*="sm-aiv-"]), [class*="-section"]:not(body):not(html):not(main):not(section):not([class*="sm-aiv-"]) { box-shadow: 0 2px 12px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.2) !important; } /* ── B3. RESET will-change ON SPINNING RINGS ── On tablets, spinning ring will-change layers eat memory. */ [class*="-ring"], [class*="-orbit"], [class*="-spin"]:not(.loading):not(.spinner) { will-change: auto !important; } /* ── B4. CAP filter BLUR ON DECORATIVE ELEMENTS ── 780 filter declarations. On tablets, reduce GPU rasterizer load. */ [class*="-orb"]:not(button):not(a):not([class*="sm-cat-orb"]), [class*="-ambient"] { filter: none !important; opacity: 0 !important; } }