/* SLIDER */
#slider {
    height: 465px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.slider-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s ease;
    opacity: 0;

    &.active {
        transform: translateX(0);
        opacity: 1;
        z-index: 2;
    }

    /* Слайд зліва (попередній) */
    &.slide-left {
        transform: translateX(-100%);
        opacity: 0;
        z-index: 1;
    }

    /* Слайд справа (наступний) */
    &.slide-right {
        transform: translateX(100%);
        opacity: 0;
        z-index: 1;
    }
}

#slide {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;

    &.bg {
        width: 100%;
        height: 100%;
    }

    & .logo {
        width: 360px;
        height: 240px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
}

#slide.example {
    background-image: url('/src/example.jpg');
}

.navigate {
    position: absolute;
    background-color: var(--b);
    gap: 10px;
    z-index: 3;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;

    & .number {
        font-size: 24px;
        font-weight: 900;
        width: 17px;
        text-align: center;
        &:hover {
            cursor: pointer;
        }

        &.active {
            color: var(--w);
        }
    }
}

#frame93 {
    position: relative;
    width: 560px;

    & .g {
        font-size: 32px;
        background-color: var(--g);
        color: var(--b);
        padding: 10px 40px;
        max-width: 460px;
        font-weight: 900;
    }

    & .b {
        font-size: 18px;
        background-color: var(--b);
        color: var(--g);
        padding: 20px 40px;
        max-width: 267px;
        font-weight: 400;
        &:hover {
            background-color: var(--g);
            color: var(--b);
            text-decoration: underline;
        }
    }
}

/* GAME NEW CARD*/
#main_game_box, #main_new_box {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    outline: var(--g) solid 0px;
    transition: outline 0.5s ease;
    &:hover {
        outline: var(--g) solid 15px;
    }
}

#frame66 {
    position: relative;
    z-index: 1;
    width: 360px;
    height: 224px;

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

    & .logo {
        z-index: 2;
        width: 213px;
        height: 141px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
}

#frame65 {
    width: 360px;
    height: auto;
    list-style: 1.5;
    background-color: var(--g);
    color: var(--b);
    font-size: 24px;
    font-weight: 900;
    padding: 20px;
}

#virtulis {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0px;
    color: var(--b);
    gap: 40px;
    position: relative;
    z-index: 1;

    & .gapped {
        display: grid;
        gap: 10px;
        & .title {
            line-height: 1.2;
            font-weight: 900;
            font-size: 32px;
        }
        & .desc {
            line-height: 1;
            font-weight: 400;
            font-size: 18px;
        }
    }
    & .ltr {
        justify-content: flex-start;
        gap: 12px;
    }
    & .b_w {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;

        width: 254px;
        height: 33px;
        background-color: var(--b);
        color: var(--y);
        font-size: 18px;
        font-weight: 900;
        line-height: 1;

        &:hover {
            background-color: var(--w);
            color: var(--b);
        }
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    25% { transform: translateY(-10px); }
    75% { transform: translateY(10px); }
}

.chipi {
    background-color: var(--y);
    margin: 80px 0;
    padding: 20px 0 !important;
}



/* Floating icons */
.icon {
    z-index: 0;
    position: absolute;
    font-size: 2rem;
    opacity: 0;
    transform: scale(0) rotate(-20deg);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    user-select: none;
}

.icon-1 { top: 10%; left: 45%; transition-delay: 0s; }
.icon-2 { top: 25%; left: 55%; transition-delay: 0.05s; }
.icon-3 { top: 8%; left: 25%; transition-delay: 0.1s; }
.icon-4 { top: 20%; left: 18%; transition-delay: 0.15s; }
.icon-5 { top: 15%; left: 60%; transition-delay: 0.1s; }
.icon-6 { top: 0%; left: 35%; transition-delay: 0.05s; }
.icon-7 { top: 20%; left: 30%; transition-delay: 0.08s; }
.icon-8 { bottom: 12%; left: 5%; transition-delay: 0.12s; }

.pageWrapper.vn {
    position: relative;
}

/* Hover state - icons appear */
.chipi:hover .icon {
    opacity: 0.35;
    transform: scale(1) rotate(0deg);
}

/* Add subtle floating animation on hover */
.pageWrapper.vn:hover .icon-1 { animation: float1 2s ease-in-out infinite; }
.pageWrapper.vn:hover .icon-2 { animation: float2 2.2s ease-in-out infinite; }
.pageWrapper.vn:hover .icon-3 { animation: float1 1.8s ease-in-out infinite; }
.pageWrapper.vn:hover .icon-4 { animation: float2 2.4s ease-in-out infinite; }
.pageWrapper.vn:hover .icon-5 { animation: float2 2.1s ease-in-out infinite; }
.pageWrapper.vn:hover .icon-6 { animation: float1 2.3s ease-in-out infinite; }
.pageWrapper.vn:hover .icon-7 { animation: float2 1.9s ease-in-out infinite; }
.pageWrapper.vn:hover .icon-8 { animation: float1 2.5s ease-in-out infinite; }

@keyframes float1 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(5deg); }
}

@keyframes float2 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(-5deg); }
}




@media only screen and (max-width: 1440px) {
    .ltr {
        width: 100%;
    }
}

@media only screen and (max-width: 1054px) {
    #slider {
        height: 595px;
    }
    #slide {
        flex-direction: column;
        gap: 40px;
    }

    #frame66 {
        width: 540px;
        height: 336px;
    }
    #frame65 {
        width: 540px;
    }
}
@media only screen and (max-width: 800px) {
    #frame93 {
        width: 441px;
    }
}

@media only screen and (max-width: 555px) {
    #main_game_box {
        width: 100%;
        & a {
            width: 100%;
        }
    }
    #frame66 {
        width: 100%;
        height: 336px;
    }
    #frame65 {
        width: 100%;
    }
    .slider-slide {
        transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
        &.slide-left {
            opacity: 1;
        }
        &.slide-right {
            opacity: 1;
        }
    }
}