/*
 * Живые фоны шапок (web/js/dotfield.js). Прежних картинок под ними больше
 * нет: без JavaScript шапка просто тёмная.
 */

.dotfield {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* Первый кадр нарисован — плавно проявляем. */
.dotfield.is-ready {
    opacity: 1;
}

/* На узком экране фигура заходит под текст — приглушаем левую часть фона. */
@media (max-width: 900px) {
    .dotfield {
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.45) 45%, #000 85%);
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.45) 45%, #000 85%);
    }
}

/* Слой точек вне фокуса (dof в узоре): размытие считает видеокарта. */
.dotfield-blur {
    filter: blur(2.5px);
}

/*
 * Главная: поверхность из точек во всю ширину заходит под заголовок —
 * затемняем фон слева, чтобы текст читался.
 */
[data-dots="drop"]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgba(12, 12, 12, 0.92) 0%, rgba(12, 12, 12, 0.75) 30%, rgba(12, 12, 12, 0.2) 55%, rgba(12, 12, 12, 0) 70%);
}

@media (max-width: 900px) {
    /* Капля внизу шапки: затемняем верх, где текст, низ оставляем ярким. */
    [data-dots="drop"]::after {
        background: linear-gradient(to bottom, rgba(12, 12, 12, 0.85) 0%, rgba(12, 12, 12, 0.7) 45%, rgba(12, 12, 12, 0) 75%);
    }

    /* Точки на телефоне мельче — размываем слабее. */
    .dotfield-blur {
        filter: blur(1.4px);
    }
}