@use "sass:color";
@import "instance";

@mixin ball_1 {
    @include animated_radial_ball((
        color: color.scale($c4f_l, $lightness: 60%),
        top: 43%,
        left: 5%
    ));
}

@mixin ball_2 {
    @include animated_radial_ball((
        color: color.scale($c10_j, $lightness: 42%),
        top: 0%,
        left: 30%,
        delay: 5s,
        time: 10s
    ));
}

@mixin ball_3 {
    @include animated_radial_ball((
        color: $c11_j,
        top: 30%,
        left: 85%,
        delay: 5s,
        time: 7s
    ));
}

.slider_full {
    @include wh(100vw);
    @include bc($c1, $c2);
    @include position;
    max-height: 1010px;
    aspect-ratio: calc(16 / 9);
    background: $gra11_j, $gra10_j;
    padding-block-start: 50px;
    overflow: hidden;
    z-index: 2;

    @include brp($b3) {
        aspect-ratio: 1.72;
    }

    @include brp($b6) {
        @include wh(100vw, 600px);
        height: 600px;
        aspect-ratio: 0.52;
    }

    .decoration_container_full {
        @include position(absolute);
        @include whs(100%);
        overflow: hidden;
        z-index: 1;

        .ball_1 { @include ball_1; }
        .ball_2 { @include ball_2; }
        .ball_3 { @include ball_3; }

        .ball_4 {
            @include ball_1;
            animation-delay: 5s;
            top: 76%;
            left: 85%;
        }

        .ball_5 {
            @include ball_2;
            animation-delay: 0s;
            top: 103%;
            left: 50%;
        }

        .ball_6 {
            @include ball_3;
            animation-delay: 10s;
            top: 100%;
            left: 10%;
        }
    }

    .container_full {
        @include flex-direction(column);
        @include align-items(center);
        @include gap(min(3.22vw, 62px));
        @include position;
        @include flex;
        @include whs(100%);
        z-index: 2;

        .indicator {
            @include position(absolute, min(2.60vw, 25px), 50%, bottom);
            @include transform(translateX(-50%));
            @include align-items(flex-end);
            @include gap(15px);
            @include flex;
            z-index: 2;

            @include brp($b2) {
                bottom: min(1.73vw, 25px);
            }

            @include brp($b8) {
                @include wh(68%);
            }

            .description {
                @include align-self(center);
                @include wh(min(11.35vw, 218px));
                @include bc($c0, $c1);
                @include t1((
                    size: clamp(szrem(10), 0.93vw, szrem(18))
                ));
                text-wrap-style: balance;

                @include brp($b4) {
                    @include wh(min(15.62vw, 200px));
                }

                @include brp($b7) {
                    @include wh(90%);
                }
            }
        }

        .title {
            @include position;
            @include wh(min(45.86vw, 823px));
            @include bc($c0, $c2);
            @include t1((
                weight: 700,
                size: clamp(szrem(42), 4.16vw, szrem(80))
            ));
            margin-block-start: 30px;
            z-index: 3;

            @include brp($b6) {
                @include wh(98%);
                font-size: 33px;
            }
        }

        .container_cards_slider_full {
            @include position(relative);
            @include user-select;
            width: min(100vw, 1920px);
            aspect-ratio: 1;
            margin-inline: auto;
            z-index: 1;

            .cards_orbit {
                @include position(absolute);
                inset: 0;
                will-change: transform;
            }

            .card {
                @include position(absolute);
                @include wh(
                    clamp(210px, 20.83vw, 400px),
                    clamp(264px, 26.04vw, 500px)
                );
                transform-origin: center center;
                z-index: 2;
                will-change: transform;
                backface-visibility: hidden;

                .content_card {
                    @include transition(opacity $t5 ease-in-out);
                    @include flex-direction(column);
                    @include justify-content(flex-end);
                    @include align-items(center);
                    @include position(absolute);
                    @include whs(100%);
                    @include gap(10px);
                    @include flex;
                    padding: 20px 20px 40px;
                    z-index: 2;
                    opacity: 0;

                    &::after {
                        @include position(absolute);
                        @include whs(100%);
                        @include background((
                            image: $gra12_j
                        ));
                        z-index: 1;
                        content: "";
                    }

                    &.active {
                        @include transition(opacity $t5 ease-in-out);
                        opacity: 1;
                    }

                    @media (hover: hover) and (pointer: fine) {
                        &:hover {
                            @include transition(opacity $t5 ease-in-out);
                            opacity: 1;
                        }
                    }

                    @media (hover: none), (pointer: coarse) {
                        pointer-events: none;

                        &.active {
                            pointer-events: auto;
                        }
                    }


                    .name {
                        @include position;
                        @include bc($c0, $c1);
                        @include t1((
                            weight: 700,
                            size: clamp(szrem(18), 1.66vw, szrem(32))
                        ));
                        z-index: 2;
                    }

                    .link {
                        @include wh(85%, initial);
                        max-height: 50px;
                        aspect-ratio: 3.47;
                        padding-inline: initial;
                        z-index: 2;
                    }
                }

                .container_img_card {
                    @include border-radius(10px);
                    @include position;
                    @include whs(100%);
                    @include box-shadow($sha2_j);
                    display: block;
                    overflow: hidden;
                    z-index: 1;

                    .img_card {
                        @include whs(100%);
                        object-fit: cover;
                    }
                }
            }
        }
    }
}