:root {
    --pink: #ffa5f3;
    --blue-300: #0075ff;
    --hyg-black: #242424;
    --transparent: transparent;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.vibe-banner {
    display: block;
}

.vibe-banner_closed {
    display: none;
}

.vibeseeker-figure {
    margin: 0.5vw;
    width: 100%;
    height: 100%;
}

/********************* HEADER *********************/
.header {
    background-color: #242424B2;
    border-color: var(--blue-300);
}

.header-link {
    color: var(--blue-300);
    text-decoration-color: transparent;
    transition: all 0.3s ease;
}
.header-link:hover {
	text-decoration-color: var(--blue-300);
}
.header-link.w--current {
    color: var(--blue-300);
	text-decoration-color: var(--blue-300);
}

.header-brand {
    color: var(--blue-300);
}

/* VIBESEEKER GRID */
@media (min-width: 991px) {
    .vibeseeker-grid {
        user-select: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 200vw;
        height: 200vw;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 1vw;
        padding: 1vw;
    }
    .vibeseeker-item {
        scale: 1.7;
    }
}
@media screen and (min-width: 480px) and (max-width: 990px) {
    .vibeseeker-grid {
        user-select: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 300vw;
        height: 300vw;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 5vw;
        padding: 5vw;
    }
    .vibeseeker-item {
        scale: 1.4;
    }
}
@media (max-width: 479px) {
    .vibeseeker-grid {
        user-select: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 400vw;
        height: 400vw;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 1vw;
        padding: 1vw;
    }
    .vibeseeker-item {
        scale: 1;
    }
}

.vibe-overlay.has-stroke {
    border: 3px solid var(--pink);
}

/* Размеры для отсортированных элементов по data-number */
.vibeseeker-item.size-pattern-1 {
    width: 11.25rem !important;
    height: 11.25rem !important;
}

.vibeseeker-item.size-pattern-2 {
    width: 11.25rem !important;
    height: 13.75rem !important;
}

.vibeseeker-item.size-pattern-3 {
    width: 11.25rem !important;
    height: 11.25rem !important;
}

.vibeseeker-item.size-pattern-4 {
    width: 11.25rem !important;
    height: 13.75rem !important;
}

.vibeseeker-item.size-pattern-5 {
    width: 11.25rem !important;
    height: 6.25rem !important;
}

/* Ряд 2 */
.vibeseeker-item.size-pattern-6 {
    width: 11.25rem !important;
    height: 6.25rem !important;
}

.vibeseeker-item.size-pattern-7 {
    width: 11.25rem !important;
    height: 11.25rem !important;
}

.vibeseeker-item.size-pattern-8 {
    width: 11.25rem !important;
    height: 6.25rem !important;
}

.vibeseeker-item.size-pattern-9 {
    width: 11.25rem !important;
    height: 13.75rem !important;
}

.vibeseeker-item.size-pattern-10 {
    width: 11.25rem !important;
    height: 11.25rem !important;
}

/* Ряд 3 */
.vibeseeker-item.size-pattern-11 {
    width: 11.25rem !important;
    height: 11.25rem !important;
}

.vibeseeker-item.size-pattern-12 {
    width: 11.25rem !important;
    height: 13.75rem !important;
}

.vibeseeker-item.size-pattern-13 {
    width: 11.25rem !important;
    height: 11.25rem !important;
}

.vibeseeker-item.size-pattern-14 {
    width: 11.25rem !important;
    height: 6.25rem !important;
}

.vibeseeker-item.size-pattern-15 {
    width: 11.25rem !important;
    height: 11.25rem !important;
}

/* Ряд 4 */
.vibeseeker-item.size-pattern-16 {
    width: 11.25rem !important;
    height: 13.75rem !important;
}

.vibeseeker-item.size-pattern-17 {
    width: 11.25rem !important;
    height: 11.25rem !important;
}

.vibeseeker-item.size-pattern-18 {
    width: 11.25rem !important;
    height: 13.75rem !important;
}

.vibeseeker-item.size-pattern-19 {
    width: 11.25rem !important;
    height: 11.25rem !important;
}

.vibeseeker-item.size-pattern-20 {
    width: 11.25rem !important;
    height: 6.25rem !important;
}

/* Ряд 5 */
.vibeseeker-item.size-pattern-21 {
    width: 11.25rem !important;
    height: 13.75rem !important;
}

.vibeseeker-item.size-pattern-22 {
    width: 11.25rem !important;
    height: 13.75rem !important;
}

.vibeseeker-item.size-pattern-23 {
    width: 11.25rem !important;
    height: 6.25rem !important;
}

.vibeseeker-item.size-pattern-24 {
    width: 11.25rem !important;
    height: 13.75rem !important;
}

.vibeseeker-item.size-pattern-25 {
    width: 11.25rem !important;
    height: 6.25rem !important;
}

/* Ряд 6 */
.vibeseeker-item.size-pattern-26 {
    width: 11.25rem !important;
    height: 13.75rem !important;
}

.vibeseeker-item.size-pattern-27 {
    width: 11.25rem !important;
    height: 6.25rem !important;
}

.vibeseeker-item.size-pattern-28 {
    width: 11.25rem !important;
    height: 11.25rem !important;
}

.vibeseeker-item.size-pattern-29 {
    width: 11.25rem !important;
    height: 6.25rem !important;
}

.vibeseeker-item.size-pattern-30 {
    width: 11.25rem !important;
    height: 11.25rem !important;
}


canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    background-color: transparent;
}

