/* User surfaces only. Resting content is always visible and interactive. */
:is(.app-shell.app-shell--warm-cream:not(.app-shell--admin),body.perler-managed:not(.perler-admin-direct)) {
  --motion-out:cubic-bezier(.16,1,.3,1);
  --motion-snap:cubic-bezier(.2,1.35,.35,1);
}
:is(.app-shell.app-shell--warm-cream:not(.app-shell--admin),body.perler-managed:not(.perler-admin-direct)) :is(button,a[href],[role="button"],label.home-upload,label.cream-crop-replace):not([class*="backdrop"]):not(.crop-handle) {
  transition:scale 220ms var(--motion-snap),background-color 180ms ease,border-color 180ms ease,color 180ms ease;
}
:is(.app-shell.app-shell--warm-cream:not(.app-shell--admin),body.perler-managed:not(.perler-admin-direct)) :is(button,a[href],[role="button"],label.home-upload,label.cream-crop-replace):not(:disabled):not([aria-disabled="true"]):not([class*="backdrop"]):not(.crop-handle):active {
  scale:.97;transition-duration:100ms;
}
.app-shell.app-shell--warm-cream .bottom-nav a.active svg,
body.perler-managed:not(.perler-admin-direct) .perler-bottom-actions button[aria-pressed="true"] svg {
  animation:user-motion-select 220ms var(--motion-out);
}
@keyframes user-motion-select {0%{translate:0 2px;scale:.92}65%{translate:0 -2px;scale:1.06}100%{translate:0 0;scale:1}}
@keyframes user-motion-panel {from{opacity:.35;translate:0 10px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes user-motion-exit {to{opacity:0;translate:0 6px;scale:.99}}
@keyframes user-motion-fade {from{opacity:.4}to{opacity:1}}
@keyframes user-motion-fade-out {to{opacity:0}}
@keyframes user-motion-success {0%{scale:.88}60%{scale:1.08}100%{scale:1}}
.app-shell.app-shell--warm-cream :is(.confirm-backdrop,.editor-download-overlay) {animation:user-motion-fade 240ms ease-out}
.app-shell.app-shell--warm-cream :is(.confirm-backdrop,.editor-download-overlay)>[role="dialog"] {animation:user-motion-panel 280ms var(--motion-out)}
.user-motion-presence {display:contents}
.app-shell.app-shell--warm-cream .user-motion-presence[data-motion-phase="exit"] :is(.confirm-backdrop,.editor-download-overlay) {
  pointer-events:none;animation:user-motion-fade-out 160ms ease-in both;
}
.app-shell.app-shell--warm-cream .user-motion-presence[data-motion-phase="exit"] [role="dialog"] {animation:user-motion-exit 160ms ease-in both}
.app-shell.app-shell--warm-cream :is(.user-project-row:not(.user-project-skeleton),.live-notice:not([hidden]),.profile-account-success,.editor-source-error,.upload-card) {animation:user-motion-fade 180ms ease-out}
.app-shell.app-shell--warm-cream .profile-account-success svg {animation:user-motion-success 240ms var(--motion-out)}
.app-shell.app-shell--warm-cream .editor-compact-header[data-motion-saved="true"] :is(.editor-save-now,.editor-download-now) svg {animation:user-motion-success 240ms var(--motion-out)}
.app-shell.app-shell--warm-cream .job-motion-title {animation:user-motion-fade 180ms ease-out}
/* Native dialogs keep native focus/escape/form behavior, including during interruption. */
body.perler-managed:not(.perler-admin-direct) dialog {
  opacity:0;translate:0 6px;scale:.99;
  transition:opacity 160ms ease-in,translate 160ms ease-in,scale 160ms ease-in,display 160ms allow-discrete,overlay 160ms allow-discrete;
}
body.perler-managed:not(.perler-admin-direct) dialog[open] {
  opacity:1;translate:0 0;scale:1;
  transition-duration:280ms;transition-timing-function:var(--motion-out);
}
body.perler-managed:not(.perler-admin-direct) dialog::backdrop {
  opacity:0;transition:opacity 160ms ease-in,display 160ms allow-discrete,overlay 160ms allow-discrete;
}
body.perler-managed:not(.perler-admin-direct) dialog[open]::backdrop {opacity:1;transition-duration:280ms}
@starting-style {
  body.perler-managed:not(.perler-admin-direct) dialog[open] {opacity:.35;translate:0 10px;scale:.985}
  body.perler-managed:not(.perler-admin-direct) dialog[open]::backdrop {opacity:0}
}
/* Preserve existing drag transform; use independent translate only on the sheet card. */
body.perler-managed:not(.perler-admin-direct) .perler-sheet {transition:display 160ms allow-discrete}
body.perler-managed:not(.perler-admin-direct) .perler-sheet .perler-sheet-card {
  opacity:0;translate:0 10px;transition:opacity 160ms ease-in,translate 160ms ease-in;
}
body.perler-managed:not(.perler-admin-direct) .perler-sheet.is-mobile-active .perler-sheet-card {opacity:1;translate:0 0;transition-duration:280ms;transition-timing-function:var(--motion-out)}
body.perler-managed:not(.perler-admin-direct) .perler-sheet-card.is-dragging {transition:none}
@starting-style {body.perler-managed:not(.perler-admin-direct) .perler-sheet.is-mobile-active .perler-sheet-card {opacity:0;translate:0 10px}}
/* Inline palette is a permanent editor control, not an opening sheet. */
body.perler-managed:not(.perler-admin-direct).perler-editing-mode .perler-palette-panel .perler-sheet-card {opacity:1;translate:none;transition:none}
body.perler-managed:not(.perler-admin-direct) .perler-status:not([hidden]) {animation:user-motion-fade 180ms ease-out}
body.perler-managed:not(.perler-admin-direct) .perler-status[data-tone="success"]:not([hidden]) {animation:user-motion-success 240ms var(--motion-out)}
:is(.app-shell.app-shell--warm-cream,body.perler-managed:not(.perler-admin-direct)) [data-user-motion-offscreen],
:is(.app-shell.app-shell--warm-cream,body.perler-managed:not(.perler-admin-direct)) [data-user-motion-offscreen] *,
html[data-user-motion-paused] :is(.app-shell.app-shell--warm-cream,body.perler-managed:not(.perler-admin-direct)) *,
html[data-user-motion-paused] :is(.app-shell.app-shell--warm-cream,body.perler-managed:not(.perler-admin-direct)) *::before,
html[data-user-motion-paused] :is(.app-shell.app-shell--warm-cream,body.perler-managed:not(.perler-admin-direct)) *::after {animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce) {
  :is(.app-shell.app-shell--warm-cream:not(.app-shell--admin),body.perler-managed:not(.perler-admin-direct)) *,
  :is(.app-shell.app-shell--warm-cream:not(.app-shell--admin),body.perler-managed:not(.perler-admin-direct)) *::before,
  :is(.app-shell.app-shell--warm-cream:not(.app-shell--admin),body.perler-managed:not(.perler-admin-direct)) *::after {
    animation:none!important;transition:none!important;scroll-behavior:auto!important;
  }
  :is(.app-shell.app-shell--warm-cream,body.perler-managed:not(.perler-admin-direct)) :is(button,a[href],[role="button"],label.home-upload,label.cream-crop-replace):active {scale:1}
  body.perler-managed:not(.perler-admin-direct) dialog,
  body.perler-managed:not(.perler-admin-direct) .perler-sheet .perler-sheet-card {translate:none;scale:1}
}