/* Basic motion only. No selector here targets a wheel, bubble, task canvas or illustration. */
:root {
  --motion-press: 150ms;
  --motion-state: 220ms;
  --motion-page: 280ms;
  --motion-exit: 160ms;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
}
.phone :is(.button, .icon-button, .text-link, .discover-method-row, .discover-scene, .discover-article-row,
  .mine-footprints > a, .mine-profile-link, .mine-personal-card, .mine-list-row, .profile-row[type],
  .profile-avatar-button, .profile-copy, .saved-card-link, .outbox-compose-entry, .record-fold-plane-card,
  .side-menu-row, .side-menu-profile, .personal-space-edit, .records-timeline a,
  .discover-section-heading > a, .outbox-more-menu button, .plane-letter-actions button, .bottom-nav a) {
  transition: scale var(--motion-press) var(--motion-ease), opacity var(--motion-press) var(--motion-ease),
    background-color var(--motion-press) var(--motion-ease), color var(--motion-press) var(--motion-ease),
    border-color var(--motion-press) var(--motion-ease);
}
.phone :is(.button, .icon-button, .text-link, .discover-method-row, .discover-scene, .discover-article-row,
  .mine-footprints > a, .mine-profile-link, .mine-personal-card, .mine-list-row, .profile-row[type],
  .profile-avatar-button, .profile-copy, .saved-card-link, .outbox-compose-entry, .record-fold-plane-card,
  .side-menu-row, .side-menu-profile, .personal-space-edit, .records-timeline a,
  .discover-section-heading > a, .outbox-more-menu button, .plane-letter-actions button, .bottom-nav a):active:not(:disabled):not([aria-disabled="true"]) {
  scale: .985; opacity: .86;
}
/* Replace the old 1px jump; independent scale never overwrites a component's transform. */
.phone .button:is(.primary, .secondary, .inline):active:not(:disabled) { transform: none; }
.phone :is(.context-option, .check-option, .feedback-sample button, .discover-filters button,
  .saved-filters button, .records-scale button, .records-day, .preference-radio, .mine-setting-row) {
  transition: background-color var(--motion-state) var(--motion-ease), color var(--motion-state) var(--motion-ease),
    border-color var(--motion-state) var(--motion-ease), opacity var(--motion-press) var(--motion-ease);
}
.phone :is(.context-option, .check-option, .feedback-sample button, .discover-filters button,
  .saved-filters button, .records-scale button, .records-day):active:not(:disabled) { opacity: .75; }
.bottom-nav a::before { transition: background-color var(--motion-press) var(--motion-ease); }
.mine-disclosure summary { transition: color var(--motion-press) var(--motion-ease); }
.mine-disclosure summary .icon { transition: transform var(--motion-state) var(--motion-ease); }
/* Native details keeps its semantics; supported browsers smoothly release layout space. */
@supports (interpolate-size: allow-keywords) {
  .mine-disclosure { interpolate-size: allow-keywords; }
  .mine-disclosure::details-content {
    height: 0; opacity: 0; overflow: clip;
    transition: height var(--motion-state) var(--motion-ease), opacity var(--motion-state) var(--motion-ease),
      content-visibility var(--motion-state) allow-discrete;
  }
  .mine-disclosure[open]::details-content { height: auto; opacity: 1; }
}
/* Capture the opaque shell with its content: separate snapshots expose the new
   phone background while the outgoing content fades (especially orange Mine). */
