/* ════════════════════════════════════════════════════════════
   SCROLL JANK ELIMINATION — VertexDB
   Target: 60fps smooth scroll — NO broken overflow/scroll
   ════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   1. KILL background-attachment:fixed
      This forces a full-page repaint on every scroll pixel.
      Override to scroll so browser can use cached layer.
   ─────────────────────────────────────────────────────────── */
body,
[data-theme="dark"] body,
body.home-mode,
body.home-mode .alive-home {
  background-attachment: scroll !important;
}

/* ───────────────────────────────────────────────────────────
   2. REDUCE backdrop-filter COSTS
      Many elements have blur(36-56px) + saturate() chains.
      Lower blur radius = dramatically less GPU work per frame.
      NEVER remove the property — just reduce the value.
   ─────────────────────────────────────────────────────────── */

/* Main shell: was blur(36px) saturate(180%) */
.home-dashboard-shell {
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

/* Each column: was blur(30px) saturate(165%) */
.home-dashboard-column {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Every nav-item currently gets backdrop-filter — only apply on active/hover */
body.home-mode .nav-item {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.home-mode .nav-item.active,
body.home-mode .nav-item:hover {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Buttons, textareas, iframes inside dashboard columns had backdrop-filter — remove */
body.home-mode .home-dashboard-column button,
body.home-mode .home-dashboard-column textarea,
body.home-mode .home-dashboard-column iframe {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Sidebar: was blur(28px) saturate(175%) */
body.home-mode .sidebar {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Page header / quote banner: was blur(28px) */
body.home-mode .page-header,
body.home-mode .quote-banner {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Overview glass stat cards: was blur(24px) saturate(160%) */
.stat-card,
.streak-card,
.exam-card,
.goal-card,
.progress-section,
.chart-card,
.quick-log-card,
.phase-mini-card,
.todo-ticker-wrap {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* liquid-glass.css has blur(56px) — reduce heavily */
[class*="liquid-glass"],
.lg-surface,
.glass-card {
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

/* ───────────────────────────────────────────────────────────
   3. GPU LAYER PROMOTION
      will-change + translateZ(0) tells browser to composite
      these elements on the GPU independently from the page.
      ONLY apply to fixed/sticky elements and animated cards —
      NOT to scroll containers (that breaks scroll).
   ─────────────────────────────────────────────────────────── */
.sidebar,
.modal-overlay,
.cmd-orbit-container,
.liquid-card,
.alive-journey-card,
.stat-card,
.streak-card,
.phase-mini-card {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ───────────────────────────────────────────────────────────
   4. TRANSITION SCOPE — compositor-only properties
      transition:all triggers layout+paint on every frame.
      Scope to transform + box-shadow (GPU-composited).
   ─────────────────────────────────────────────────────────── */
.stat-card,
.streak-card,
.exam-card,
.goal-card,
.progress-section,
.chart-card,
.quick-log-card,
.phase-mini-card,
.todo-ticker-wrap {
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.alive-journey-card {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ───────────────────────────────────────────────────────────
   5. PAUSE HEAVY ANIMATIONS DURING SCROLL
      body.is-scrolling is set by the inline JS scroll handler.
      Pausing ring spins / glass sweeps during scroll means
      the GPU can dedicate all bandwidth to scroll compositing.
   ─────────────────────────────────────────────────────────── */
body.is-scrolling .liquid-card::after,
body.is-scrolling .focus-ring-shell,
body.is-scrolling .focus-ring-progress--outer,
body.is-scrolling .focus-ring-progress--mid,
body.is-scrolling .focus-ring-progress--inner,
body.is-scrolling .an-triple-svg,
body.is-scrolling #richWeatherWidget #awBigIcon,
body.is-scrolling .focus-ring-core,
body.is-scrolling .lg-orb-1,
body.is-scrolling .lg-orb-2,
body.is-scrolling .lg-orb-3 {
  animation-play-state: paused !important;
}

/* Hide the glass sweep entirely during scroll (very heavy) */
body.is-scrolling .liquid-card::after {
  opacity: 0 !important;
}

/* ───────────────────────────────────────────────────────────
   6. FONT RENDERING — antialiased text scrolls crisper
   ─────────────────────────────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ───────────────────────────────────────────────────────────
   7. OVERSCROLL — prevent scroll chaining in nested areas
      (table wrappers, sidebar nav, custom scroll boxes)
      Do NOT apply to .main-content — that's the page scroll.
   ─────────────────────────────────────────────────────────── */
.daily-table-wrapper,
.sidebar-nav,
.soft-scrollbar {
  overscroll-behavior: contain;
}

/* ───────────────────────────────────────────────────────────
   8. REDUCED MOTION SUPPORT
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}