Почему resize срабатывает только после перезагрузки страницы?

//3D КРУГ//

function circle3D() {
if (document.documentElement.clientWidth > 480) {
    let radius = 180;
    let countCircle = -1;
    function generateLetters(selector, text, colorCircle) {
        const letters = text.split('');
        const step = 360 / letters.length;
        countCircle = -1; // Сброс счетчика слов
        letters.forEach((l, i) => {
            const span = document.createElement('span');
            changeColor(l, span, colorCircle);
            const deg = step * i;
            span.style.transform = transform(deg, radius);
            selector.append(span);
        });
    }
    function changeColor(l, span, colorCircle) {
        if (l.toUpperCase() === l) ++countCircle; //Определяем новое слово по заглавной букве и увеличиваем счетчик слов
        span.innerText = l.toUpperCase(); //В css к верхнему регистру не приводим делаем это здесь
        span.style.color = colorCircle[countCircle]; //Присваиваем цвет
    }
    function transform(deg, radius = 180) {
        return `rotateY(${deg}deg) translateZ(${radius}px)`;
    }
    let circle_1 = document.querySelector('.circle_1');
    let content_1 = 'РазработкаРазработкаРазработкаРазработка';
    let color_1 = ['#ccba96', '#161616', '#ccba96', '#161616'];
    generateLetters(circle_1, content_1, color_1);

    let circle_2 = document.querySelector('.circle_2');
    let content_2 = 'ДизайнДизайнДизайнДизайнДизайн';
    let color_2 = ['#ccba96', '#161616', '#ccba96', '#161616', '#ccba96'];
    generateLetters(circle_2, content_2, color_2);

    let circle_3 = document.querySelector('.circle_3');
    let content_3 = 'МаркетингМаркетингМаркетингМаркетинг';
    let color_3 = ['#ccba96', '#161616', '#ccba96', '#161616'];
    generateLetters(circle_3, content_3, color_3);
} else {
    let radius = 140;
    let countCircle = -1;
    function generateLetters(selector, text, colorCircle) {
        const letters = text.split('');
        const step = 360 / letters.length;
        countCircle = -1; // Сброс счетчика слов
        letters.forEach((l, i) => {
            const span = document.createElement('span');
            changeColor(l, span, colorCircle);
            const deg = step * i;
            span.style.transform = transform(deg, radius);
            selector.append(span);
        });
    }
    function changeColor(l, span, colorCircle) {
        if (l.toUpperCase() === l) ++countCircle; //Определяем новое слово по заглавной букве и увеличиваем счетчик слов
        span.innerText = l.toUpperCase(); //В css к верхнему регистру не приводим делаем это здесь
        span.style.color = colorCircle[countCircle]; //Присваиваем цвет
    }
    function transform(deg, radius = 140) {
        return `rotateY(${deg}deg) translateZ(${radius}px)`;
    }
    let circle_1 = document.querySelector('.circle_1');
    let content_1 = 'РазработкаРазработка';
    let color_1 = ['#ccba96', '#161616'];
    generateLetters(circle_1, content_1, color_1);

    let circle_2 = document.querySelector('.circle_2');
    let content_2 = 'ДизайнДизайнДизайн';
    let color_2 = ['#ccba96', '#161616', '#ccba96'];
    generateLetters(circle_2, content_2, color_2);

    let circle_3 = document.querySelector('.circle_3');
    let content_3 = 'МаркетингМаркетинг';
    let color_3 = ['#ccba96', '#161616'];
    generateLetters(circle_3, content_3, color_3);
}
}

circle3D();
window.addEventListener('resize', circle3D)

.block-2 {
  height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item-circle__scene {
  position: relative;
  perspective: 800px;
  perspective-origin: 0px -80px;
  transform-style: preserve-3d;
  padding: 0px 0px 8px 0px;
}

.item-circle__scene:nth-child(1) {
  z-index: 14;
}

.item-circle__scene:nth-child(2) {
  z-index: 13;
}

.item-circle__scene:nth-child(3) {
  z-index: 12;
}

.item-circle__circle {
  cursor: pointer;
  padding-bottom: 60px;
  transform-style: preserve-3d;
  animation: rotate 35s linear infinite;
}

.item-circle__circle span {
  font-weight: bold;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #161616;
  -webkit-text-stroke: 1px #ccba96;
  padding: 10px 0px 10px 0px;
  font-size: 28px;
  min-width: 60px;
  perspective-origin: center;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-circle__circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(22, 22, 22, 0.5);
  transform: translateZ(-5px);
}

.sector-two__description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item-circle-block__items {
  display: none;
}

.item-circle-block__items._active {
  width: 100%;
  height: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background: #161616;
  margin: 30px 0px 10px 0px;
}

@keyframes rotate {
  0% {
transform: rotateY(0deg);
  }

  100% {
transform: rotateY(1turn);
  }
}

<div class="block-2">
   <div class="sector-two__description description-sector-two">
 <div class="item-circle__scene">
   <div data-id="1" class="item-circle__circle circle_1"></div>
 </div>
 <div class="item-circle-block__items">
   какой-то текст
 </div>
 <div class="item-circle__scene">
   <div data-id="2" class="item-circle__circle circle_2"></div>
 </div>
 <div class="item-circle-block__items">
   какой-то текст
 </div>
 <div class="item-circle__scene">
   <div data-id="3" class="item-circle__circle circle_3"></div>
 </div>
 <div class="item-circle-block__items">
   какой-то текст
 </div>
   </div>
 </div>