こんにちは。
質問です。復習不足でしたらすいません。

classList の add と remove についてですが、

• add : なにかを追加するイメージ
• remove : なにかを削除するイメージ

で認識しています。調べてみましたが同様の解説でした。

動画の「どうするかというと、 mask や modal についている hidden クラスを外してあげればいいので、 classList を使っていきます。では、 remove('hidden') としてあげましょう。」で

#modal.hidden {
  transform: translate( 0, -500px);
}(ページの外)

この位置から取り除いて画面の中に動かしている。

また動画内の
「 modal と mask を消したいので、 hidden クラスをつけてあげれば OK でしょう。では、こちらで remove ではなくて、 add にしてあげれば OK です。」で

#modal.hidden {
  transform: translate( 0, -500px);
}

ページの中からこの位置に加えている(戻している)

という認識でよろしいでしょうか。

また上記の認識であっていたとしてどうして mask, modal が画面のあの位置に出てくるのでしょうか？
(仕様でしたらそのままおぼえます)
ちゃんと理解できておらずかみ砕いていただけると幸いです。

よろしくお願いいたします。