/* logo_animation.css — терминальная анимация логотипа «проект_01»
   (мигающее подчёркивание → набор текста → «00» и перелистывание в «01» →
   выдержка полного текста без анимации → побуквенное удаление → повтор).
   Управляет фазами js/logo_animation.js; без JS логотип остаётся статичным. */

/* Контейнер анимации: ширина резервируется скриптом под полный логотип,
   чтобы текст не «ездил» при наборе/удалении символов */
.logo-anim-inner {
    display: inline-block;
    text-align: left;
    white-space: nowrap;
}

/* Курсор-подчёркивание */
.logo-underscore {
    display: inline-block;
}

.logo-blink {
    animation: logo-blink 0.55s steps(1, end) infinite;
}

@keyframes logo-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Цифры «00» → «01» */
.logo-digits {
    display: inline-block;
    perspective: 120px;
}

.logo-digit {
    display: inline-block;
    transform-origin: 50% 50%;
}

.logo-digit-pop {
    animation: logo-digit-pop 0.3s ease-out;
}

@keyframes logo-digit-pop {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: none; }
}

.logo-digit-flip {
    animation: logo-digit-flip 0.5s ease-in-out;
}

/* Перелистывание: «0» уходит поворотом вверх, «1» приходит снизу */
@keyframes logo-digit-flip {
    0% { transform: rotateX(0deg); }
    49.9% { transform: rotateX(90deg); }
    50.1% { transform: rotateX(-90deg); }
    100% { transform: rotateX(0deg); }
}

/* Пользователям с включённым «уменьшить движение» — статичный логотип */
@media (prefers-reduced-motion: reduce) {
    .logo-blink,
    .logo-digit-pop,
    .logo-digit-flip {
        animation: none;
    }
}