/* progress_bar.css */

/* Основной стиль для progress bar */
progress {
    box-sizing: border-box;
    border: solid 0.15em #242b35;
    width: 90%; /* Ширина прогресс-бара в процентах от экрана */
    height: 1em; /* Высота прогресс-бара */
    border-radius: 0.5em;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.2)); /* Тёмная тень снизу и светлая сверху */
    font: clamp(0.625em, 7.5vw, 5em) monospace;
    position: fixed; /* Координаты относительно экрана, включая вложенную страницу. */
    bottom: var(--progress-bar-bottom, 70px); /* Используем переменную для отступа снизу */
    left: 50%; /* Центрируем по горизонтали */
    transform: translateX(-50%); /* Центрируем по горизонтали через трансформацию */
    z-index: 800; /* Устанавливаем порядок отображения */
    box-shadow: 0 0 20px rgba(243, 243, 243, 0.1), /* Лёгкое свечение вокруг прогресс-бара */
                0 0 30px rgba(187, 187, 187, 0.05); /* Более мягкое и размытое свечение */
}

/* Стили для браузера WebKit (например, Chrome, Safari) */
progress::-webkit-progress-bar {
    background: transparent;
}

/* Стили для заполненной части прогресс-бара в WebKit */
progress::-webkit-progress-value {
    border-radius: 0.35em;

    /* Внутренние тени для объёмности */
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.425), /* Светлая тень сверху */
                inset 0 -2px 3px rgba(243, 198, 0, 0.685); /* Тёмная тень снизу */

    /* Добавляем тёмный красный акцент с размытым затуханием по нижнему краю */
    background: 
        linear-gradient(
            to top, 
            rgba(253, 152, 0, 0.479), /* Тёмно-красный оттенок снизу */
            rgba(226, 83, 0, 0) 50% /* Плавное затухание красного к верхней части */
        ),

        linear-gradient(
            #fff17500,  /* Золотистый оттенок ближе к центру */
            transparent 85%
        ),
        linear-gradient(
            90deg, 
            #5f3504d5, /* Тёмно-красный у начала */

            #00000013  /* Золотой у конца */
        );
}

/* Стили дляrgba(250, 205, 3, 0.259)*/
progress::-moz-progress-bar {
    border-radius: 0.35em;

    /* Внутренние тени для объёмности */
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.3), /* Светлая тень сверху */
                inset 0 -2px 3px rgba(0, 0, 0, 0.4); /* Тёмная тень снизу */

    /* Добавляем те же градиенты для Firefox */
    background: 
        linear-gradient(
            to top, 
            rgba(139, 0, 0, 0.6), /* Тёмно-красный оттенок снизу */
            rgba(139, 0, 0, 0) 30% /* Плавное затухание красного к верхней части */
        ),
        linear-gradient(
            #ffcc33,  /* Золотистый оттенок ближе к центру */
            transparent 85%
        ),
        linear-gradient(
            90deg, 
            #8b0000, /* Тёмно-красный у начала */
            #ff4500, /* Оранжево-красный */
            #ff8c00, /* Тёмно-оранжевый */
            #ffae42, /* Яркий золотисто-оранжевый */
            #ffd700  /* Золотой у конца */
        );
}

/* Слой для частиц */
#particle-canvas {
    height: 100%;          /* Высота canvas совпадает с высотой progress-bar */
    border-radius: inherit; /* Наследуем закругление от родительского элемента (progress-bar) */
    overflow: hidden;       /* Обрезка всего, что выходит за границы */
    position: fixed;        /* Те же экранные координаты, что и у progress-bar. */
    top: 0;                 /* Выравниваем верхнюю позицию canvas с progress-bar */
    left: 0;                /* Выравниваем левую позицию canvas с progress-bar */
    pointer-events: none;   /* Отключаем взаимодействие, чтобы клики проходили сквозь canvas */
    z-index: 810;           /* Слой выше progress-bar для наложения эффекта */
}