:root{--motion-ease:cubic-bezier(.2,.7,.2,1);--motion-quick:140ms;--motion-enter:180ms}

@keyframes surface-enter{from{opacity:0;transform:translateY(6px) scale(.995)}to{opacity:1;transform:none}}
@keyframes sheet-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes section-enter{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes check-feedback{from{transform:scale(.9)}to{transform:scale(1)}}

@media(prefers-reduced-motion:no-preference){
  :is(.tasks-panel,.task-dialog,.task-time-dialog,.task-date-dialog,.task-description-dialog,.task-report-dialog,.confirmation-dialog,.shortcut-dialog)[open]{animation:surface-enter var(--motion-enter) var(--motion-ease)}
  .tasks-panel[data-layout=sheet][open]{animation:sheet-enter 200ms var(--motion-ease)}
  :is(.actions-popup,.format-popup):not([hidden]){animation:surface-enter var(--motion-quick) var(--motion-ease);transform-origin:top center}
  .note-section.section-enter{animation:section-enter 200ms var(--motion-ease)}
  .task-state-feedback .task-chip-check svg{animation:check-feedback var(--motion-enter) var(--motion-ease);transform-origin:center}
  .task-chip-check .task-chip-box,.task-chip-check .task-chip-tick{transition:fill var(--motion-quick),stroke var(--motion-quick),opacity var(--motion-quick)}
  :is(.task-action,.task-chip,.task-chip-wrap,.tasks-toggle,.section-task-control,.sections-empty button){transition:background-color var(--motion-quick),border-color var(--motion-quick),color var(--motion-quick),box-shadow var(--motion-quick)}
  :is(.task-row-actions>.task-action,.task-time-choices>.task-action,.tasks-add-group,.sections-empty button):active{transform:translateY(1px)}

  /* Native close stays synchronous; only the rendered surface fades out. */
  @supports (transition-behavior:allow-discrete) and (overlay:auto){
    :is(.tasks-panel,.task-dialog,.task-time-dialog,.task-date-dialog,.task-description-dialog,.task-report-dialog,.confirmation-dialog,.shortcut-dialog){opacity:0;transform:translateY(6px) scale(.995);transition:opacity var(--motion-quick) ease,transform var(--motion-enter) var(--motion-ease),display var(--motion-enter) allow-discrete,overlay var(--motion-enter) allow-discrete}
    :is(.tasks-panel,.task-dialog,.task-time-dialog,.task-date-dialog,.task-description-dialog,.task-report-dialog,.confirmation-dialog,.shortcut-dialog)[open]{animation:none;opacity:1;transform:none}
    .tasks-panel[data-layout=sheet]{transform:translateY(14px)}
    .tasks-panel[data-layout=sheet][open]{animation:none;transform:none}
    :is(.tasks-panel,.task-dialog,.task-time-dialog,.task-date-dialog,.task-description-dialog,.task-report-dialog,.confirmation-dialog,.shortcut-dialog):not([open]){pointer-events:none}
    :is(.tasks-panel,.task-dialog,.task-time-dialog,.task-date-dialog,.task-description-dialog,.task-report-dialog,.confirmation-dialog,.shortcut-dialog)::backdrop{opacity:0;transition:opacity var(--motion-enter) ease,display var(--motion-enter) allow-discrete,overlay var(--motion-enter) allow-discrete}
    :is(.tasks-panel,.task-dialog,.task-time-dialog,.task-date-dialog,.task-description-dialog,.task-report-dialog,.confirmation-dialog,.shortcut-dialog)[open]::backdrop{opacity:1}
    :is(.tasks-panel,.task-dialog,.task-time-dialog,.task-date-dialog,.task-description-dialog,.task-report-dialog,.confirmation-dialog,.shortcut-dialog):not([open])::backdrop{pointer-events:none}
    @starting-style{
      :is(.tasks-panel,.task-dialog,.task-time-dialog,.task-date-dialog,.task-description-dialog,.task-report-dialog,.confirmation-dialog,.shortcut-dialog)[open]{opacity:0;transform:translateY(6px) scale(.995)}
      .tasks-panel[data-layout=sheet][open]{transform:translateY(14px)}
      :is(.tasks-panel,.task-dialog,.task-time-dialog,.task-date-dialog,.task-description-dialog,.task-report-dialog,.confirmation-dialog,.shortcut-dialog)[open]::backdrop{opacity:0}
    }
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .note-screen *,.note-screen *::before,.note-screen *::after,.confirmation-dialog,.confirmation-dialog::backdrop,.task-date-dialog,.task-date-dialog *,.task-date-dialog::backdrop,.task-description-dialog,.task-description-dialog *,.task-description-dialog::backdrop{animation:none!important;transition:none!important}
}