.wf-veil {
    /* ======================================================
       УДОБНЫЙ КОНТРОЛЬ РАЗМЕРА
       --wf-logo-w — ширина видео-логотипа И полосы загрузки
       (они всегда одинаковой ширины, меняется одной строкой)
       ====================================================== */
    --wf-logo-w: 124px;
    --wf-logo-ratio: 720 / 222; /* пропорции видео — не трогать */
    --wf-core-gap: 16px;        /* расстояние между логотипом и полосой */
    --wf-fade-ms: 420ms;        /* скорость появления/исчезновения UI загрузки */
    --wf-dot-size: 4px;         /* размер точек */

    position: fixed;
    inset: 0;
    z-index: 2147483000;
}

.wf-veil.wf-done {
    display: none;
}

.wf-strip {
    position: absolute;
    top: 0;
    bottom: 0;
    background: #000000;
    transform: scaleX(1);
    transform-origin: 100% 50%;
    will-change: transform;
}

/* opening: strips shrink to their RIGHT edge (staggered via JS delays) */
.wf-veil.wf-open .wf-strip {
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

/* closing: strips grow back from the LEFT edge */
.wf-veil.wf-close-init .wf-strip {
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: none;
}

.wf-veil.wf-close .wf-strip {
    transform: scaleX(1);
    transform-origin: 0 50%;
    transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

/* central content: video-logo on canvas + thin progress bar.
   ВАЖНО: никаких keyframe-анимаций на opacity здесь — они перебивают
   transition и ломают плавное исчезновение перед шторками. */
.wf-veil-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wf-core-gap);
    opacity: 1;
    transition: opacity var(--wf-fade-ms) ease, transform var(--wf-fade-ms) ease;
}

/* плавное появление при загрузке страницы (класс снимается сразу после вставки) */
.wf-veil-core.wf-core-boot {
    opacity: 0;
    transform: translate(-50%, -48%);
}

.wf-veil-core.wf-core-hidden {
    opacity: 0;
}

/* видео-логотип: ширина всегда = --wf-logo-w (как у полосы загрузки) */
.wf-veil-canvas {
    width: var(--wf-logo-w);
    aspect-ratio: var(--wf-logo-ratio);
    height: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.wf-veil-bar {
    width: var(--wf-logo-w);
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}

.wf-veil-fill {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: 2px;
    background: #ffffff;
    transition: width 0.25s ease;
}

.wf-veil.wf-close .wf-veil-bar,
.wf-veil.wf-close-init .wf-veil-bar {
    opacity: 0;
}

/* ======================================================
   ТОЧКИ
   Хореография (управляется из transition.js):
   1) с каждой стороны из-за края экрана выкатывается
      караван из ТРЁХ стрелок (каждая — два слоя по 5 точек,
      острый угол посередине: > слева и < справа), группа
      держится посередине между краем экрана и логотипом;
   2) ВО ВРЕМЯ подлёта по наборам пробегает волна белой
      подсветки (левый — справа налево, правый — слева направо);
   3) как только подлетели — выпуклость угла входит обратно
      (угловые точки остаются на местах), и стрелки образуют
      один большой прямоугольник (6×5 с каждой стороны);
   4) большой прямоугольник тает слой за слоем от логотипа
      к краю экрана (целиком его не увидеть), а всё остальное
      исчезает вместе с логотипом и загрузкой ДО шторок.
   Никакого мерцания — только волна подсветки при подлёте.
   ====================================================== */
.wf-dots {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    opacity: 1;
    transition: opacity var(--wf-fade-ms) ease;
    pointer-events: none;
}

.wf-dot {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--wf-dot-size);
    height: var(--wf-dot-size);
    margin: calc(var(--wf-dot-size) / -2) 0 0 calc(var(--wf-dot-size) / -2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.42);
    will-change: transform;
    /* без transition по умолчанию: стартовая позиция за экраном
       выставляется мгновенно, без всякого «появления на месте» */
}

/* фаза 1: выкатывание из-за краёв к центру (неспешно — под анимацию логотипа) */
.wf-dots.wf-dots-fly .wf-dot {
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* фаза 2: плавная перестройка кавычек в прямоугольники (идёт после fly, поэтому ниже в файле) */
.wf-dots.wf-dots-rect .wf-dot {
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

/* волна белой подсветки ВО ВРЕМЯ подлёта — только левый и правый наборы.
   Порядок волны задаётся индивидуальным animation-delay из JS. */
.wf-dots.wf-dots-fly .wf-dot-lr {
    animation: wfDotFlash 0.7s ease 1 both;
}

@keyframes wfDotFlash {
    0%, 100% {
        background: rgba(255, 255, 255, 0.42);
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
    50% {
        background: #ffffff;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.95), 0 0 20px rgba(255, 255, 255, 0.45);
    }
}

/* фаза 3: большой прямоугольник тает слой за слоем — порядок слоёв
   (от логотипа к краю экрана) задаётся animation-delay из JS.
   Правило стоит ПОСЛЕ волны подсветки, чтобы перекрывать её в этой фазе. */
.wf-dots.wf-dots-vanish .wf-dot {
    animation: wfDotVanish 0.55s ease both;
}

@keyframes wfDotVanish {
    to {
        opacity: 0;
    }
}

/* плавное исчезание логотипа, загрузки и точек ПЕРЕД раздвиганием шторок */
.wf-veil.wf-fade-ui .wf-veil-core,
.wf-veil.wf-fade-ui .wf-dots {
    opacity: 0;
}

/* во время закрытия шторок (переход на другую страницу) точки не показываем */
.wf-veil.wf-dots-off .wf-dots {
    opacity: 0;
    transition: none;
}

/* ======= телефоны и планшеты: компактнее логотип, загрузка и точки
   (геометрия самих точек дополнительно масштабируется в JS) ======= */
@media (max-width: 900px) {
    .wf-veil {
        --wf-logo-w: 108px;
    }
}

@media (max-width: 600px) {
    .wf-veil {
        --wf-logo-w: 92px;
        --wf-dot-size: 3px;
        --wf-core-gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wf-strip,
    .wf-veil.wf-open .wf-strip,
    .wf-veil.wf-close .wf-strip,
    .wf-dots.wf-dots-fly .wf-dot,
    .wf-dots.wf-dots-rect .wf-dot {
        transition: none;
    }

    .wf-dots.wf-dots-fly .wf-dot-lr {
        animation: none;
    }

    .wf-dots.wf-dots-vanish .wf-dot {
        animation: none;
        opacity: 0;
    }
}