:root {
    --word-1: "Серверов";
    --word-2: "Сборок";
    --word-3: "Ивентов";
    --animation-duration: 6s;
    --word-color: #30a050;
}

.word-rotator {
    display: inline-block;
    position: relative;
    font-family: 'MontserratExtraBold', sans-serif;
    font-size: 64px;
    color: var(--word-color) !important;
    width: auto;
    min-width: 280px;
    height: 1.2em;
    text-align: left;
    vertical-align: middle;
    overflow: visible;
}

.rotating-word {
    display: block;
    position: absolute;
    width: auto;
    white-space: nowrap;
    opacity: 0;
    animation: rotateWords var(--animation-duration) infinite;
    will-change: transform, opacity;
}

.rotating-word::before {
    content: var(--word-content);
}

.word-1 {
    --word-content: var(--word-1);
    animation-name: word1;
}

.word-2 {
    --word-content: var(--word-2);
    animation-name: word2;
}

.word-3 {
    --word-content: var(--word-3);
    animation-name: word3;
}

@keyframes word1 {
    0% { opacity: 1; transform: translateY(0); }
    25% { opacity: 1; transform: translateY(0); }
    33% { opacity: 0; transform: translateY(-40px); }
    100% { opacity: 0; transform: translateY(-40px); }
}

@keyframes word2 {
    0%, 33% { opacity: 0; transform: translateY(40px); }
    41% { opacity: 1; transform: translateY(0); }
    58% { opacity: 1; transform: translateY(0); }
    66% { opacity: 0; transform: translateY(-40px); }
    100% { opacity: 0; transform: translateY(-40px); }
}

@keyframes word3 {
    0%, 66% { opacity: 0; transform: translateY(40px); }
    74% { opacity: 1; transform: translateY(0); }
    91% { opacity: 1; transform: translateY(0); }
    100% { opacity: 1; transform: translateY(0); }
}