/* ============================================================
   TYPEWRITER EFFECT — SINGLE EXPERTISE
   ============================================================ */

/*
============================================================
1. ДО ЗАПУСКА JS СКРЫВАЕМ ТОЛЬКО ТЕКСТ И КНОПКУ
============================================================
*/

.section--single-expertise .single-expertise__title,
.section--single-expertise .single-expertise__text,
.section--single-expertise .single-expertise .link {
    display: none !important;
}


/*
============================================================
2. ПОСЛЕ ЗАПУСКА JS ВОЗВРАЩАЕМ ЭЛЕМЕНТЫ
============================================================
*/

.section--single-expertise.is-typewriter-started .single-expertise__title,
.section--single-expertise.is-typewriter-started .single-expertise__text {
    display: block !important;
}

.section--single-expertise.is-typewriter-started .single-expertise .link {
    display: inline-flex !important;
}


/*
============================================================
3. КОНТЕЙНЕР НЕ СКРЫВАЕМ
============================================================
*/

.section--single-expertise .single-expertise__wrap {
    visibility: visible;
}


/*
============================================================
4. КУРСОР ПЕЧАТИ
============================================================
*/

.section--single-expertise
.single-expertise__title.is-typewriting::after,

.section--single-expertise
.single-expertise__text.is-typewriting::after {

    content: "";

    display: inline-block;

    width: 2px;
    height: 0.9em;

    margin-left: 5px;

    vertical-align: -0.08em;

    background: currentColor;

    animation: typewriterCursor 0.65s ease-in-out infinite;
}


/*
============================================================
5. ПОСЛЕ ПЕЧАТИ КУРСОР УБИРАЕТСЯ
============================================================
*/

.section--single-expertise
.single-expertise__title.is-typewriter-done::after,

.section--single-expertise
.single-expertise__text.is-typewriter-done::after {

    display: none;
}


/*
============================================================
6. КНОПКА ДО ПОЯВЛЕНИЯ
============================================================
*/

.section--single-expertise
.single-expertise .link.typewriter-button {

    opacity: 0 !important;

    visibility: hidden !important;

    transform: translateY(14px);

    transition:
        opacity 0.75s ease,
        transform 0.75s cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 0.75s;
}


/*
============================================================
7. КНОПКА ПОСЛЕ ЗАВЕРШЕНИЯ
============================================================
*/

.section--single-expertise
.single-expertise .link.typewriter-button.is-visible {

    opacity: 1 !important;

    visibility: visible !important;

    transform: translateY(0);

    transition:
        opacity 0.75s ease,
        transform 0.75s cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 0s;
}


/*
============================================================
8. АНИМАЦИЯ КУРСОРА
============================================================
*/

@keyframes typewriterCursor {

    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0;
    }
}


/*
============================================================
9. REDUCED MOTION
============================================================
*/

@media (prefers-reduced-motion: reduce) {

    .section--single-expertise .single-expertise__title,
    .section--single-expertise .single-expertise__text {
        display: block !important;
    }

    .section--single-expertise .single-expertise .link {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
    }
}