@media (prefers-reduced-motion: no-preference) {
  .app-shell {
    animation: surface-in 440ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .topbar,
  .folder-rail,
  .content-grid {
    animation: surface-in 520ms var(--ease-decel) both;
  }

  .quick-input {
    animation: quick-input-in 520ms var(--ease-decel) both;
  }

  button,
  .list-item,
  .glass-panel,
  .app-shell,
  .brand-copy,
  .folder-copy,
  .folder-button,
  .logout-form button,
  .logout-form b,
  .folder-icon,
  .mobile-explorer {
    transition:
      width 460ms var(--ease-decel),
      border-color 260ms var(--ease-decel),
      background-color 260ms var(--ease-decel),
      box-shadow 360ms var(--ease-decel),
      opacity 300ms var(--ease-decel),
      transform 460ms var(--ease-decel),
      gap 420ms var(--ease-decel),
      padding 300ms var(--ease-decel),
      color 260ms var(--ease-decel);
  }

  .content-grid {
    transition: grid-template-columns 260ms var(--ease-decel);
  }

  button:hover,
  .list-item:hover {
    transform: translateY(-1px);
  }

  .folder-button:hover,
  .folder-button:focus-visible,
  .logout-form button:hover,
  .logout-form button:focus-visible {
    transform: translateX(0) scale(1.015);
  }

  .todo-open:hover,
  .todo-open:focus-visible {
    transform: none !important;
  }

  .toast {
    animation: toast-in 180ms ease both;
  }

  .quick-status {
    transition: color 180ms ease;
  }

  .quick-input {
    transition:
      border-color 180ms ease,
      background-color 180ms ease,
      box-shadow 180ms ease,
      opacity 180ms ease,
      transform 180ms ease;
  }
}

@media (max-width: 780px) {
  /* Fixed mobile detail must not inherit filled animation transforms from
     ancestors, or Safari treats the grid as its containing block. */
  body.mobile-detail-open .app-shell,
  body.mobile-detail-open .content-grid,
  body.mobile-detail-open .detail-pane {
    animation: none !important;
    transform: none !important;
  }

  body.mobile-detail-open .app-shell.has-open-detail .detail-pane {
    position: fixed;
    inset: max(8px, calc(var(--safe-top) + 8px)) 8px max(8px, calc(var(--safe-bottom) + 8px));
    width: auto;
    height: auto;
  }

  body.mobile-detail-open .quick-input {
    animation: none !important;
    opacity: 0 !important;
    pointer-events: none;
    transform: translateY(calc(100% + 24px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@keyframes surface-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes quick-input-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}