.catalog {
    color: var(--c-ink);
}

.catalog__top {
    margin: -40px calc(50% - 50vw) 0;
    padding: 48px 0 40px;
    background: linear-gradient(180deg, #e8f1fc 0%, #f4f8fe 65%, #fff 100%);
}

.catalog__top--world {
    --catalog-fade: linear-gradient(180deg, #000 0%, #000 calc(100% - 24px), rgba(0, 0, 0, 0.720) calc(100% - 20px), rgba(0, 0, 0, 0.482) calc(100% - 16px), rgba(0, 0, 0, 0.287) calc(100% - 12px), rgba(0, 0, 0, 0.138) calc(100% - 8px), rgba(0, 0, 0, 0.040) calc(100% - 4px), transparent 100%);
    position: relative;
    overflow: hidden;
    padding-bottom: 56px;
    background: linear-gradient(180deg, color-mix(in oklab, var(--world) 30%, #fff) 0%, color-mix(in oklab, var(--world) 6%, #fff) 85%, #fff 100%);
    color: #fff;
}

.catalog__top--world::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
    linear-gradient(115deg, color-mix(in oklab, var(--world) 82%, #fff) 0%, var(--world) 40%, color-mix(in oklab, var(--world) 65%, #000) 100%);
    -webkit-mask-image: var(--catalog-fade);
    mask-image: var(--catalog-fade);
    pointer-events: none;
    animation: catalog-fade .7s ease-out both;
}

.catalog__top--world::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(50%, max(640px, calc(50% - var(--container) / 2 + 560px)));
    background: no-repeat right bottom / contain;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 92%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 92%);
    pointer-events: none;
    animation: catalog-pattern 1s cubic-bezier(.2, .7, .2, 1) .1s both;
}

.catalog__top--bars::after {
    background-image: var(--world-pattern-bars);
    --pattern-from: translateY(60px);
}

.catalog__top--circles::after {
    background-image: var(--world-pattern-circles);
    background-position: right top;
    --pattern-from: scale(.85) rotate(-20deg);
}

.catalog__top--stripes::after {
    background-image: var(--world-pattern-stripes);
    --pattern-from: translate(-40px, 40px);
}

.catalog__top--waves::after {
    background-image: var(--world-pattern-waves);
    background-size: 100% 100%;
    --pattern-from: translateX(60px);
}

.catalog__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    pointer-events: none;
    animation: catalog-bg-in 1.2s cubic-bezier(.2, .7, .2, 1) both;
}

.catalog__top--image {
    background: transparent;
    -webkit-mask-image: var(--catalog-fade);
    mask-image: var(--catalog-fade);
}

.catalog__top--image::before,
.catalog__top--image::after {
    display: none;
}

.catalog__top--world .catalog-world span {
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
}

.catalog__title,
.catalog__lead,
.catalog-world {
    animation: catalog-rise .6s cubic-bezier(.2, .7, .2, 1) both;
}

.catalog-world:nth-child(1) { animation-delay: .18s; }

.catalog-world:nth-child(2) { animation-delay: .23s; }

.catalog-world:nth-child(3) { animation-delay: .28s; }

.catalog-world:nth-child(4) { animation-delay: .33s; }

.catalog-world:nth-child(5) { animation-delay: .38s; }

.catalog-world:nth-child(n+6) { animation-delay: .43s; }

@keyframes catalog-bg-in {
    from { opacity: 0; transform: scale(1.06); }
    to { opacity: 1; transform: none; }
}

@keyframes catalog-nudge {
    0%, 100% { transform: translateY(-50%); }
    50% { transform: translate(5px, -50%); }
}

@keyframes catalog-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes catalog-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes catalog-pattern {
    from { opacity: 0; transform: var(--pattern-from, none); }
    to { opacity: 1; transform: none; }
}

.catalog__top--world .catalog__lead {
    color: rgba(255, 255, 255, .85);
}

.catalog__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 16px;
}

.catalog__title {
    margin: 0 0 24px;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.2;
    animation-delay: .05s;
}

.catalog__lead {
    margin: 0 0 28px;
    color: var(--c-grey-600);
    font-size: 16px;
    line-height: 24px;
    animation-delay: .12s;
}

.catalog-worlds {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.catalog-world {
    position: relative;
    cursor: pointer;
}

.catalog-world input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.catalog-world span {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 0 28px 0 22px;
    border: 1px solid var(--c-grey-200);
    border-radius: 8px;
    background: #fff;
    color: var(--c-grey-700);
    font-size: 14px;
    font-weight: 500;
}

.catalog-world span::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--c-grey-500);
    border-radius: 50%;
    box-sizing: border-box;
}

