body {
    font-family: var(--font-main);
    background-color: var(--color-light-gray);
    color: var(--color-black);
}

.page {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;

    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gap);
}

.section {
    padding-top: var(--section-space);
    padding-bottom: 0;
}

.is-hidden {
    display: none !important;
}


/* типографика */
.text-h1 {
    font-family: var(--font-display);
    font-size: 64px;
    line-height: 1;
    font-weight: 400;
    text-transform: uppercase;
}

.text-h2 {
    font-family: var(--font-main);
    font-size: 48px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.06em;
    text-transform: uppercase;
}

.text-caption {
    font-family: var(--font-main);
    font-size: 24px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.06em;
    text-transform: uppercase;
}

.text-body {
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.06em;
    text-transform: uppercase;
}

.text-microcopy {
    font-family: var(--font-main);
    font-size: 12px;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.text-microcopy-medium {
    font-family: var(--font-main);
    font-size: 12px;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}



.container {
    width: 100%;
    max-width: var(--page-width);
    margin: 0 auto;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
}


/* ui */
.nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav__link {
    min-height: 41px;
    padding: 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-small);
    background-color: var(--glass-white);
    backdrop-filter: blur(var(--blur-default));
    -webkit-backdrop-filter: blur(var(--blur-default));

    color: rgba(var(--color-black-rgb), 0.35);
}

.nav__link.is-active {
    color: var(--color-black);
}

.nav__link,
.button {
    font-family: var(--font-main);
    font-weight: 500;
}

.button.mobile-menu-button {
    display: none;
}


.button {
    min-height: 41px;
    padding: 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-radius: var(--radius-small);
    background-color: var(--glass-white);
    backdrop-filter: blur(var(--blur-default));
    -webkit-backdrop-filter: blur(var(--blur-default));

    color: var(--color-black);
    white-space: nowrap;
}

