@import "instance";

.showcase_jersey {
    background-image: $gra1f;
    overflow: hidden;

    .wrapper_showcase_jersey {
        @include center-flex-column;
        @include position;
        @include wh(100vw);
        margin-inline: auto;
        max-width: 1920px;
        min-height: min(100vh, 850px);
        padding-block-end: 95px;
        padding-block-start: 95px;

        @include brp($b4) {
            padding-block-start: 55px;
            padding-block-end: 55px;
        }

        @include brp($b7) {
            padding-block-start: 110px;
            padding-block-end: 110px;
        }

        .bg_visor_showcase_jersey {
            @include position;
            @include flex-direction(column);
            @include gap(115px);
            @include flex;
            @include transition(opacity $t3);
            pointer-events: none;
            margin-inline: auto;
            max-width: 1450px;
            z-index: 1;

            @include brp($b7) {
                @include gap(max(5.5vw, 30px));
            }

            $time: 4s;
            $time_mobile: 7s;

            .country_showcase_jersey {
                @include t1((
                    align: center,
                    font: $f3,
                    size: min(16.1vw, szrem(250)),
                    transform: uppercase,
                ));
                letter-spacing: min(1.1vw, szrem(12.5));
                user-select: none;
                opacity: 0;

                @include brp($b7) {
                    font-size: szrem(52);
                }

                &:nth-child(1) {
                    @include animation(showcase_jersey_text1 $time linear infinite);

                    @include brp($b7) {
                        @include animation(showcase_jersey_text1_mobile $time_mobile linear infinite);
                    }
                }

                &:nth-child(2) {
                    @include animation(showcase_jersey_text2 $time linear infinite);

                    @include brp($b7) {
                        @include animation(showcase_jersey_text2_mobile $time_mobile linear infinite);
                    }
                }

                &:nth-child(3) {
                    @include animation(showcase_jersey_text3 $time linear infinite);

                    @include brp($b7) {
                        @include animation(showcase_jersey_text3_mobile $time_mobile linear infinite);
                    }
                }

                &:nth-child(4) {
                    display: none;

                    @include brp($b7) {
                        @include animation(showcase_jersey_text4 $time_mobile linear infinite);
                        display: block;
                    }
                }
                &:nth-child(5) {
                    display: none;

                    @include brp($b7) {
                        @include animation(showcase_jersey_text5 $time_mobile linear infinite);
                        display: block;
                    }
                }
                &:nth-child(6) {
                    display: none;

                    @include brp($b7) {
                        @include animation(showcase_jersey_text6 $time_mobile linear infinite);
                        display: block;
                    }
                }
            }
        } // bg_visor_showcase_jersey

        .content_main_jersey {
            @include position(absolute, 50%, 50%);
            @include transform(translate(-50%, -50%));
            @include wh(37%);
            @include transition(all $t3);
            z-index: 2;

            @include brp($b7) {
                max-width: 350px;
                width: 97%;
            }

            .img_visor_showcase_jersey {
                @include wh(100%);
                filter: drop-shadow(5vw 3vw 8px rgba($c2, 0.1));

                @include brp($b7) {
                    filter: drop-shadow(5vw 3vw 3px rgba($c2, 0.1));
                }
            }
        } // content_main_jersey

        .content_tooltips_jersey {
            @include position(absolute, 50%, 50%);
            @include transform(translate(-50%, -50%));
            @include wh(37%, auto);
            aspect-ratio: 200 / 219;
            z-index: 3;

            @include brp($b7) {
                max-width: 350px;
                width: 97%;
                z-index: 5;
            }

            .ct1 {
                @include position(absolute, 10%, 10%);

                &.active {
                    @include brp($b7) {
                        @include position(absolute, 8%, 18%);
                    }
                }
            }
            .ct2 {
                @include position(absolute, 22%, 62%);

                &.active {
                    @include brp($b7) {
                        @include position(absolute, 5%, 62%);
                    }
                }
            }
            .ct3 {
                @include position(absolute, 38%, 47%);

                @include brp($b7) {
                    @include position(absolute, 44%, 44.5%);
                }
            }

            .open_tooltip {
                all: initial;
                @include transition(rotate $t3);
                @include center-flex-column;
                @include border-radius(50%);
                @include normalize-svg((
                    width: calc(nth($l9, 1) + 20px),
                    height: calc(nth($l9, 1) + 20px)
                ));
                @include bc(rgba($c4, 0.5), $c0);
                rotate: 0deg;
                cursor: pointer;
                z-index: 4;

                &.active { rotate: 45deg; }
            }

            .content_tooltip {
                opacity: 0;

                .block_title {
                    @include t1((
                        align: left,
                        size: min(20.83vw, szrem(40)),
                        transform: uppercase,
                        weight: 700
                    ));
                    color: var(--c7_lp);
                    margin-bottom: 5px;

                    @include brp($b4) {
                        font-size: min(4.63vw, szrem(34)),;
                    }

                    @include brp($b7) {
                        font-size: min(10vw, szrem(32));
                    }
                }

                .block_paragraph {
                    @include t1((
                        align: left,
                        size: min(1.54vw, szrem(20)),
                        weight: 400
                    ));
                    @include wh(100%, auto);
                    color: var(--c7_lp);
                    line-height: 1.4;
                    margin-bottom: 20px;
                    text-shadow: 0 2px 2px rgba($c2, 0.35);

                    @include brp($b7) {
                        @include wh(100%, auto);
                        font-size: min(4.36vw, szrem(14));
                    }
                }

                .block_image {
                    @include wh(min(10.42vw, 200px), auto);
                    display: block;

                    @include brp($b7) {
                        @include wh(min(25.02vw, 80px), auto);
                    }
                }

                .close_tooltip {
                    all: initial;
                    @include center-flex-column;
                    @include border-radius(50%);
                    @include normalize-svg((
                        position: absolute,
                        width: calc(clamp(10px,1.3vw,25px) + 20px),
                        height: calc(clamp(10px,1.3vw,25px) + 20px),
                        xaxis: left,
                        x: 0px,
                        y: szrem(-20)
                    ));
                    @include bc($c2, $c0);
                    cursor: pointer;
                    z-index: 4;
                }

                &.block_1 {
                    &.block_left_top {
                        @include position(absolute, 20px, 105%, top, right);
                        @include wh(min(25vw, 450px), auto);
                        border-top: 1px solid $c1;
                        padding-top: szrem(55);

                        @include brp($b4) {
                            width: max(27.9vw ,220px);
                        }

                        @include brp($b7) {
                            align-items: flex-start;
                            border-color: $c1;
                            border-style: solid;
                            border-width: 0 0 0 1px;
                            display: flex;
                            gap: 10px;
                            height: 175px;
                            left: 15px;
                            padding: 0 0 0 szrem(15);
                            right: auto;
                            top: -175px;
                            width: 365px;
                        }

                        @include brp($b9) {
                            height: 205px;
                            top: -205px;
                            width: 275px;
                        }

                        .close_tooltip {
                            @include brp($b7) {
                                left: -16px;
                            }
                        }

                        .wrapper-texts {
                            width: 70%;
                        }
                    }

                    &.block_right_bottom {
                        @include position(absolute, 620%, min(54.6vw, 1050px));
                        @include wh(min(19vw,270px), auto);

                        @include brp($b4) {
                            left: min(47vw, 600px);
                            top: 450%;
                        }

                        @include brp($b7) {
                            align-items: flex-start;
                            flex-direction: row-reverse;
                            display: flex;
                            gap: 10px;
                            top: 350px;
                            left: 40px;
                            width: 290px;
                        }

                        @include brp($b9) {
                            left: 7px;
                            top: 280px;
                        }

                        &::before {
                            @include position(absolute, -35%, calc(100% - 20px), top, right);
                            @include wh(50%, 30%);
                            border-color: $c1;
                            border-style: solid;
                            border-width: 1px 1px 0 0;
                            content: "";
                            display: block;

                            @include brp($b4) {
                                width: max(8vw, 80px);
                            }

                            @include brp($b7) {
                                height: 25%;
                                right: 60px;
                                top: -40%;
                                width: 60px;
                            }
                        }
                    }
                }

                &.block_2 {
                    @include position(absolute, clamp(-200px,-9vw,-230px), calc(clamp(10px,1.3vw,22px)), top, right);
                    @include wh(min(53vw,1100px), calc(100% + 75px));
                    border-color: $c1;
                    border-style: solid;
                    border-width: 1px 1px 0 0;
                    padding-top: szrem(55);

                    @include brp($b4) {
                        top: clamp(-160px,-9vw,-230px);
                    }

                    @include brp($b7) {
                        border-width: 0 0 0 1px;
                        height: 155px;
                        left: 15px;
                        padding: 0 0 0 szrem(30);
                        right: auto;
                        top: -155px;
                        width: 265px;
                    }

                    .wrapper-texts {
                        @include brp($b7) {
                            margin-top: -80px;
                            width: 210px;
                        }

                        @include brp($b9) {
                            margin-top: -60px;
                        }
                    }

                    .close_tooltip {
                        @include brp($b7) {
                            left: -16px;
                        }
                    }

                    .block_paragraph {
                        width: max(18.6vw, 240px);

                        @include brp($b7) {
                            width: 100%;
                        }
                    }

                    .block_image {
                        width: min(22.6vw,400px);
                        border-radius: 10px;

                        @include brp($b7) {
                            width: 75%;
                        }
                    }
                }

                &.block_3 {
                    @include position(absolute, min(2.7vw,44px), calc(clamp(10px,1.3vw,22px)), top, left);
                    @include wh(min(45vw, 864px), auto);
                    border-color: $c1;
                    border-style: solid;
                    border-width: 0 0 1px 1px;
                    max-height: 250px;
                    padding-bottom: szrem(90);

                    @include brp($b4) {
                        max-height: none;
                        padding-bottom: szrem(40);
                    }

                    @include brp($b7) {
                        height: 350px;
                        left: auto;
                        padding: 0 0 0 szrem(30);
                        right: 100%;
                        top: -334px;
                        width: 130px;
                    }

                    @include brp($b9) {
                        left: -115px;
                        width: 115px;
                    }

                    .wrapper-texts {
                        @include brp($b4) {
                            margin-top: -90px;
                        }

                        @include brp($b7) {
                            margin-top: -70px;
                            width: 250px;
                        }

                        @include brp($b9) {
                            margin-top: -50px;
                        }
                    }

                    .close_tooltip {
                        @include normalize-svg((
                            position: absolute,
                            width: calc(clamp(10px,1.3vw,25px) + 20px),
                            height: calc(clamp(10px,1.3vw,25px) + 20px),
                            xaxis: left,
                            x: calc(100% - 24px),
                            y: calc(100% - 18px)
                        ));

                        @include brp($b7) {
                            left: -16px;
                            top: 0;
                        }
                    }

                    .block_title,
                    .block_paragraph,
                    .block_image {
                        margin-left: auto;
                        text-align: right;
                        width: max(12vw, 310px);

                        @include brp($b7) {
                            margin-left: 0;
                            text-align: left;
                            width: 100%;
                        }
                    }

                    .block_title {
                        margin-top: -10vw;
                        color: $c4;

                        @include brp($b4) {
                            margin-top: -20px;
                        }
                    }

                    .block_paragraph {
                        width: max(9vw, 230px);
                        color: $c2;

                        @include brp($b4) {
                            width: max(18.7vw, 150px);
                        }

                        @include brp($b7) {
                            width: 100%;
                        }
                    }

                    .block_image {
                        @include brp($b4) {
                            width: max(18.7vw, 150px);
                        }

                        @include brp($b7) {
                            width: max(18.7vw, 170px);
                        }
                    }
                }

                &.open {
                    opacity: 1;
                }
            }
        } // contente_tooltips_jersey

        .content_buy_now {
            @include center-flex-column;
            @include position(absolute, 50%, 11%);
            z-index: 4;

            @include brp($b7) {
                @include transform(translateX(-50%));
                bottom: 50px;
                display: flex;
                justify-content: space-between;
                left: 50%;
                top: 50px;
                width: 100%;
            }

            .wrapper-texts {
                position: relative;
                z-index: 3;
            }

            .title_showcase_jersey {
                @include bc($c0, var(--c7_lp));
                @include t1((
                    transform: uppercase,
                    size: min(2.60vw, szrem(50)),
                    weight: 700
                ));

                @include brp($b7) {
                    font-size: szrem(26);
                }
            }

            .subtitle_showcase_jersey {
                @include bc($c0, var(--c7_lp));
                @include t1((
                    transform: uppercase,
                    size: min(1.66vw, szrem(32)),
                    weight: 700
                ));
                margin-bottom: 40px;

                @include brp($b4) {
                    margin-bottom: 20px;
                }

                @include brp($b7) {
                    font-size: szrem(18);
                }
            }

            .btn_fed {
                display: none;
            }

            .btn_buy {
                @include btn_2((
                    bg: $c1,
                    bg_hover: $c1,
                    color_hover: $c2,
                    width: $l16x_1,
                    height: $l16y_1,
                    color: $c2
                ));
                @include position;
                @include border-radius(33px);
                z-index: 3;

                @include brp($b4) {
                    padding-inline: szrem(5);
                }

                &:hover {
                    .content_link {
                        &::after { filter: invert(1); }
                    }
                }

                .content_link {
                    @include t1((
                        font: $f1,
                        size: szrem(24),
                        transform: uppercase
                    ));
                    letter-spacing: 0.6px;

                    @include brp($b4) {
                        font-size: szrem(16);
                    }

                    &.icon_bag {
                        &::after {
                            @include brp($b7) {
                                top: -1px;
                            }
                        }
                    }
                }
            }
        } // content_buy_now

        .content_instructions {
            @include t1((
                font: $f1,
                size: szrem(23),
            ));
            @include position(absolute, 11%, 50%, bottom, left);
            @include transform(translate(-50%, 0));
            @include transition(opacity $t3);
            @include wh(515px, auto);
            color: var(--c2);
            line-height: 1.2;
            padding-right: 30px;
            z-index: 5;

            @include brp($b7) {
                bottom: calc(50% - 240px);
                font-size: 12px;
                padding-right: 22px;
                width: 150px;
            }

            &::before {
                left: auto;
                right: 0;
                top: 4px;

                @include brp($b7) {
                    top: 4px;
                }
            }
        } // content_instructions

        .gradient-divider {
            background-image: $gra2f;
            @include position(absolute, -1px, auto, bottom, left);
            @include wh(100vw, 50%);
            pointer-events: none;
            z-index: 2;

            @include brp($b7) {
                bottom: -1px;
                height: 50%;
            }
        } // gradient-divider

        &.active {
            @include brp($b7) {
                padding-block-start: 330px;
            }

            @include brp($b9) {
                padding-block-start: 250px;
            }

            .bg_visor_showcase_jersey {
                opacity: 0;

                @include brp($b9) {
                    grid-gap: max(5.5vw, 20px);
                }
            }

            .content_buy_now {
                @include brp($b7) {
                    bottom: 50px;
                    left: 50%;
                    top: auto;
                    z-index: 6;
                }
            }

            .content_instructions {
                opacity: 0;
            }

            .gradient-divider {
                @include brp($b7) {
                    height: 100%;
                }
            }
        }
    }

    &.ct1 {
        background-image: $gra2_j;

        .content_main_jersey,
        .content_tooltips_jersey {
            top: calc(50% + 3vw);
            width: 60%;

            @include brp($b4) {
                width: 50%;
            }

            @include brp($b7) {
                max-width: none;
                width: 530px;
            }

            @include brp($b9) {
                top: calc(50% + 15vw);
                width: 455px;
            }
        }

        .content_tooltips_jersey {
            .ct2,
            .ct3 {
                display: none;
            }
        }

        .content_buy_now {
            left: 4%;
            top: 66%;

            @include brp($b4) {
                top: 73%;
            }
        }
    }

    &.ct2 {
        @include background((
            size: cover,
            position: center
        ));
        background-image: var(--img_ct2);

        .content_main_jersey,
        .content_tooltips_jersey  {
            left: calc(50% + 15vw);

            @include brp($b7) {
                left: calc(50% - 180px);
                max-width: none;
                top: calc(50% + 30vw);
                width: 660px;
            }

            @include brp($b9) {
                left: calc(50% - 200px);
                top: calc(50% + 53vw);
            }
        }

        .content_tooltips_jersey {
            .ct1,
            .ct3 {
                display: none;
            }

            .block_image {
                box-shadow: 0 0 50px $c3;
            }
        }

        .content_buy_now {
            left: 17%;
            top: 59%;
        }
    }

    &.ct3 {
        background-image: $gra4f;

        .content_main_jersey,
        .content_tooltips_jersey  {
            width: 50%;

            @include brp($b4) {
                top: 50%;
            }

            @include brp($b7) {
                top: calc(50% + 10vw);
                max-width: 350px;
                width: 99%;
                z-index: 3;
            }

            @include brp($b9) {
                width: 110%;
            }
        }

        .content_tooltips_jersey {
            .ct1,
            .ct2 {
                display: none;
            }
        }

        .content_buy_now {
            left: 4%;
            top: 52%;
        }
    }
}