/* Direct control feedback. Surface entrances/exits belong to the other batches. */
body.app-page :is(button, a.button, [role=button], [role=tab], .list-item,
    .settings-nav-item, .tab-btn, .rail-icon, .server-icon, .member, .vmem,
    .theme-swatch, .accent-swatch, .orn-cell) {
  --control-scale: var(--press-scale);
  --control-press-duration: var(--dur-press-out);
  --control-press-ease: var(--ease-out);
  --control-color-duration: var(--dur-hover);
  transition: scale var(--control-press-duration) var(--control-press-ease),
    background-color var(--control-color-duration) var(--ease-standard),
    border-color var(--control-color-duration) var(--ease-standard),
    color var(--control-color-duration) var(--ease-standard),
    opacity var(--dur-hover) var(--ease-standard);
}

body.app-page :is(.icon-btn, .toggle-btn, .rail-icon, .rail-folder-header,
    .server-icon, .sidebar-compose, .chan-menu-btn, .vmem-menu-btn, .cat-add,
    .fr-icon:not(.friend-message), .right-close, .settings-close, .pp-close,
    .qs-close, .onboarding-close, .ev-modal-close, .pw-toggle, .profile-emoji-btn,
    .dock-icon-btn, .ytm-tbtn, .ytm-vol-btn, .msg-menu-btn, .msg-quick-reply,
    .reply-chip-x, .fm-boost, .accent-swatch, .fm-folder-swatch, .wb-swatch,
    .wb-tool, .wb-size, .sp-emoji, .ss-member-menu, .settings-back,
    .mobile-screen-back, .lightbox-close, .lightbox-prev, .lightbox-next),
body.app-page :is(.call-controls, .vp-controls, .msg-hover-actions,
    .fm-icons, .lightbox-zoom) button {
  --control-scale: var(--press-scale-small);
}

/* Full-width rows travel further at the same ratio, so they press more gently. */
body.app-page :is(.list-item, .settings-nav-item, .member, .vmem) {
  --control-scale: 0.985;
}

/* Individual scale keeps press feedback separate from surface transforms. */
body.app-page :is(button, a.button, [role=button], [role=tab], .list-item,
    .settings-nav-item, .tab-btn, .rail-icon, .server-icon, .member, .vmem,
    .theme-swatch, .accent-swatch, .orn-cell):active:not(:disabled):not([aria-disabled=true]):not(.disabled):not(:has(button:active)) {
  scale: var(--control-scale);
  --control-press-duration: var(--dur-press-in);
  --control-press-ease: var(--ease-press);
}

/* Replace the old translated press and hover lifts; keep hit targets steady. */
body.app-page button:active:not(:disabled):not(.jump-bottom),
body.app-page :is(.settings-nav-item, .server-icon, .tab-btn, .activity-row,
    .forum-post-row):active,
body.app-page .server-rail .rail-icon:hover:not(.active),
body.app-page .sidebar .list-item:hover,
body.app-page .voice-members .vmem.clickable:hover,
body.app-page :is(.server-icon, .accent-swatch, .fm-folder-swatch):hover,
body.app-page #settingsModalRoot .settings-nav-item:hover {
  transform: none;
}
body.app-page button:is(.lightbox-prev, .lightbox-next):active:not(:disabled) {
  transform: translateY(-50%);
}

/* The ID-scoped settings rule predates the global control pass. */
body.app-page #settingsModalRoot .settings-nav-item {
  transition: scale var(--control-press-duration) var(--control-press-ease),
    background-color var(--control-color-duration) var(--ease-standard),
    color var(--control-color-duration) var(--ease-standard),
    opacity var(--dur-hover) var(--ease-standard);
}

body.app-page :is(.list-item, .sidebar-nav-item, .settings-nav-item, .rail-icon,
    .server-icon, .rail-folder-header, .tab, .tab-btn, .pp-tab, .ytm-tab,
    .mobile-tab, .dock-seg-btn, .perm-tri-btn, .theme-swatch, .accent-swatch,
    .cz-theme-choice, .ns-font-cell, .orn-cell, .vfx-preset, .wb-swatch, .wb-tool, .wb-size,
    [role=tab]):is(.active, .on, .sel, .selected, .contains-active, [aria-selected=true]),
body.app-page button[aria-pressed=true],
body.app-page :is(button, a.button, [role=button], [role=tab]):focus-visible {
  --control-color-duration: 0s;
}
body.app-page :is(.tab, .tab-btn, .pp-tab, .ytm-tab, .mobile-tab,
    .settings-nav-item, .dock-seg-btn, [role=tab])::after {
  transition: none;
}
body.app-page .rail-icon::before {
  transition: transform var(--dur-hover) var(--ease-standard);
}
body.app-page .rail-icon.active::before { transition: none; }