.button--solid {
    background-color: var(--color-white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.button--outline {
    --outline-color: var(--color-white);
    --outline-hover-bg: rgba(var(--color-white-rgb), 0.5);
    --outline-hover-text: var(--color-black);

    background-color: transparent;
    color: var(--outline-color);
    border: 1px solid var(--outline-color);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.icon-button {
    width: 72px;
    height: 72px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-small);
    background-color: var(--glass-white);
    backdrop-filter: blur(var(--blur-default));
    -webkit-backdrop-filter: blur(var(--blur-default));
}

.icon-button img,
.icon-button svg {
    width: 48px;
    height: 48px;
}

/* ховер-состояния кнопочек */
.nav__link,
.mobile-nav__link,
.button,
.icon-button {
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

/* черные outline ста-кнопки */
.about-preview__button,
.catalog-teaser__button,
.events-preview__button {
    --outline-color: var(--color-black);
    --outline-hover-bg: var(--color-black);
    --outline-hover-text: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
    /* затемнение стекляннях буллитов */
    .nav__link:not(.is-active):hover,
    .mobile-nav__link:not(.is-active):hover,
    .button.mobile-menu-button:hover,
    .icon-button:hover {
        background-color: rgba(215, 219, 223, 0.5);
    }

    /* полупрозрачная заполненная кнопочка */
    .button--solid:hover {
        background-color: rgba(var(--color-white-rgb), 0.5);
    }

    /* заливка outline кнопочек */
    .button--outline:hover {
        background-color: var(--outline-hover-bg);
        color: var(--outline-hover-text);
        border-color: transparent;
    }
}


/* хедер */
.header {
    position: fixed;
    top: var(--header-offset);
    left: var(--header-offset);
    right: var(--header-offset);
    z-index: 100;

    display: flex;
    align-items: center;
    gap: 8px;
}

.header__logo {
    min-height: 41px;
    padding: 0 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    border-radius: var(--radius-small);
    background-color: var(--glass-white);
    backdrop-filter: blur(var(--blur-default));
    -webkit-backdrop-filter: blur(var(--blur-default));

    color: var(--color-black);
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
}
.mobile-nav {
    display: none;
}

.header__logo-icon {
    height: 23px;
    width: auto;
    flex-shrink: 0;
}

.header__logo-text {
    display: inline-block;
}


/* анимашка хедера */
.header.is-nav-enhanced .nav {
    gap: 0;
}

.header.is-nav-enhanced .nav__link:first-child,
.header.is-nav-enhanced .nav__link:not(:first-child) {
    box-sizing: border-box;
}

/* буллит: меню —> главная */
.header.is-nav-enhanced .nav__link:first-child {
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    transition: width 0.68s cubic-bezier(0.25, 1, 0.5, 1);
}

.header.is-nav-enhanced:not(.is-nav-open) .nav__link:first-child {
    color: var(--color-black);
}

/* остальные пункты навигации */
.header.is-nav-enhanced .nav__link:not(:first-child) {
    max-width: 0;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;

    opacity: 0;
    transform: translateX(-6px);
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;

    transition:
        max-width 0.72s cubic-bezier(0.25, 1, 0.5, 1),
        margin-left 0.72s cubic-bezier(0.25, 1, 0.5, 1),
        padding 0.72s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.5s ease,
        transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* раскрытие при наведении */
.header.is-nav-enhanced.is-nav-open .nav__link:not(:first-child) {
    max-width: 240px;
    margin-left: 8px;
    padding-left: 24px;
    padding-right: 24px;

    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* мягкий стаггер появления */
.header.is-nav-enhanced.is-nav-open .nav__link:nth-child(2) {
    transition-delay: 0.04s, 0.04s, 0.04s, 0.04s, 0.04s, 0s, 0s, 0s;
}
.header.is-nav-enhanced.is-nav-open .nav__link:nth-child(3) {
    transition-delay: 0.09s, 0.09s, 0.09s, 0.09s, 0.09s, 0s, 0s, 0s;
}
.header.is-nav-enhanced.is-nav-open .nav__link:nth-child(4) {
    transition-delay: 0.14s, 0.14s, 0.14s, 0.14s, 0.14s, 0s, 0s, 0s;
}
.header.is-nav-enhanced.is-nav-open .nav__link:nth-child(5) {
    transition-delay: 0.19s, 0.19s, 0.19s, 0.19s, 0.19s, 0s, 0s, 0s;
}
.header.is-nav-enhanced:not(.is-nav-open) .nav__link:not(:first-child) {
    transition-delay: 0s;
}

/* ховер-затемнение буллитов */
.header .nav__link,
.header .button.mobile-menu-button {
    transition:
        background-color 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.5s ease,
        border-color 0.5s ease;
}

.header.is-nav-enhanced .nav__link:first-child {
    transition:
        width 0.68s cubic-bezier(0.25, 1, 0.5, 1),
        background-color 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.5s ease,
        border-color 0.5s ease;
}

.header.is-nav-enhanced .nav__link:not(:first-child) {
    transition:
        max-width 0.72s cubic-bezier(0.25, 1, 0.5, 1),
        margin-left 0.72s cubic-bezier(0.25, 1, 0.5, 1),
        padding 0.72s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.5s ease,
        transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
        background-color 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.5s ease,
        border-color 0.5s ease;
}


.card {
    border-radius: var(--radius-medium);
    background-color: var(--color-white);
    overflow: hidden;
}


/* футер */
.footer {
    position: relative;
    width: 100%;
    min-height: 372px;

    margin-top: var(--section-space);
    padding: 48px 16px 20px;

    background-color: var(--color-black);
    color: var(--color-white);

    border-radius: var(--radius-large) var(--radius-large) 0 0;
}

.footer__nav {
    width: fit-content;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.footer__nav a {
    transition: opacity 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
    .footer__nav a:hover {
        opacity: 0.5;
    }
}

.footer__meta {
    position: absolute;
    left: 16px;
    bottom: 16px;

    display: flex;
    align-items: center;
    gap: 72px;
}

.footer__credits {
    position: absolute;
    right: 16px;
    bottom: 16px;

    display: flex;
    align-items: center;
    gap: 72px;
}





/* I. главная !! */

/* I.I hero-блок */
.hero-screen {
    width: 100%;
    min-height: 0;
    height: 100svh;
    

    position: relative;
    overflow: hidden;

    background-color: var(--color-black);
    color: var(--color-white);

    border-radius: 0 0 var(--radius-large) var(--radius-large);

    --callout-start-width: 1380px;
    --callout-shift-speed: 0.53;
    --callout-shift: max(0px, calc((var(--callout-start-width) - 100vw) * var(--callout-shift-speed)));
}

.hero-screen__inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-screen__visual {
    position: absolute;
    inset: 0;
}

/* фон : шум */
.hero-screen__bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    pointer-events: none;
    user-select: none;
}

/* планеты */
.hero-screen__planet {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

/* общий размер большой планеты */
.hero-screen {
    --planet-main-size: clamp(520px, calc(428px + 11.9vw), 600px);
}

.hero-screen__planet--main {
    z-index: 1;
    width: var(--planet-main-size);
    height: auto;

    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
}

.hero-screen__planet--small {
    z-index: 3;

    width: calc(var(--planet-main-size) * 0.333);
    height: auto;

    left: calc(50% + var(--planet-main-size) * 0.4);
    top: calc(50% + var(--planet-main-size) * 0.35);

    transform: translate(-50%, -50%);
}

/* видео-планеты */
.hero-screen__planet-video {
    aspect-ratio: 1 / 1;
    object-fit: contain;
}


/* логотип + описание */
.hero-screen__content {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    gap: 32px;

    width: max-content;
    max-width: calc(100% - 48px);
}

/* биг логотип kosmolab */
.hero-screen__logo {
    flex: 0 1 auto;
    min-width: 0;
    width: min(70vw, 1040px);
    height: auto;
    pointer-events: none;
    user-select: none;
}
.hero-screen__logo--tablet,
.hero-screen__logo--mobile {
    display: none;
}

/* описание лабы */
.hero-screen__lead {
    flex: 0 0 auto;
    width: 360px;
    margin: 0;

    font-family: var(--font-main);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--color-white);
}


/* пунктики с подписями */
.hero-callout {
    position: absolute;
    z-index: 4;

    width: 380px;
    height: 90px;
}

.hero-callout__circle {
    position: absolute;
    width: 48px;
    height: 48px;

    border-radius: 50%;
    background-color: rgba(var(--color-white-rgb), 0.5);
    backdrop-filter: blur(var(--blur-default));
    -webkit-backdrop-filter: blur(var(--blur-default));
}

.hero-callout__line {
    position: absolute;
    width: 120px;
    height: auto;
    z-index: 10;

    display: block;
    pointer-events: none;
    user-select: none;
}

.hero-callout__text {
    position: absolute;
    white-space: nowrap;

    font-family: var(--font-main);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-light-gray);
}

/* нет переноса подписей */
.hero-callout__text--mobile {
    display: none;
}

.hero-callout__text-line {
    display: inline;
    white-space: nowrap;
}

.hero-callout__text-line + .hero-callout__text-line::before {
    content: " ";
}


/* верхний правый пункт */
.hero-callout--top {
    left: calc(50% + 204px - var(--callout-shift));
    top: calc(50% - 280px);
}
.hero-callout--top .hero-callout__circle {
    left: 0;
    bottom: 0;
}
.hero-callout--top .hero-callout__line {
    left: 24px;
    bottom: 24px;
    width: 150px;
}
.hero-callout--top .hero-callout__text {
    left: 188px;
    top: 20px;
}

/* нижний левый пункт */
.hero-callout--bottom {
    right: calc(50% + 176px - var(--callout-shift));
    top: calc(50% + 194px);
}
.hero-callout--bottom .hero-callout__circle {
    right: 0;
    top: 0;
}
.hero-callout--bottom .hero-callout__line {
    right: 24px;
    top: 24px;
    width: 150px;
}
.hero-callout--bottom .hero-callout__text {
    right: 188px;
    bottom: 20px;
}


/* кнопки */
.hero-screen__buttons {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);

    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 12px;
}
.hero-screen__buttons .button {
    width: 100%;
    justify-content: center;
}







/* I.II. о нас */
.about-preview {
    background-color: var(--color-light-gray);
}

.about-preview__inner {
    row-gap: 64px;
    align-items: start;
}


/* заголовок */
.about-preview__title {
    grid-column: 1 / 13;
    grid-row: 1;
    margin: 0;
    color: var(--color-black);

    white-space: nowrap;
}

/* утп */
.about-preview__stats {
    grid-column: 1 / 13;
    grid-row: 1;

    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;

    margin-top: 12px;
}
.about-preview__stat:nth-child(1) {
    grid-column: 4 / 7;
}
.about-preview__stat:nth-child(2) {
    grid-column: 8 / 10;
}
.about-preview__stat:nth-child(3) {
    grid-column: 12 / 13;
    justify-self: end;
    text-align: right;
}

.about-preview__stat {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.about-preview__stat--end {
    align-items: flex-end;
    text-align: right;
}

.about-preview__stat-line {
    color: rgba(var(--color-black-rgb), 0.25);
    white-space: nowrap;
}


/* описание + миссия */
.about-preview__content {
    grid-column: 1 / 13;
    grid-row: 2;

    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gap);
}

.about-preview__block {
    grid-column: 1 / 6;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.about-preview__block--mission {
    grid-column: 8 / 13;
}

/* стиль боди */
.about-preview__label {
    flex: 0 0 auto;
    min-width: 88px;
    color: var(--color-gray);
}
.about-preview__text {
    margin: 0;
    max-width: 340px;
    color: var(--color-gray);
}

.about-preview__block--mission .about-preview__text {
    max-width: 360px;
}


/* ста-кнопка */
.about-preview__button {
    grid-column: 1 / 13;
    grid-row: 3;
    justify-self: center;

    color: var(--color-black);
    border-color: var(--color-black);
}






/* I.III. тизер каталога */
.catalog-teaser {
    background-color: var(--color-light-gray);
    --teaser-planet: 340px;
    --teaser-gap: 75px;
}

/* бегущая строка планет */
.catalog-teaser__marquee {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
}
.catalog-teaser__track {
    display: flex;
    align-items: flex-start;
    gap: var(--teaser-gap);

    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;

    animation: catalog-teaser-marquee 25s linear infinite;
    will-change: transform;
}

@keyframes catalog-teaser-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


.catalog-teaser__planet {
    flex: 0 0 var(--teaser-planet);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.catalog-teaser__planet-image {
    position: relative;
    width: var(--teaser-planet);
    aspect-ratio: 1 / 1;
}

.catalog-teaser__planet-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* ховер лайт планет */
.catalog-teaser__planet-image .is-light {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.catalog-teaser__planet:hover .is-light {
    opacity: 1;
}

.catalog-teaser__planet-name {
    color: var(--color-black);
}


/* мерч */
.catalog-teaser__merch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: calc(var(--grid-gap));
    margin-top: 80px;
}

.catalog-teaser__card {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.catalog-teaser__card-frame {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-medium);
    background-color: var(--color-light-gray);
}

.catalog-teaser__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* дефолт : зум + чб */
    transform: scale(2.1);
    filter: grayscale(1);
    transition: transform 0.7s ease, filter 0.7s ease;
}

.catalog-teaser__card:hover .catalog-teaser__card-image {
    transform: scale(1);
    filter: grayscale(0);
}

.catalog-teaser__card-name {
    color: var(--color-black);
}

/* ста-кнопка */
.catalog-teaser__button {
    display: flex;
    justify-self: center;
    width: max-content;

    margin: 48px auto 0;

    color: var(--color-black);
    border-color: var(--color-black);
}

@media (prefers-reduced-motion: reduce) {
    .catalog-teaser__track {
        animation: none;
    }
}






/* I.IV. мероприятия */
.events-preview { background-color: var(--color-light-gray); }

.events-preview__header {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
    margin-bottom: 40px;
}
.events-preview__title {
    grid-column: 1 / 7;
    margin: 0;
    color: var(--color-black);
}

.events-preview__categories {
    display: contents;
}

.events-preview__category {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
}

.events-preview__category:nth-of-type(1) { grid-column: 7 / 9; }
.events-preview__category:nth-of-type(2) { grid-column: 9 / 11; }
.events-preview__category:nth-of-type(3) {
    grid-column: 11 / 13;
    justify-self: end;
    text-align: right;
}

.events-preview__category .text-microcopy {
    color: rgba(var(--color-black-rgb), 0.3);
    white-space: nowrap;
}

/* слайдер */
.events-preview__slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-medium);
}

.events-preview__slider--mobile { display: none; }

.events-preview__track {
    display: flex;
    gap: var(--grid-gap);
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.events-preview__slide {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: center;
}

/* карточка мероприятия */
.events-preview__card {
    position: relative;
    height: 600px;
    border-radius: var(--radius-medium);
    overflow: hidden;
    isolation: isolate;
}

.events-preview__card--c5 { grid-column: span 5; }
.events-preview__card--c7 { grid-column: span 7; }
.events-preview__card--c12 { grid-column: span 12; }

/* широкая карточка коллабораций */
.events-preview__card--c12 .events-preview__card-meta { justify-content: flex-start; }
.events-preview__card--c12 .events-preview__card-date { flex: 1 1 0; }

.events-preview__card-image {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-size: cover;
    background-position: center;
}

/* оверлэй */
.events-preview__card-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    padding: 24px;
    color: var(--color-white);

    background-color: rgba(var(--color-black-rgb), 0.6);
    backdrop-filter: blur(var(--blur-default));
    -webkit-backdrop-filter: blur(var(--blur-default));

    opacity: 1;
    transition: opacity 0.4s ease;
}
.events-preview__card:hover .events-preview__card-overlay {
    opacity: 0; 
}

.events-preview__card-title {
    margin: 0;
    color: var(--color-white);
}
.events-preview__card-line {
    display: block;
    height: 2px;
    margin: 18px 0;
    background-color:
    rgba(var(--color-white-rgb), 1);
}
.events-preview__card-meta {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}
.events-preview__card-date,
.events-preview__card-time {
    color: var(--color-white);
}
.events-preview__card-description-group {
    display: flex;
    gap: 24px;
    margin-top: auto;
}
.events-preview__card-description {
    flex: 1 1 0;
    margin: 0;
    color: rgba(var(--color-white-rgb));
}


/* стрелки */
.events-preview__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;

    border: none;
    cursor: pointer;
    border-radius: var(--radius-medium);
}

.events-preview__arrow--prev {
    left: 24px;
}

.events-preview__arrow--next {
    right: 24px;
}

.events-preview__arrow--prev img {
    transform: none;
}

.events-preview__arrow--next img {
    transform: rotate(180deg);
}


/* cта-кнопка */
.events-preview__button {
    display: flex;
    width: max-content;
    margin: 48px auto 0;
}











/* II. каталог */

.catalog-page {
    background-color: var(--color-light-gray);
    padding-top: calc(var(--header-offset) + 80px);
    padding-bottom: var(--section-space);
}


/* II.0 плашка корзины в хедере */
.catalog-cart-button {
    position: fixed;
    top: var(--header-offset);
    right: var(--header-offset);
    z-index: 100;

    width: 88px;
    height: 41px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-small);
    background-color: var(--glass-white);
    backdrop-filter: blur(var(--blur-default));
    -webkit-backdrop-filter: blur(var(--blur-default));
}
.catalog-cart-button img { width: 24px; height: 24px; }


