/**
 * Loading Screen Styles - Optimized
 *
 * Описание:
 * - Полноэкранный прямоугольник размером 100% ширины и высоты
 * - Цвет фона: #FBF7EE (светло-бежевый)
 * - Отображает счетчик загрузки от 0 до 100%
 * - Затем скрывается и удаляется из страницы
 */

/* ==========================================
   ПОЛНОЭКРАННЫЙ ПРЯМОУГОЛЬНИК (100% x 100%)
   ========================================== */

.uc-preloader {
    /* Полноэкранный прямоугольник */
    position: fixed;
    inset: 0; /* top: 0, right: 0, bottom: 0, left: 0 = 100% ширина и высота */

    /* Отображение */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Цвет #FBF7EE (светло-бежевый) */
    background: #FBF7EE;

    /* Поверх всех элементов */
    z-index: 9999;

    /* Оптимизация производительности для анимации */
    will-change: transform;
}

/* Второй слой прямоугольника для плавного исчезания */
.preloader-shape {
    position: fixed;
    inset: 0; /* 100% ширина и высота */
    background: #FBF7EE;
    z-index: 9998;
    will-change: transform;
}

/* ==========================================
   КОНТРОЛЬ ПРОКРУТКИ СТРАНИЦЫ
   ========================================== */

.t-body {
    /* По умолчанию скролл РАЗРЕШЕН */
    overflow: auto;
}

.t-body.loading-screen-active {
    /* Блокируем скролл только во время анимации */
    overflow: hidden !important;
}

.t-body.overflow {
    /* После завершения загрузки разрешить прокрутку */
    overflow: auto !important;
}

/* ==========================================
   АНИМАЦИЯ ИСЧЕЗАНИЯ
   ========================================== */

/* Плавное исчезание (opacity) */
.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* Плавное скольжение вверх */
.slide-up-smooth {
    /* Сдвигаем на -120% вверх = прямоугольник полностью уходит */
    transform: translateY(-120%);

    /* Плавный переход в течение 1.7 сек */
    transition: transform 1.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   СЧЕТЧИК ЗАГРУЗКИ (0% → 100%)
   ========================================== */

.number {
    /* Позиционируем счетчик в центр экрана */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Поверх прямоугольника */
    z-index: 9999;

    /* Оформление */
    font-size: 48px;
    font-weight: bold;
    color: #333;

    /* Не блокирует клики */
    pointer-events: none;

    /* Оптимизация анимации */
    will-change: transform;
}

/* Содержимое счетчика (числа) */
.number .tn-atom {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 80px;
}

/* Добавляем знак процента (%) после числа */
.number .tn-atom:after {
    content: '%';
    font-size: 25px;
    margin-left: 8px;
}

/* Эффект при наведении на счетчик (кликабельный) */
.number:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease-out;
    opacity: 0.8;
}

.number:hover .tn-atom {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* ==========================================
   УТИЛИТЫ
   ========================================== */

.hide {
    display: none !important;
}

/* ==========================================
   АДАПТИВНОСТЬ
   ========================================== */

@media (max-width: 768px) {
    /* Меньший размер счетчика на мобильных */
    .number {
        font-size: 36px;
    }

    .number .tn-atom:after {
        font-size: 18px;
    }
}

/* ==========================================
   ПЕЧАТЬ
   ========================================== */

@media print {
    /* Отключаем анимации при печати */
    .uc-preloader,
    .preloader-shape,
    .slide-up-smooth {
        transition: none !important;
        animation: none !important;
    }
}