.vibe-overlay {
    position: fixed;
    left: 0;
    top: 0;
    will-change: transform, width, height;
    z-index: 500;
    pointer-events: none;
    background: transparent;
    touch-action: none;
}

/* Специальные стили для overlay с ссылками */
.vibe-overlay:has(.vibe-overlay__link) {
    pointer-events: auto;
    cursor: pointer;
}

.vibe-overlay:has(.vibe-overlay__link):hover {
    cursor: pointer;
}

.vibe-overlay__link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    z-index: 100;
    cursor: pointer;
    pointer-events: auto;
    touch-action: none;
}

.vibe-overlay img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.vibeseeker-item .vibe-badge {
    display: none
}

.vibe-badge {
    top: 0.3125rem;
    right: 0.3125rem;
}

/*** MOBILE MENU EXPLORER ***/
.menu-player {
    border-color: var(--blue-300) !important;
}
.menu-diviner {
    background-color: var(--blue-300) !important;
}
.menu-link {
    color: var(--blue-300) !important;
}
.menu-burger {
    background-color: var(--blue-300) !important;
}
.burger-line {
    background-color: #fff !important;
}
.menu-toggle {
    border-color: var(--blue-300) !important;
}

/* ACTIVE STATE */
.menu-player.is-active {
    border-color: var(--pink) !important;
}

.menu-diviner.is-active {
    background-color: var(--white) !important;
}
.menu-link.is-active {
    color: var(--white) !important;
}
.menu-burger.is-active {
    background-color: var(--pink) !important;
}

.menu-toggle.is-active {
    border-color: var(--white) !important;
}

/* DESKTOP MENU */
.desktop-menu {
    background-color: #242424B2 !important;
    border-color: var(--blue-300) !important;
}
.desktop-menu_link {
    color: var(--blue-300) !important;
    transition: all 0.3s ease;
}
@media (min-width: 1024px) {
    .desktop-menu_link:hover .desktop-menu-text{
        text-decoration-color: var(--pink) !important;
    }
}
.desktop-menu_diviner {
    background-color: var(--blue-300) !important;
}

/********************* VIBESEEKER HERO *********************/
@media (min-width: 1024px) {
    .vibeseeker-hero__close-button {
        transition: all 0.3s ease;
        color: var(--pink);
    }
    .vibeseeker-hero__close-button:hover {
        color: var(--white);
    }

    .vibeseeker-hero__button {
        transition: all 0.3s ease;
        color: var(--pink);
        border-color: var(--pink);
    }
    .vibeseeker-hero__button:hover {
        color: var(--white);
        border-color: var(--white);
    }
}