/* корзина */
.catalog-cart {
    position: fixed;
    top: calc(var(--header-offset) + 41px + 8px);
    right: var(--header-offset);
    z-index: 99;

    width: 325px;
    max-width: calc(100vw - var(--header-offset) * 2);

    display: flex;
    flex-direction: column;
    gap: 8px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.catalog-cart.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.catalog-cart [hidden] {
    display: none;
}

.catalog-cart__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.catalog-cart__empty {
    margin: 0;
    padding: 24px;
    text-align: center;
    border-radius: var(--radius-medium);
    background-color: var(--glass-white);
    backdrop-filter: blur(var(--blur-default));
    -webkit-backdrop-filter: blur(var(--blur-default));
    color: rgba(var(--color-black-rgb), 0.5);
}

/* плашка товара */
.catalog-cart__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 12px;

    padding: 12px;
    border-radius: var(--radius-medium);
    background-color: var(--glass-white);
    backdrop-filter: blur(var(--blur-default));
    -webkit-backdrop-filter: blur(var(--blur-default));
}

.catalog-cart__image {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-small);
    overflow: hidden;
}

.catalog-cart__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.catalog-cart__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.catalog-cart__title {
    margin: 0;
    display: flex;
    flex-direction: column;
    color: var(--color-black);
}

