@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  body {
    animation: app-fade 0.28s ease both;
  }
  main > * {
    animation: page-rise 0.42s cubic-bezier(0.2, 0.75, 0.25, 1) both;
  }
  main > *:nth-child(2) {
    animation-delay: 0.035s;
  }
  main > *:nth-child(3) {
    animation-delay: 0.07s;
  }
  main > *:nth-child(4) {
    animation-delay: 0.105s;
  }
  .panel,
  .page-card,
  .tool,
  .formats button,
  .directory-tile,
  .preview-tools a,
  .preview-formats a,
  .nav,
  .page-action,
  .ghost,
  .primary,
  .user-drawer-nav a {
    transition:
      transform 0.22s ease,
      border-color 0.22s ease,
      box-shadow 0.22s ease,
      background-color 0.22s ease,
      color 0.22s ease,
      opacity 0.22s ease;
  }
  .sidebar,
  .mobile-head,
  .page-mobile-head,
  .topbar,
  .page-head {
    transition:
      box-shadow 0.3s ease,
      background-color 0.3s ease,
      border-color 0.3s ease;
  }
  .sidebar .nav,
  .sidebar-user-main,
  .sidebar-user-links a,
  .bottom-nav a {
    transition:
      transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.22s ease,
      color 0.22s ease;
  }
  .sidebar .nav:hover,
  .sidebar-user-main:hover,
  .bottom-nav a:hover {
    transform: translateX(3px);
  }
  .bottom-nav a:hover {
    transform: translateY(-2px);
  }
  .user-avatar,
  .profile-avatar-large,
  .upload-icon,
  .tool-icon,
  .settings-section-head > span {
    transition:
      transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.28s ease,
      filter 0.28s ease;
  }
  .user-menu-trigger:hover .user-avatar,
  .profile-avatar-large:hover,
  .panel:hover .settings-section-head > span {
    transform: scale(1.06) rotate(-2deg);
  }
  .panel:hover,
  .page-card:not(.wide):hover {
    box-shadow: 0 22px 55px rgba(16, 28, 54, 0.11);
  }
  .tool:hover,
  .formats button:hover,
  .directory-tile:hover,
  .preview-tools a:hover,
  .preview-formats a:hover {
    transform: translateY(-3px);
  }
  .page-action:hover,
  .ghost:hover,
  .primary:not(:disabled):hover {
    transform: translateY(-1px);
    filter: brightness(1.025);
  }
  .page-action:active,
  .ghost:active,
  .primary:not(:disabled):active {
    transform: translateY(1px) scale(0.99);
  }
  input,
  select {
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      background-color 0.2s ease;
  }
  textarea,
  button,
  a {
    transition-property:
      transform, opacity, color, background-color, border-color, box-shadow,
      filter;
    transition-duration: 0.22s;
    transition-timing-function: ease;
  }
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    transition-duration: 0.12s;
  }
  .page-list > *,
  #fileList > *,
  [data-files] > *,
  .history-row,
  .file-row {
    animation: list-enter 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition:
      transform 0.22s ease,
      box-shadow 0.22s ease,
      border-color 0.22s ease,
      background-color 0.22s ease;
  }
  .page-list > *:hover,
  #fileList > *:hover,
  [data-files] > *:hover,
  .history-row:hover,
  .file-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px #101c3610;
  }
  .formats button i,
  .tool i,
  .tool-icon {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .formats button:hover i,
  .tool:hover i,
  .tool:hover .tool-icon {
    transform: scale(1.1) rotate(-3deg);
  }
  .switch span,
  .switch span:after {
    transition:
      background-color 0.28s ease,
      transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.25s ease;
  }
  .switch input:checked + span {
    box-shadow: 0 0 0 4px #2969e814;
  }
  .progress span {
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .pro-modal-backdrop,
  .user-drawer-overlay {
    transition:
      opacity 0.28s ease,
      visibility 0.28s ease,
      backdrop-filter 0.28s ease;
  }
  .pro-modal {
    transform: translateY(18px) scale(0.97);
    transition:
      transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.25s ease;
  }
  .pro-modal-backdrop.open .pro-modal {
    transform: none;
  }
  .user-drawer {
    transition:
      transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.3s ease;
  }
  details {
    interpolate-size: allow-keywords;
  }
  details > p,
  details > form {
    transition:
      opacity 0.25s ease,
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  details:not([open]) > p,
  details:not([open]) > form {
    opacity: 0;
    transform: translateY(-6px);
  }
  details[open] > p,
  details[open] > form {
    animation: details-reveal 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .help-hub .faq details {
    transition:
      border-color 0.25s ease,
      box-shadow 0.3s ease,
      background-color 0.25s ease;
  }
  .help-hub .faq summary:after {
    transition:
      transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      color 0.2s ease;
  }
  .account-billing-banner,
  .plan-banner {
    transition:
      transform 0.28s ease,
      box-shadow 0.3s ease;
  }
  .account-billing-banner:hover,
  .plan-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 55px #061a3d24;
  }
  [data-save-status]:not(:empty),
  .notification,
  .toast {
    animation: toast-arrive 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .password-change {
    interpolate-size: allow-keywords;
  }
  .password-change form {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition:
      height 0.35s ease,
      opacity 0.25s ease,
      transform 0.35s ease,
      margin 0.35s ease,
      padding 0.35s ease;
  }
  .password-change[open] form {
    height: auto;
    opacity: 1;
    transform: none;
    margin-top: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .password-change summary > span:last-child {
    transition: transform 0.25s ease;
  }
  .password-change[open] summary > span:last-child {
    transform: rotate(90deg);
  }
  details > summary {
    transition:
      color 0.2s ease,
      background-color 0.2s ease;
  }
  .tools {
    transition: grid-template-rows 0.3s ease;
  }
  .tools-expand span {
    transition: transform 0.25s ease;
  }
  .tools-expand[aria-expanded="true"] span {
    transform: rotate(180deg);
  }
  @keyframes app-fade {
    from {
      opacity: 0.65;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes page-rise {
    from {
      opacity: 0;
      transform: translateY(9px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes list-enter {
    from {
      opacity: 0;
      transform: translateY(7px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes details-reveal {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes toast-arrive {
    from {
      opacity: 0;
      transform: translateX(22px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}