/* Прелоадер: фиксированная плашка во весь экран поверх всего контента */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    inset: 0;
    background: var(--e-global-color-primary, #132A3E);
    display: flex;
    align-items: center;
    justify-content: center;
    /* максимально высокий z-index, чтобы перекрыть и хедер, и админ-бар */
    z-index: 2147483647;
    transition: opacity 0.15s ease;
}

.preloader--hide {
    opacity: 0;
    pointer-events: none;
}

.preloader__logo svg {
    width: 180px;
    height: auto;
    display: block;
}

/* Цвета заливки тела логотипа */
.preloader__logo .logo-fill .st0 {
    fill: var(--e-global-color-secondary); /* SIN */
}

.preloader__logo .logo-fill .st1 {
    fill: var(--e-global-color-text);      /* gifts */
}

/* КОНТУРЫ: бесконечный цикл рисования линий */
.preloader__logo .outline-sin,
.preloader__logo .outline-gifts {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2200;
    stroke-dashoffset: 2200;
    shape-rendering: geometricPrecision;
}

/* SIN оставляем чуть толще */
.preloader__logo .outline-sin {
    stroke-width: 4;
}

/* gifts делаем чуть тоньше, чтобы низ "g" выглядел мягче */
.preloader__logo .outline-gifts {
    stroke-width: 3.1;
}

.preloader__logo .outline-sin {
    stroke: var(--e-global-color-secondary);
    animation: stroke-loop-sin 1s ease-in-out infinite;
}

.preloader__logo .outline-gifts {
    stroke: var(--e-global-color-text);
    animation: stroke-loop-gifts 1s ease-in-out infinite;
    animation-delay: 0.15s;
}

@keyframes stroke-loop-sin {
    0%   { stroke-dashoffset: 2200; opacity: 0; }
    10%  { opacity: 1; }
    70%  { stroke-dashoffset: 0;   opacity: 1; }
    100% { stroke-dashoffset: 0;   opacity: 0; }
}

@keyframes stroke-loop-gifts {
    0%   { stroke-dashoffset: 2200; opacity: 0; }
    10%  { opacity: 1; }
    70%  { stroke-dashoffset: 0;   opacity: 1; }
    100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* Тело лого: скрыто до финальной фазы */
.preloader__logo .logo-fill {
    opacity: 0;
    transform: scale(0.97);
    transform-origin: center center;
    transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}

/* Контуры по умолчанию видимы */
.preloader__logo .logo-outline {
    opacity: 1;
    transition: opacity 0.1s ease-out;
}

/* Финал прелоадера: показать тело, убрать контуры */
.preloader.preloader--final .logo-fill {
    opacity: 1;
    transform: scale(1);
}

.preloader.preloader--final .logo-outline {
    opacity: 0;
}