.catalog-cart__price {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 2px;

    padding: 6px 10px;
    border: 1px solid rgba(var(--color-black-rgb), 0.2);
    border-radius: var(--radius-small);
    color: var(--color-black);
}

.catalog-cart__currency {
    width: 10px;
    height: 10px;
    display: block;
    flex: 0 0 10px;

    object-fit: contain;
    object-position: center;
}

/* количество */
.catalog-cart__qty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 4px;
}

.catalog-cart__qty-button {
    position: relative;
    width: 24px;
    height: 24px;
    cursor: pointer;
    border: none;
    border-radius: 10px;

    background-color: rgba(var(--color-black-rgb), 0.4);
    backdrop-filter: blur(var(--blur-default));
    -webkit-backdrop-filter: blur(var(--blur-default));
}

/* плюсики минусики */
.catalog-cart__qty-button::before,
.catalog-cart__qty-button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: var(--color-white);
    border-radius: 1px;
}

.catalog-cart__qty-button::before {
    width: 10px;
    height: 1px;
    transform: translate(-50%, -50%);
}

.catalog-cart__qty-button--plus::after {
    width: 1px;
    height: 10px;
    transform: translate(-50%, -50%);
}

.catalog-cart__qty-value {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-small);
    background-color: var(--color-white);
    color: var(--color-black);
}