html[data-navigation-motion] .phone { view-transition-name: app-view; }
html[data-navigation-motion]::view-transition { pointer-events: none; }
html[data-navigation-motion]::view-transition-group(*),
html[data-navigation-motion]::view-transition-image-pair(*),
html[data-navigation-motion]::view-transition-old(*),
html[data-navigation-motion]::view-transition-new(*) { pointer-events: none; }
html[data-navigation-motion]::view-transition-group(root),
html[data-navigation-motion]::view-transition-old(root),
html[data-navigation-motion]::view-transition-new(root) { animation: none; }
html[data-navigation-motion]::view-transition-old(root) { display: none; }
html[data-navigation-motion]::view-transition-group(app-view) { animation-duration: var(--motion-page); overflow: clip; border-radius: 28px; }
html[data-navigation-motion]::view-transition-old(app-view),
html[data-navigation-motion]::view-transition-new(app-view) { mix-blend-mode: normal; }
/* An opaque, stationary underlay prevents a brightness dip or exposed background. */
html[data-navigation-motion]::view-transition-old(app-view) { animation: none; opacity: 1; }
html[data-navigation-motion]::view-transition-new(app-view) { animation: page-in var(--motion-page) var(--motion-ease) both; }
html[data-navigation-motion="back"] { --page-enter-x: -12px; }
html[data-navigation-motion="forward"] { --page-enter-x: 12px; }
html[data-navigation-motion="tab"] { --page-enter-x: 0px; --motion-page: 240ms; }
@media (max-width: 760px) { html[data-navigation-motion]::view-transition-group(app-view) { border-radius: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateX(var(--page-enter-x)); } to { opacity: 1; transform: translateX(0); } }
/* Popovers retain the native top layer, light dismiss, Escape and focus behavior. */
.outbox-more-menu {
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top right;
  transition: opacity var(--motion-exit) var(--motion-ease), transform var(--motion-exit) var(--motion-ease),
    display var(--motion-exit) allow-discrete, overlay var(--motion-exit) allow-discrete;
}
.outbox-more-menu:popover-open { opacity: 1; transform: none; transition-duration: var(--motion-state); }
@starting-style { .outbox-more-menu:popover-open { opacity: 0; transform: translateY(-4px) scale(.98); } }
:is(.outbox-dialog, .profile-editor)[open] { animation: dialog-in var(--motion-state) var(--motion-ease) both; }
:is(.outbox-dialog, .profile-editor)[open]::backdrop { animation: overlay-in var(--motion-state) var(--motion-ease) both; }
:is(.outbox-dialog, .profile-editor).is-closing { pointer-events: none; animation: none; }
:is(.outbox-dialog, .profile-editor).is-closing::backdrop { animation: overlay-out var(--motion-exit) var(--motion-ease) both; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlay-out { from { opacity: 1; } to { opacity: 0; } }
/* Keep the approved centered success HUD and its timing exactly as authored. */
.toast:not(.toast--centered-success) { animation: overlay-in 180ms var(--motion-ease) both; }
.toast:not(.toast--centered-success).is-leaving { animation: overlay-out 150ms var(--motion-ease) both; }
/* Existing reduced-motion rules still protect specialty motion. Basic state feedback remains. */
.reduce-motion { --motion-press: 80ms; --motion-state: 100ms; --motion-exit: 80ms; }
.reduce-motion :is(.button, .icon-button, .text-link, .discover-method-row, .discover-scene, .discover-article-row,
  .mine-footprints > a, .mine-profile-link, .mine-personal-card, .mine-list-row, .profile-row[type],
  .profile-avatar-button, .profile-copy, .saved-card-link, .outbox-compose-entry, .record-fold-plane-card,
  .side-menu-row, .side-menu-profile, .personal-space-edit, .records-timeline a, .outbox-more-menu button,
  .bottom-nav a, .plane-letter-actions button, .context-option, .check-option, .feedback-sample button, .discover-filters button,
  .saved-filters button, .records-scale button, .records-day, .preference-radio, .mine-setting-row) {
  scale: none !important; transition: opacity 80ms ease-out, background-color 100ms ease-out, color 100ms ease-out !important;
}
@media (prefers-reduced-motion: reduce) {
  .phone :is(.button, .icon-button, .text-link, .discover-method-row, .discover-scene, .discover-article-row,
    .mine-footprints > a, .mine-profile-link, .mine-personal-card, .mine-list-row, .profile-row[type],
    .profile-avatar-button, .profile-copy, .saved-card-link, .outbox-compose-entry, .record-fold-plane-card,
    .side-menu-row, .side-menu-profile, .personal-space-edit, .records-timeline a, .outbox-more-menu button,
    .bottom-nav a, .plane-letter-actions button, .context-option, .check-option, .feedback-sample button, .discover-filters button,
    .saved-filters button, .records-scale button, .records-day, .preference-radio, .mine-setting-row) {
    scale: none !important; transition: opacity 80ms ease-out, background-color 100ms ease-out, color 100ms ease-out !important;
  }
}