body.app-page :is(.friend-row, .member, .vmem, .check-row) {
  transition: background-color var(--dur-hover) var(--ease-standard),
    color var(--dur-hover) var(--ease-standard),
    scale var(--control-press-duration, var(--dur-press-out)) var(--control-press-ease, var(--ease-out));
}
body.app-page label.check-row + label.check-row::before {
  transition: border-color var(--dur-hover) var(--ease-standard);
}

/* Focus outlines and their box-shadow equivalents must appear in one frame. */
body.app-page :is(input, textarea, select) {
  transition: background-color var(--dur-hover) var(--ease-standard),
    color var(--dur-hover) var(--ease-standard);
}
body.app-page #mainContent .composer,
body.app-page :is(.composer, .settings-search-field, .friends-search-wrap) {
  transition: none;
}
body.app-page :is(input, textarea, select):hover:not(:focus):not([type=checkbox]):not([type=radio]):not([type=range]) {
  transition: background-color var(--dur-hover) var(--ease-standard),
    color var(--dur-hover) var(--ease-standard),
    border-color var(--dur-hover) var(--ease-standard);
}

body.app-page :is(input[type=checkbox], input[type=radio], .dock-switch, .e2ee-switch) {
  transition: background-color var(--dur-toggle) var(--ease-standard),
    border-color var(--dur-toggle) var(--ease-standard);
}
body.app-page label.check-row input[type=checkbox]::before,
body.app-page .dock-knob,
body.app-page .e2ee-switch span {
  transition: transform var(--dur-toggle) var(--ease-standard),
    background-color var(--dur-toggle) var(--ease-standard);
}
body.app-page :is(.e2ee-switch, .dock-toggle) { --control-scale: 1; }

/* Range values follow dragging immediately; only thumb hover uses a transition. */
body.app-page input[type=range] { transition: none; }
body.app-page input[type=range]::-webkit-slider-thumb {
  transition: transform var(--dur-hover) var(--ease-standard),
    background-color var(--dur-hover) var(--ease-standard);
}
body.app-page input[type=range]::-moz-range-thumb {
  transition: transform var(--dur-hover) var(--ease-standard),
    background-color var(--dur-hover) var(--ease-standard);
}

/* Preserve jump-to-present's mounted enter/exit while adding the shared press. */
body.app-page .jump-bottom {
  transition: scale var(--control-press-duration) var(--control-press-ease),
    background-color var(--dur-hover) var(--ease-standard),
    opacity var(--dur-pop-out) var(--ease-exit),
    transform var(--dur-pop-out) var(--ease-exit),
    visibility 0s linear var(--dur-pop-out);
}
body.app-page .jump-bottom.is-visible {
  transition: scale var(--control-press-duration) var(--control-press-ease),
    background-color var(--dur-hover) var(--ease-standard),
    opacity var(--dur-pop-in) var(--ease-out),
    transform var(--dur-pop-in) var(--ease-out), visibility 0s;
}
body.app-page .jump-bottom.is-visible:active { transform: none; }
body.app-page #mainContent .jump-bottom {
  transition: scale var(--control-press-duration) var(--control-press-ease),
    background-color var(--dur-hover) var(--ease-standard),
    opacity 160ms var(--ease-exit), transform 160ms var(--ease-exit),
    visibility 160ms allow-discrete, display 160ms allow-discrete;
}
body.app-page #mainContent .jump-bottom.is-visible {
  transition: scale var(--control-press-duration) var(--control-press-ease),
    background-color var(--dur-hover) var(--ease-standard),
    opacity 220ms var(--ease-out), transform 220ms var(--ease-out),
    visibility 220ms allow-discrete, display 220ms allow-discrete;
}

/* Keep checked thumb positions and rail indicators, but do not animate them. */
body.app-page:is(.reduce-motion, [data-cz-motion=off]) :is(button, a.button,
    [role=button], [role=tab], .list-item, .settings-nav-item, .tab-btn,
    .rail-icon, .server-icon, .member, .vmem, .theme-swatch, .accent-swatch,
    .orn-cell):active {
  --control-scale: 1;
}
body.app-page:is(.reduce-motion, [data-cz-motion=off]) .jump-bottom { transform: none; }
body.app-page:is(.reduce-motion, [data-cz-motion=off]) input[type=range]::-webkit-slider-thumb { transform: none; }
body.app-page:is(.reduce-motion, [data-cz-motion=off]) input[type=range]::-moz-range-thumb { transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.app-page :is(button, a.button, [role=button], [role=tab], .list-item,
      .settings-nav-item, .tab-btn, .rail-icon, .server-icon, .member, .vmem,
      .theme-swatch, .accent-swatch, .orn-cell):active { --control-scale: 1; }
  body.app-page .jump-bottom { transform: none; }
  body.app-page input[type=range]::-webkit-slider-thumb { transform: none; }
  body.app-page input[type=range]::-moz-range-thumb { transform: none; }
}