.catalog-cart__checkout {
    width: 100%;
    justify-content: center;
}


/* попап */
.catalog-success {
    position: fixed;
    left: 50%;
    top: 60%;
    right: auto;
    z-index: 160;

    width: 370px;
    max-width: calc(100vw - 32px);

    padding: 48px 24px 24px;
    border-radius: var(--radius-medium);

    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: rgba(var(--color-white-rgb), 0.5);
    backdrop-filter: blur(var(--blur-default));
    -webkit-backdrop-filter: blur(var(--blur-default));

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.catalog-success.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.catalog-success__icon {
    width: 96px;
    height: 96px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-medium);
    background-color: var(--color-blue);
}

.catalog-success__icon img {
    width: 80px;
    height: 80px;
}

.catalog-success__title {
    margin: 24px 0 0;
    text-align: center;
    color: var(--color-black);
}

.catalog-success__text {
    margin: 12px 0 0;
    text-align: center;
    color: var(--color-black);
}

.catalog-success__button {
    width: 100%;
    min-height: 41px;
    margin-top: 32px;

    justify-content: center;

    border-radius: var(--radius-small);
    background-color: var(--color-black);
    color: var(--color-white);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (hover: hover) and (pointer: fine) {
    .catalog-success__button:hover {
        background-color: rgba(var(--color-black-rgb), 0.5);
        color: var(--color-white);
    }
}




/* II.I. заголовок + подписи */
.catalog-hero__header {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
    margin-bottom: 40px;
}

.catalog-hero__title {
    grid-column: 1 / 5;
    grid-row: 1;
    margin: 0;
    color: var(--color-black);
}


/* подписи */
.catalog-hero__labels {
    grid-column: 1 / 13;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: 4px;
    align-items: start;

    margin-top: 0;
    padding-top: 12px;
}

.catalog-hero__label {
    padding-top: 0;
    color: rgba(var(--color-black-rgb), 0.3);
    white-space: nowrap;
}

.catalog-hero__label:nth-child(1)  { grid-column: 5;  grid-row: 1; } /* aeris */
.catalog-hero__label:nth-child(2)  { grid-column: 5;  grid-row: 2; } /* erebos */
.catalog-hero__label:nth-child(3)  { grid-column: 6;  grid-row: 2; } /* alba */
.catalog-hero__label:nth-child(4)  { grid-column: 6;  grid-row: 1; } /* aqualis */
.catalog-hero__label:nth-child(5)  { grid-column: 7;  grid-row: 1; } /* cirra */
.catalog-hero__label:nth-child(6)  { grid-column: 7;  grid-row: 2; } /* veil */
.catalog-hero__label:nth-child(7)  { grid-column: 8;  grid-row: 1; } /* набор */
.catalog-hero__label:nth-child(8)  { grid-column: 8;  grid-row: 2; } /* блокноты */
.catalog-hero__label:nth-child(9)  { grid-column: 9;  grid-row: 2; } /* брелок */
.catalog-hero__label:nth-child(13) { grid-column: 10;  grid-row: 1; } /* космо-грунт */
.catalog-hero__label:nth-child(11) { grid-column: 11; grid-row: 2; } /* бейджик */
.catalog-hero__label:nth-child(10) { grid-column: 12; grid-row: 1; justify-self: end; text-align: right; } /* перчатки */
.catalog-hero__label:nth-child(12) { grid-column: 12; grid-row: 2; justify-self: end; text-align: right; } /* ручка */


/* II.II. планеты */
.catalog-planets__grid {
    --catalog-planet-width: 92%;

    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: 56px;
}

.catalog-planets__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* левая */
.catalog-planets__item:nth-child(3n + 1) {
    grid-column: 1 / 5;
    align-items: flex-start;
}

/* центральная */
.catalog-planets__item:nth-child(3n + 2) {
    grid-column: 5 / 9;
    align-items: center;
}

/* правая */
.catalog-planets__item:nth-child(3n) {
    grid-column: 9 / 13;
    align-items: flex-end;
}

/* единый размер планеток */
.catalog-planets__image-wrap {
    position: relative;
    width: var(--catalog-planet-width);
    aspect-ratio: 1 / 1;
}

.catalog-planets__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ховер лайт версии */
.catalog-planets__image--light {
    opacity: 0;
    transition: opacity 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
    .catalog-planets__item:hover .catalog-planets__image--light {
        opacity: 1;
    }
}

/* плюсик */
.catalog-planets__add {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    z-index: 3;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-medium);
}

