/* Motion only: the existing theme owns colour, geometry, typography and artwork. */
:root {
  --motion-press: 90ms;
  --motion-ui: 180ms;
  --motion-enter: 320ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Release the old permanent compositor hints; sprites and room dragging are excluded. */
body :is(.primary-button,.soft-button,.outline-button,.ghost-button,.icon-button,
  .round-button,.notification-button,.profile-trigger,.nav-item,.feed-mode,.feed-filter,
  .settings-tab,.close-modal,.post-social-bar>button,.composer-actions>button,
  .message-composer-tools>button,#sendMessageButton,.groven-device-actions>button,
  .groven-device-transport>button,.hub-back-button,.hub-primary-grid>button) {
  will-change: auto;
}

@media (prefers-reduced-motion: no-preference) {
  body :is(.primary-button,.soft-button,.outline-button,.ghost-button,.icon-button,
    .round-button,.notification-button,.profile-trigger,.nav-item,.feed-mode,.feed-filter,
    .settings-tab,.close-modal,.post-social-bar>button,.composer-actions>button,
    .message-composer-tools>button,#sendMessageButton,.groven-device-actions>button,
    .groven-device-transport>button,.hub-back-button,.hub-primary-grid>button) {
    transition-property: border-color, box-shadow, background-color, color, opacity, scale;
    transition-duration: var(--motion-ui);
    transition-timing-function: var(--motion-ease);
  }

  /* Keep hit areas and the six navigation cells anchored, including iOS emulated hover. */
  body :is(.primary-button,.soft-button,.outline-button,.ghost-button,.icon-button,
    .round-button,.notification-button,.profile-trigger,.nav-item,.feed-mode,.feed-filter,
    .settings-tab,.close-modal,.post-social-bar>button,.composer-actions>button,
    .message-composer-tools>button,#sendMessageButton,.groven-device-actions>button,
    .groven-device-transport>button,.hub-back-button,.hub-primary-grid>button):not(:disabled):is(:hover,:active) {
    transform: none !important;
    animation: none !important;
  }

  body :is(.primary-button,.soft-button,.outline-button,.ghost-button,.icon-button,
    .round-button,.notification-button,.profile-trigger,.nav-item,.feed-mode,.feed-filter,
    .settings-tab,.close-modal,.post-social-bar>button,.composer-actions>button,
    .message-composer-tools>button,#sendMessageButton,.groven-device-actions>button,
    .groven-device-transport>button,.hub-back-button,.hub-primary-grid>button):not(:disabled):not([aria-disabled="true"]):active {
    opacity: .82;
    transition-duration: var(--motion-press);
  }

  /* A restrained tactile press for standalone actions, never equal-width controls. */
  body :is(.primary-button,.soft-button,.outline-button):not(:disabled):not([aria-disabled="true"]):active {
    scale: .985;
  }
  body :is(.composer-actions,.feed-mode-switch,.feed-filters,.guest-filters,.guest-nav,
    .guest-access,.main-nav,.header-actions,.post-social-bar,.profile-stats,.hub-profile-stats,
    .friend-card-actions,.community-card-actions,.shop-item-controls,.hub-event-actions,
    .groven-device-actions,.groven-device-transport,.spotify-track-actions,
    .message-composer-tools)>:is(button,a),
  body #sendMessageButton {
    scale: none !important;
  }

  body :is(input:not([type="range"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),textarea,select) {
    transition: border-color var(--motion-ui) var(--motion-ease),
      box-shadow var(--motion-ui) var(--motion-ease);
  }

  /* Opacity does not turn a page into a containing block for fixed navigation. */
  body .screen.is-active,
  body .page.active-page,
  body #hubPage.active-page,
  body .settings-panel.active {
    animation: groven-surface-in var(--motion-enter) var(--motion-ease);
  }
  body dialog.modal[open]:not(.comments-modal) {
    animation: groven-dialog-in var(--motion-enter) var(--motion-ease);
  }
  body dialog.modal[open]::backdrop {
    animation: groven-surface-in var(--motion-ui) ease-out;
  }
  body .toast {
    transition-property: opacity, transform;
    transition-duration: var(--motion-enter);
    transition-timing-function: var(--motion-ease);
  }

  @keyframes groven-surface-in {
    from { opacity: .35; }
    to { opacity: 1; }
  }
  @keyframes groven-dialog-in {
    from { opacity: .25; translate: 0 8px; scale: .99; }
    to { opacity: 1; translate: 0 0; scale: 1; }
  }
}

/* Existing component-specific reduced-motion rules remain in force as well. */
@media (prefers-reduced-motion: reduce) {
  body .screen.is-active,
  body .page.active-page,
  body #hubPage.active-page,
  body .settings-panel.active,
  body dialog.modal[open],
  body dialog.modal[open]::backdrop {
    animation: none !important;
  }
}