.text {
    font-size: 6.5rem;
    font-family: Kanit, sans-serif;
    text-transform: uppercase;
    color: white;
    -webkit-text-stroke: 2px var(--shadow-color, #282828);

    letter-spacing: 3px;
    transform: scaleX(0.5);
    animation: stagger 2.5s steps(25) alternate infinite;
}

/* Circular text layout */
.circular {
    width: 240px;
    height: 240px;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--scale, 1));
}

.circular>* {
    position: absolute;
    top: -50%;
    left: 33%;
}

/* Custom positions per character */
.circular>*[data-idx='0'] {
    height: 245px;
    transform: rotate(0deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='1'] {
    height: 245px;
    transform: rotate(15deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='2'] {
    height: 245px;
    transform: rotate(30deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='3'] {
    height: 245px;
    transform: rotate(45deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='4'] {
    height: 245px;
    transform: rotate(60deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='5'] {
    height: 245px;
    transform: rotate(75deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='6'] {
    height: 245px;
    transform: rotate(90deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='7'] {
    height: 245px;
    transform: rotate(105deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='8'] {
    height: 245px;
    transform: rotate(120deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='9'] {
    height: 245px;
    transform: rotate(135deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='10'] {
    height: 245px;
    transform: rotate(150deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='11'] {
    height: 245px;
    transform: rotate(165deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='12'] {
    height: 245px;
    transform: rotate(180deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='13'] {
    height: 245px;
    transform: rotate(195deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='14'] {
    height: 245px;
    transform: rotate(210deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='15'] {
    height: 245px;
    transform: rotate(225deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='16'] {
    height: 245px;
    transform: rotate(240deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='17'] {
    height: 245px;
    transform: rotate(255deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='18'] {
    height: 245px;
    transform: rotate(270deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='19'] {
    height: 245px;
    transform: rotate(285deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='20'] {
    height: 245px;
    transform: rotate(300deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='21'] {
    height: 245px;
    transform: rotate(315deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='22'] {
    height: 245px;
    transform: rotate(330deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='23'] {
    height: 245px;
    transform: rotate(345deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}

.circular>*[data-idx='24'] {
    height: 245px;
    transform: rotate(360deg) scaleX(0.95);
    transform-origin: bottom center;
    line-height: 0;
}



.circular--solid {
    --scale: 0.9;
    --shadow-color: #d5d5d5;
}

.circular--solid .text {
    color: var(--shadow-color);
}

.rotate {
    --delay: 0;
    animation: rotate 5s ease-in-out alternate infinite;
    animation-delay: var(--delay);
    max-height: 100%;
    position: relative;

}

.animation {
    padding: 300px;
    max-width: 100%;
}

@media screen and (max-width: 1000px) {
    .rotate {
        width: 130px;
        height: 130px;
        top: 50%;
        left: 50%;

    }






}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

/* Simple version of the text shadow animation without SCSS-generated easing */
@keyframes stagger {
    0% {
        text-shadow: -10px 0.3px var(--shadow-color, #282828);
    }

    50% {
        text-shadow: 0px 7.5px var(--shadow-color, #282828);
    }

    100% {
        text-shadow: 20px 15px var(--shadow-color, #282828);
    }
}