/* название */
.catalog-planets__name {
    width: var(--catalog-planet-width);
    margin-top: 16px;
    text-align: center;
    text-transform: uppercase;
}





/* II.III. проекты */
.catalog-projects {
    --proj-card-height: 308px;
    --proj-media-inset: 8px;

    margin-top: var(--section-space);
    scroll-margin-top: calc(var(--header-offset) + 80px);
}

.catalog-projects__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gap);
}


/* общая карточка */
.catalog-projects__card {
    position: relative;
    display: flex;
    align-items: stretch;

    height: var(--proj-card-height);
    overflow: hidden;
    border-radius: 32px;
}


/* конструктор */
.catalog-projects__card--constructor {
    grid-column: 1 / 7;
    background-color: var(--color-blue);
    color: var(--color-black);
}


/* инструкция */
.catalog-projects__card--instructions {
    grid-column: 7 / 13;
    background-color: var(--color-dark-blue);
    color: var(--color-white);
}


/* контент карточки */
.catalog-projects__content {
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    flex-direction: column;

    padding: 24px 32px 32px 32px;
}

/* заголовок */
.catalog-projects__title {
    margin: 0;
    color: inherit;
    font-size: clamp(36px, 3vw, 48px);
}

/* описание */
.catalog-projects__text {
    margin: 16px 0 0;
    max-width: 320px;

    color: inherit;
    opacity: 0.7;
}


/* ста-кнопка */
.catalog-projects__button {
    margin-top: auto;
    align-self: flex-start;

    color: var(--color-black);
}

