Why is my modal not animating from the center of the screen?

Question

The Goal: I would like my .modal class div to scale from 0 to 1 from the dead center of the screen. Currently, it originates on the bottom right of the screen and slowly progresses to the center before popping into the final location. I've tried reviewing the documentation on MDN for keyframes, transform-origin, position fixed, and other things I thought could cause the behavior and I'm lost. Any help would be appreciated especially if you can explain why this happens because I want to understand what I'm doing wrong.

CodePen Link: https://codepen.io/AlfredGarcia/pen/zYPNWgM?editors=1100

HTML:

<div class="modal">
  <header class="modal__header">
    <h3 class="modal__title">Attention</d>
  </header>
  <div class="modal__content">
    <p class="modal__message">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odit quibusdam debitis est voluptatem recusandae aliquid neque rerum, eum cum distinctio illum excepturi veniam illo suscipit, assumenda hic placeat minima? Ipsum.</p>
  </div>
  <div class="modal__actions">
    <button class="btn btn--positive" type="button">Confirm</button>
    <button class="btn btn--negative" type="button">Decline</button>
  </div>
</div>

CSS

.modal {
  border-radius: 0.625em;
  box-shadow: 0 2px 10px -4px black;
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  animation: 5s ease-in fadein;
}

.modal__header {
  background-color: lightgray;
  border-top-left-radius: 0.625em;
  border-top-right-radius: 0.625em;
  padding: 0.75em 0 0.75em 1em;
}

.modal__title {
  font: 1.25rem/1.1 poppins, sans-serif;
  margin: 0;
}

.modal__content {
  padding: 1em;
}

.modal__message {
  font: 1rem/1.4 calibri, sans-serif;
  margin: 0;
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 1em 1em 1em;
}

.btn {
  padding: 0.625em 1.25em;
  display: block;
  border: none;
  border-radius: 0.625em;
  box-shadow: 0 2px 10px -4px black;
  text-transform: uppercase;
}

.btn:active {
  transform: translateY(3px);
}

.btn + .btn {
  margin-left: 1em;
}

.btn--positive {
  background-color: lightgreen;
}

.btn--positive:hover {
  filter: brightness(110%);
}

.btn--negative {
  background-color: #ff3131;
  filter: brightness(90%);
  color: white;
}

.btn--negative:hover {
  filter: brightness(100%);
}

@keyframes fadein {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}