@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
    ));
}

.pro_full {
    @include user-select;
    @include position;
    @include wh(100vw);
    @include bc($c0, $c2);
    @include background((
        image: $gra15_j
    ));
    padding-block: clamp(50px, 5.21vw, 100px);
    overflow: hidden;
    z-index: 1;

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

    .swiper-slide { min-width: 342px; }
    .btn_fed { display: none; }

    .logo_stripe_trefoil_footer {
        @include position;
        @include center-flex-column;
        margin-block-start: 50px;
        z-index: 2;
    }

    .full_marquee_bg {
        @include position;
        z-index: 2;
    }

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

        .ball_1 { @include ball_1; }
        .ball_2 { @include ball_2; display: none; }
        .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_pro_full {
        @include position;
        @include center-flex-column;
        @include wh(min(100vw, 1920px));
        @include gap(30px);
        margin-block-end: 80px;
        margin-inline: auto;
        z-index: 2;

        @include brp($b7) {
            @include gap(20px);
        }

        .container_title_pro_full {
            margin-block-end: 20px;

            .title_pro_full {
                @include t1((
                    size: clamp(szrem(40), 2.60vw, szrem(50)),
                    transform: uppercase,
                    align: center,
                    weight: 700
                ));
                @include bc($c0, $c1);
                text-wrap-style: balance;

                @include brp($b8) {
                    margin: 0 auto;
                    width: 90%;
                }
            }
        }

        .btn_calltoaction_2 { filter: invert(1); }

        .instruction {
            @include t1((
                font: $f1,
                size: clamp(szrem(18), 1.25vw, szrem(24)),
                weight: 400,
                align: center
            ));
            @include bc($c0, $c2);
            text-wrap-style: pretty;
            max-width: 70vw;
        }

        .instruction_products {
            @include t1((
                transform: inherit,
                size: szrem(16),
                weight: 400,
                font: $f1
            ));
            @include bc($c0, $c2);
            max-width: 80vw;
        }

        .swiper {
            width: min(100%, 1440px);
            max-width: 1440px;

            .swiper-wrapper {
                @include wh(100%);
                @include flex;

                .card {
                    @include wh(340px);
                    @include user_select;
                    @include position;
                    aspect-ratio: calc(340 / 620);
                    max-height: 518px;
                    border: none;

                    &.active {
                        .front { @include transform(perspective(600px) rotateY(-180deg)); }
                        .back { @include transform(perspective(600px) rotateY(0)); }
                    }

                    &[data-no_rotate="true"] {
                        .front {
                            @include position(relative);
                            isolation: isolate;

                            &::before {
                                @include transition(opacity $t3);
                                @include position(absolute);
                                @include border-radius(inherit);
                                @include whs(100%);
                                border: $bd1;
                                background-image: $gra19_j;
                                content: "";
                                opacity: 0;
                                pointer-events: none;
                                transition: opacity 0.6s linear;
                                z-index: 0;
                            }

                            > * {
                                position: relative;
                                z-index: 1;
                            }

                            .btn_flip_card { display: none; }
                            .btn_info { display: none; }

                        }

                        &:hover {
                            .front {
                                &::before { opacity: 1; }

                                .name_product {
                                    @include transition(color $t3);
                                    color: $c2;
                                }

                                .price_product {
                                    @include transition(color $t3);
                                    color: $c2;
                                }

                                .btn_buy {
                                    @include filter(invert(0.95));
                                }
                            }
                        }
                    }

                    .item_card {
                        @include transition(all 0.6s linear);
                        @include position(absolute);
                        @include border-radius(10px);
                        @include bc(rgba($c1, 0.1), $c1);
                        @include whs(100%);
                        backface-visibility: hidden;
                        overflow: hidden;
                    }

                    .front {
                        @include transform(perspective(600px) rotateY(0));
                        @include grid;
                        border: $bd1;
                        grid-template-columns: minmax(0, 1fr);
                        grid-template-rows: auto minmax(52px, auto) 1fr auto;
                        padding: 25px 15px;

                        $bgs: ($gra1_l, $gra4_l, $gra4_l, $gra18_j, $gra4_l);
                        @for $i from 1 through length($bgs) {
                            @at-root .card.cardt#{$i} .front {
                                background-image: nth($bgs, $i);
                                border-radius: 10px;
                            }
                        }

                        .btn_flip_card {
                            all: initial;
                            @include position(absolute);
                            @include whs(100%);
                            cursor: pointer;
                            z-index: 2;
                        }

                        .information {
                            @include position(absolute, 11px, 9px, top, right);
                            @include flex-direction(row-reverse);
                            @include align-items(center);
                            @include border-radius(33px);
                            @include gap(5px);
                            @include flex;
                            @include bc(var(--c_info_f0), $c0);
                            padding: 4px 12px;

                            .icon_info {
                                @include whs(nth($l17_l, 2));
                                @include position(relative);

                                &::after {
                                    @include whs(nth($l17_l, 2));
                                }
                            }

                            .content_link {
                                @include bc($c0, var(--c1));
                                @include t1((font: $f1,
                                    size: szrem(16),
                                    weight: 400,
                                    align: center
                                ));
                            }
                        }

                        .img_product {
                            @include justify-self(center);
                            @include wh(100%);
                            aspect-ratio: 1;
                            grid-column: 1;
                            grid-row: 1;
                            margin-block-end: 25px;
                            display: block;
                            object-fit: contain;
                            max-width: 300px;
                            max-height: 300px;
                        }

                        .name_product {
                            @include align-self(start);
                            @include t1((
                                font: $f1,
                                size: clamp(szrem(24), 1.15vw, szrem(27)),
                                weight: 700,
                                transform: uppercase,
                                align: left
                            ));
                            @include bc($c0, $c1);
                            @include wh(100%);
                            grid-column: 1;
                            grid-row: 2;
                            overflow: hidden;
                            text-wrap-style: balance;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                        }

                        .price_product {
                            @include t1((
                                font: $f1,
                                size: clamp(szrem(18), 1.25vw, szrem(24)),
                                weight: 400,
                                transform: uppercase,
                                align: left
                            ));
                            @include bc($c0, $c1);
                            grid-column: 1;
                            grid-row: 3;
                            width: 100%;
                        }
                    } // front

                    .back {
                        @include transform(perspective(600px) rotateY(180deg));
                        @include justify-content(flex-start);
                        @include align-items(center);
                        @include flex-direction(column);
                        @include gap(5px);
                        @include flex;
                        padding-block-start: 25px;
                        padding-inline: 20px;
                        border: $bd1;

                        $bgs: ($gra1_l, $gra4_l, $gra4_l, $gra18_j, $gra4_l);
                        $back_img_widths: (80%, 95%, 100%, 90%, 100%);
                        @for $i from 1 through length($bgs) {
                            @at-root .card.cardt#{$i} .back {
                                background-image: nth($bgs, $i);
                                border-radius: 10px;

                                .img_technical {
                                    @include wh(nth($back_img_widths, $i) !important);
                                }

                                @if $i == 1 or $i == 4 {
                                    .bg_back_card {
                                        @include position(absolute);
                                        @include border-radius(10px);
                                        @include whs(100%);
                                        z-index: 0;

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

                                    .desc_away {
                                        @include t1((
                                            font: $f1,
                                            size: szrem(19),
                                            weight: 400,
                                            align: center
                                        ));
                                        text-wrap-style: pretty;
                                        width: 90%;
                                        line-height: 2.5ch;
                                    }
                                }
                            }
                        }

                        .img_technical {
                            @include position;
                            @include wh(92%);
                            object-fit: contain;
                            display: block;
                            z-index: 2;
                        }

                        .title_back {
                            min-height: 56px;
                            z-index: 2;
                        }

                        .title_back_1,
                        .title_back_2 {
                            @include t1((
                                transform: uppercase,
                                size: szrem(24),
                                weight: 700,
                                font: $f1
                            ));
                            @include bc($c0, $c1);
                            text-wrap-style: balance;
                            padding-inline: 20px;
                            display: block;
                            z-index: 2;
                        }

                        .btn_close_flip_card_2 {
                            all: initial;
                            @include normalize-svg((
                                width: nth($l22, 1),
                                height: nth($l22, 1),
                                position: absolute,
                                yaxis: bottom,
                                xaxis: right,
                                x: 8px,
                                y: 8px,
                                z: 2
                            ));
                            @include border-radius(50%);
                            @include bc($c1, $c0);
                            cursor: pointer;

                            &::before {
                                @include hv-center;
                            }
                        }

                        .container_images_specification {
                            @include center-flex-row;
                            @include flex;
                            @include gap(2%);
                            @include position;
                            z-index: 2;

                            .img_spe {
                                @include border-radius(7px);
                                @include wh(30%);
                                aspect-ratio: calc(100 / 200);
                                object-fit: cover;
                            }
                        }
                    } // back


                    .box_btn {
                        @include align-self(end);
                        @include align-items(center);
                        @include wh(100%);
                        @include grid;
                        pointer-events: none;
                        column-gap: 18px;
                        grid-template-columns: auto 1fr;
                        z-index: 3;

                        .btn_info {
                            @include justify-self(flex-start);
                            @include align-self(center);
                            @include normalize-svg((
                                width: nth($l22, 1),
                                height: nth($l22, 1),
                                position: relative,
                            ));
                        }

                        .btn_buy {
                            .content_link {
                                @include position;
                                padding-inline-end: 25px;
                            }
                        }
                    }
                } // card
            } // swiper-wrapper
        } // swiper

        .swiper-scrollbar {
            @include position;
            @include wh(50%, 2px);
            @include bc($c2, $c0);
            cursor: pointer;
            margin: 50px auto 10px;

            .swiper-scrollbar-drag {
                @include border-radius(0);
                @include wh(auto, 9px);
                @include bc($c2, $c0);
                top: -3px;
            }
        }
        .group_controlls {
            @include transform(translate(-50%, calc(-50% - 75px)));
            @include justify-content(space-between);
            @include flex-direction(row-reverse);
            @include position(absolute, 50%, 50%);
            @include wh(min(95vw, 100%), 100px);
            @include flex;
            pointer-events: none;
            max-width: 1700px;
            z-index: 2;

            @include brp($b6){ display: none; }

            .swiper-button-next, .swiper-button-prev {
                @include position;
                pointer-events: auto;
                cursor: pointer;
                color: $c0
            }

            .swiper-button-disabled { opacity: 0.3; }

            .icon_next, .icon_prev {
                @include filter(drop-shadow($sha4_j));
                @include whs(80px);
                background-color: rgba($c1, 0.2);
                border-radius: 50%;
                border: solid 2px $c1;
                top: 0;

                @include brp($b6) {
                    @include whs(50px);
                    z-index: 2;
                }

                &::after {
                    @include filter(drop-shadow($sha4_j));
                    @include hv-center;
                }
            }
        }
    } // container_pro_fullt
} // pro_full