@media (hover: hover) and (pointer: fine) {
    .catalog-projects__button:hover {
        background-color: var(--color-white);
        color: var(--color-black);
    }
}


/* пикча */
.catalog-projects__media {
    position: relative;
    flex: 0 0 auto;
    align-self: stretch;
    width: calc(var(--proj-card-height) - var(--proj-media-inset) * 2);
    margin: var(--proj-media-inset);

    border-radius: var(--radius-medium);
    overflow: hidden;
    isolation: isolate;

    background-color: var(--color-blue);
}
.catalog-projects__card--instructions .catalog-projects__media {
    background-color: var(--color-dark-blue);
}

.catalog-projects__mockup {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;

    filter: blur(var(--blur-default));
    transform: scale(1.06);
    transition: filter 0.45s ease, transform 0.45s ease;
}

/* оверлей */
.catalog-projects__overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: rgba(var(--color-black-rgb), 0.6);

    opacity: 1;
    transition: opacity 0.45s ease;
}


/* свгшка */
.catalog-projects__form {
    width: 80%;
    height: auto;
    display: block;
}


/* ховер */
@media (hover: hover) and (pointer: fine) {
    .catalog-projects__media:hover .catalog-projects__overlay {
        opacity: 0;
    }

    .catalog-projects__media:hover .catalog-projects__mockup {
        filter: blur(0);
        transform: scale(1);
    }
}





/* II.IV. мерч */
.catalog-merch {
    margin-top: var(--section-space);
}

.catalog-merch__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: 64px;
}


/* карточка товара */
.catalog-merch__item {
    grid-column: span 4;

    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.catalog-merch__item--wide {
    grid-column: 1 / -1;
}


/* контейнер пикчи товара */
.catalog-merch__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;
    border-radius: var(--radius-medium);
    background-color: var(--color-light-gray);
}

.catalog-merch__item--wide .catalog-merch__image-wrap {
    aspect-ratio: 2454 / 800;
}


/* дефолт пикча */
.catalog-merch__image {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transform: scale(2.1);
    filter: grayscale(1);
    transition: transform 0.7s ease, filter 0.7s ease;
}

.catalog-merch__item--wide .catalog-merch__image {
    transform: scale(2);
}


/* ховер */
.catalog-merch__item:hover .catalog-merch__image,
.catalog-merch__item.is-hovered .catalog-merch__image {
    transform: scale(1);
    filter: grayscale(0);
}


/* плюсик */
.catalog-merch__add {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    z-index: 3;

    cursor: pointer;
    border: none;
    border-radius: var(--radius-medium);
}


/* название */
.catalog-merch__name {
    margin: 24px 0 0;

    text-align: center;
    text-transform: uppercase;
    color: var(--color-black);
}












/* III. мероприятия */

.events-page {
    background-color: var(--color-light-gray);
    padding-top: calc(var(--header-offset) + 80px);
    padding-bottom: var(--section-space);
}

.events-page__mobile {
    display: none;
}

.events-page__desktop {
    display: flex;
    flex-direction: column;
}

.events-page__row {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-gap);
}

/* оверлей скрыт по дефолту */
.events-page .events-preview__card-overlay {
    opacity: 0;
    pointer-events: none;
}

/* ховер по наведению */
@media (hover: hover) and (pointer: fine) {
    .events-page .events-preview__card:hover .events-preview__card-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}

/* блок дат */
.events-page__date-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 16px 0;
}

.events-page__date-row:last-of-type {
    margin-bottom: 0;
}

.events-page__date {
    color: var(--color-black);
}

.events-page__date-line {
    flex: 1 1 0;
    height: 2px;
    background-color: var(--color-black);
}











/* IV. руководство */
.guide-page { background-color: var(--color-light-gray); }

/* хиро экранчик */
.guide-hero {
    position: relative;
    width: 100%;
    height: 100svh;
    overflow: hidden;
    background-color: var(--color-black);
    border-radius: 0 0 var(--radius-large) var(--radius-large);
}
.guide-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    pointer-events: none;
    user-select: none;
}
.guide-hero__inner {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* кликабельный слой на листалку */
.guide-hero__link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
}

/* обложка */
.guide-hero__cover {
    position: absolute;
    top: 13%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(720px, 78%, 1180px);
    height: auto;
    object-fit: contain;
    user-select: none;
}

/* подсказка callout */
.guide-hero-callout {
    position: absolute;
    z-index: 3;
    pointer-events: none;

    left: 72%;
    top: 40%;
    width: 360px;
    height: 90px;
}
.guide-hero-callout__circle {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(var(--color-white-rgb), 0.5);
    backdrop-filter: blur(var(--blur-default));
    -webkit-backdrop-filter: blur(var(--blur-default));
}
.guide-hero-callout__line {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: 150px;
    height: auto;
    display: block;
    pointer-events: none;
    user-select: none;
}
.guide-hero-callout__text {
    position: absolute;
    left: 188px;
    top: 20px;
    white-space: nowrap;
    text-align: left;
    text-transform: uppercase;
    color: var(--color-light-gray);
}


