/* High-refresh pass. Time-based motion stays; per-frame layout and blur do not.
   html[data-hz="high"] is set by js/hz.js from measured frame gaps at about 90 Hz
   and above. A 60 Hz panel keeps the original transitions. */

html { scroll-behavior: auto; }

/* A layer per button exhausts the compositor budget while scrolling at 120 Hz.
   Promote only the fixed chrome and the title that actually moves every frame. */
.btn,
.icon-btn,
.key,
.cat,
.tabs a,
.seg span,
.seg.mini button,
.emopick button,
.entry button,
.rrow {
  will-change: auto;
}
.tabs,
.fab,
.install-pill {
  will-change: transform;
  backface-visibility: hidden;
}

/* Fast panels: don't interpolate layout or backdrop-filter. Those properties
   still change, they just snap once instead of repainting for 350 ms. */
html[data-hz="high"] .top {
  transition: box-shadow .28s var(--spring, ease), background-color .28s linear;
}
html[data-hz="high"] .top .logo,
html[data-hz="high"] .top .sub-t,
html[data-hz="high"] .brand h1 {
  transition: transform .28s var(--spring, ease), opacity .22s linear;
}
html[data-hz="high"] .btn,
html[data-hz="high"] .icon-btn,
html[data-hz="high"] .fab,
html[data-hz="high"] .key,
html[data-hz="high"] .cat,
html[data-hz="high"] .tabs a,
html[data-hz="high"] .seg span,
html[data-hz="high"] .seg.mini button,
html[data-hz="high"] .emopick button {
  transition-property: transform, opacity;
  transition-duration: .22s;
  transition-timing-function: var(--spring, ease);
}

/* While the finger is moving, blurring the sticky bars every vsync misses frames.
   The blur returns when scrolling settles (js/hz.js removes .hz-scrolling). */
html[data-hz="high"].hz-scrolling .top,
html[data-hz="high"].hz-scrolling .tabs,
html[data-hz="high"].hz-scrolling .install-pill,
html[data-hz="high"].hz-scrolling .m2-ind {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  html[data-hz="high"] .top,
  html[data-hz="high"] .top .logo,
  html[data-hz="high"] .top .sub-t,
  html[data-hz="high"] .brand h1,
  html[data-hz="high"] .btn,
  html[data-hz="high"] .tabs a {
    transition: none;
  }
}