/* ДОПОЛНИТЕЛЬНОЕ ОФОРМЛЕНИЕ — светлые синие чертежи по краям.
   SVG не перекрывают текст, кнопки, карточки или диски. */
/* Боковые SVG и плавный голубой переход к белому сверху и снизу. */
.collection-page {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
        radial-gradient(ellipse 75% 220px at 50% 0%, rgba(50, 149, 245, .11), transparent 100%),
        radial-gradient(ellipse 80% 260px at 50% 100%, rgba(50, 149, 245, .15), transparent 100%),
        radial-gradient(ellipse 28% 50% at 1% 46%, rgba(49, 144, 248, .17), transparent 97%),
        radial-gradient(ellipse 28% 50% at 99% 48%, rgba(50, 150, 255, .17), transparent 97%),
        #fff;
}
.collection-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("../img/blueprint-left.svg"), url("../img/blueprint-right.svg");
    background-repeat: no-repeat, no-repeat;
    background-position: left -32px top 75px, right -32px top 75px;
    background-size: min(33vw,600px) auto, min(33vw,600px) auto;
    opacity: .70;
    -webkit-mask-image: linear-gradient(90deg,#000 0%,#000 19%,transparent 34%,transparent 66%,#000 81%,#000 100%);
    mask-image: linear-gradient(90deg,#000 0%,#000 19%,transparent 34%,transparent 66%,#000 81%,#000 100%);
}
/* Плавное растворение голубого чертежного фона в белый у шапки
   и перед футером. Слой находится под контентом и не перехватывает клики. */
.collection-page::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        /* Сверху: от чисто белого у header к обычному голубому фону. */
        linear-gradient(
            to bottom,
            #fff 0,
            rgba(255, 255, 255, .98) 42px,
            rgba(255, 255, 255, .88) 95px,
            rgba(255, 255, 255, .55) 155px,
            rgba(255, 255, 255, 0) 260px
        ) top center / 100% 260px no-repeat,
        /* Снизу: чертежи и голубая подсветка плавно уходят в белый. */
        linear-gradient(
            to top,
            #fff 0,
            rgba(255, 255, 255, .98) 40px,
            rgba(255, 255, 255, .83) 105px,
            rgba(255, 255, 255, .48) 160px,
            rgba(255, 255, 255, 0) 250px
        ) bottom center / 100% 250px no-repeat;
}
.collection-page > .container { position: relative; z-index: 1; }
@media (max-width: 1180px) {
    .collection-page::before {
        opacity: .38;
        background-size: 310px auto,310px auto;
        background-position: left -100px top 130px,right -100px top 130px;
    }
}
@media (max-width: 720px) {
    .collection-page { background: #fff; }
    .collection-page::before,
    .collection-page::after { display: none; }
}