Размытый текст из-за его вращения родителей

Question

У меня есть несколько контейнеров, которыми манипулируют. Первый контейнер content__first, этот контейнер вращается, его первый дочерний элемент (content__move) обрабатывается по ширине и высоте, а content__revers вращается в направлении, противоположном content move:

В конце концов, это будет выглядеть как обычный контейнер, так как он зафиксирован и его содержимое поворачивается обратно в обычное положение. Но почему-то весь текст немного размыт , я думаю, из-за его поворота дважды. Как я могу предотвратить потерю резкости и оставаться в нормальном состоянии?

Кстати, это трудно увидеть на экране с ма c и более высоким разрешением - но на экране Windows Full HD есть огромная разница.

document.addEventListener('DOMContentLoaded', () => {
    const options = {
        angle: 16
    };

    const DOM = {};
    DOM.el = document.querySelector('.content__first');
    DOM.inner = DOM.el.firstElementChild;

    DOM.inner.style.width = `calc(100vw * ${Math.abs(Math.cos(options.angle * Math.PI / 180))} + 100vh * ${Math.abs(Math.sin(options.angle * Math.PI / 180))})`;
    DOM.inner.style.height = `calc(100vw * ${Math.abs(Math.sin(options.angle * Math.PI / 180))} + 100vh * ${Math.abs(Math.cos(options.angle * Math.PI / 180))})`;
    DOM.el.style.transform = `rotate3d(0,0,1,${options.angle}deg)`;

    DOM.reverse = DOM.inner.querySelector('.content__reverse');
    if (DOM.reverse) {
        gsap.set(DOM.reverse, {rotation: -1 * options.angle});
    }
});

.content, .content__move {
  width: 100%;
  height: 100vh;
  z-index: 99;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  align-items: center;
  grid-area: 1 / 1 / 2 / 2;
  justify-self: center;
}

.content__first {
  position: fixed;
}

.content__move {
  width: 100%;
  height: 100vh;
  will-change: transform;
  overflow: hidden;
  background: #333333;
}

.content__reverse {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  will-change: transform;
}

.intro {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}

h1 {
  color: white;
  align-self: center;
  font-size: 5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<div class="content content__first">
  <div class="content__move">
    <div class="content__reverse">
      <div class="intro">
        <h1>This is blurry</h1>
      </div>
    </div>
  </div>
</div>