/* слайдер разворотов */
.guide-spreads {
    padding-top: var(--section-space);
    padding-bottom: 0;
}
.guide-spreads__slider {
    position: relative;
    overflow: hidden;

    width: 100vw;
    margin-left: calc(50% - 50vw);
}
.guide-spreads__track {
    display: flex;
    gap: 16px;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.guide-spreads__slide { flex: 0 0 auto; }
.guide-spreads__image {
    display: block;
    height: 360px;
    width: auto;
    object-fit: cover;
    border-radius: 12px;
    user-select: none;
}

/* стрелки */
.guide-spreads__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-medium);
}
.guide-spreads__arrow--prev { left: 24px; }
.guide-spreads__arrow--next { right: 24px; }
.guide-spreads__arrow--prev img { transform: none; }
.guide-spreads__arrow--next img { transform: rotate(180deg); }











/* V. о нас */

.about-page {
    background-color: var(--color-light-gray);
    padding-top: calc(var(--header-offset) + 80px);
    padding-bottom: var(--section-space);
}

/* видео на хиро экране */
.about-page__hero {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
}
.about-page__hero-video {
    display: block;
    width: 100%;
    height: 696px;
    object-fit: cover;
}
.about-page__hero-image { display: none; }


/* блок о нас */
.about-page__info { margin-top: 80px; }


/* галерея рендеров */
.about-gallery { margin-top: 80px; }
.about-gallery__mobile { display: none; }

.about-gallery__slider {
    position: relative;
    overflow: hidden;
}
.about-gallery__track {
    display: flex;
    gap: var(--grid-gap);
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.about-gallery__slide { flex: 0 0 100%; }
.about-gallery__image-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.about-gallery__image {
    display: block;
    width: 100%;
    height: 696px;
    object-fit: cover;
    border-radius: 32px;
}

/* стрелки */
.about-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-medium);
}
.about-gallery__arrow--prev { left: 24px; }
.about-gallery__arrow--next { right: 24px; }
.about-gallery__arrow--prev img { transform: none; }
.about-gallery__arrow--next img { transform: rotate(180deg); }











/* 404 */
.error-hero {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 760px;
    overflow: hidden;

    background-color: var(--color-black);
    color: var(--color-white);
    border-radius: 0 0 var(--radius-large) var(--radius-large);

    --error-planet-size: 460px;
    --error-button-bottom: 32px;
}

.error-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    pointer-events: none;
    user-select: none;
}

.error-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

/* планета */
.error-hero__planet-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;

    width: var(--error-planet-size);
    height: var(--error-planet-size);
}

.error-hero__planet {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.error-hero__planet--light {
    opacity: 0;
    transition: opacity 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
    .error-hero__planet-wrap:hover .error-hero__planet--light {
        opacity: 1;
    }
}

/* код 404 */
.error-hero__code {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;

    width: clamp(520px, 54vw, 840px);
    height: auto;

    filter: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    pointer-events: none;
    user-select: none;
}

/* пунктик */
.error-callout {
    position: absolute;
    z-index: 4;
    left: 46%;
    top: -12%;

    width: 380px;
    height: 90px;
}

.error-callout__circle {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 48px;

    border-radius: 50%;
    background-color: rgba(var(--color-white-rgb), 0.5);
    backdrop-filter: blur(var(--blur-default));
    -webkit-backdrop-filter: blur(var(--blur-default));
}

.error-callout__line {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: 150px;
    height: auto;

    display: block;
    pointer-events: none;
    user-select: none;
}

.error-callout__text {
    position: absolute;
    left: 188px;
    top: 16px;

    white-space: nowrap;
    color: var(--color-light-gray);
}

.error-callout__text--mobile {
    display: none;
}

.error-callout__text-line {
    display: inline;
    white-space: nowrap;
}

.error-callout__text-line + .error-callout__text-line::before {
    content: " ";
}


/* боди текст */
.error-hero__text {
    position: absolute;
    left: 50%;

    top: calc(
        50% + var(--error-planet-size) / 2 +
        ( 100% - 50% - var(--error-planet-size) / 2 - var(--error-button-bottom) - 41px ) / 2
    );

    transform: translate(-50%, -50%);
    z-index: 3;

    width: 400px;
    text-align: center;
    color: var(--color-light-gray);
}


/* кнопка возврата */
.error-hero__button {
    position: absolute;
    left: 50%;
    bottom: var(--error-button-bottom);
    transform: translateX(-50%);
    z-index: 3;
}