.catalog-world input:checked + span {
    border: 2px solid var(--world, var(--c-blue));
    padding: 0 27px 0 21px;
    color: var(--world, var(--c-blue));
    font-weight: 700;
}

.catalog-world input:checked + span::before {
    border: 4px solid var(--world, var(--c-blue));
}

.catalog-world input:focus-visible + span {
    outline: 2px solid var(--c-blue); outline-offset: 2px;
}

.catalog-worlds-wrap {
    position: relative;
}

.catalog-worlds-nav {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .catalog__top--world::before,
    .catalog__top--world::after,
    .catalog__bg,
    .catalog__title,
    .catalog__lead,
    .catalog-world,
    .catalog-worlds-nav {
        animation: none;
    }
}

@media (max-width: 860px) {
    .catalog__top {
        margin-top: -40px; padding-top: 32px;
    }

    .catalog__top--world {
        padding-bottom: 48px;
    }

    .catalog__top--world::after {
        right: 0;
        width: 75%;
    }

    .catalog__title {
        font-size: 32px;
    }

    .catalog-worlds {
        flex-wrap: nowrap;
        gap: 10px;
        margin: 0 -16px;
        padding: 4px 16px 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding: 0 16px;
        scrollbar-width: none;
    }

    .catalog-worlds-wrap.has-next .catalog-worlds {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent calc(100% - 8px));
        mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent calc(100% - 8px));
    }

    .catalog-worlds-wrap.has-prev .catalog-worlds {
        -webkit-mask-image: linear-gradient(90deg, transparent 8px, #000 72px);
        mask-image: linear-gradient(90deg, transparent 8px, #000 72px);
    }

    .catalog-worlds-wrap.has-prev.has-next .catalog-worlds {
        -webkit-mask-image: linear-gradient(90deg, transparent 8px, #000 72px, #000 calc(100% - 72px), transparent calc(100% - 8px));
        mask-image: linear-gradient(90deg, transparent 8px, #000 72px, #000 calc(100% - 72px), transparent calc(100% - 8px));
    }

    .catalog-worlds-nav {
        position: absolute;
        top: calc(50% - 5px);
        z-index: 2;
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #fff;
        color: var(--world, var(--c-blue));
        box-shadow: 0 4px 14px rgba(16, 24, 40, .18);
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%) scale(.8);
        transition: opacity .2s, transform .2s;
    }

    .catalog-worlds-nav svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .catalog-worlds-nav--prev {
        left: -6px;
    }

    .catalog-worlds-nav--next {
        right: -6px;
    }

    .catalog-worlds-wrap.has-prev .catalog-worlds-nav--prev,
    .catalog-worlds-wrap.has-next .catalog-worlds-nav--next {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(-50%);
    }

    .catalog-worlds-wrap.has-next.is-hinting .catalog-worlds-nav--next {
        animation: catalog-nudge 1.2s ease-in-out .6s 2;
    }

    .catalog-worlds::-webkit-scrollbar {
        display: none;
    }

    .catalog-world {
        flex: none;
        scroll-snap-align: start;
    }

    .catalog-world:last-child {
        margin-right: 24px;
    }

    .catalog-world span {
        min-height: 48px; padding: 0 18px 0 16px;
        white-space: nowrap;
    }

    .catalog-world input:checked + span {
        padding: 0 17px 0 15px;
    }
}