@import "instance";

$pbs: clamp(80px, 6.25vw, 120px);
$pbs1: min(6.25vw, 120px);
$pbs2: clamp(186px, 12.81vw, 246px);
$pbs3: clamp(237px, 15.47vw, 297px);
$pbs4: clamp(180px, 11.45vw, 220px);
$hci: min(30.99vw, 595px);
$hci2: min(16.93vw, 325px);
$hci3: min(10.10vw, 194px);

.hero_products {
    @include position;
    @include background((
        image: $gra15_j
    ));
    overflow: hidden;
    z-index: 1;

    .full_marquee_bg {
        @include position;
        padding-block: 60px 40px;
        z-index: 2;
    }

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

        [class^="bg_"] {
            @include position(absolute);
            @include transition(opacity $t5);
            @include whs(100%);
            opacity: 0;

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

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

        .bg_away {
            @include bc($c2, $c0);

            &::after {
                @include position(absolute);
                @include background((
                    image: $gra13_j
                ));
                @include whs(100%);
                opacity: 0.35;
                z-index: 3;
                content: "";
            }

            .img { opacity: 0.5; }
        }

        .bg_glory {
            &::after {
                @include position(absolute);
                @include background((
                    image: $gra14_j
                ));
                @include whs(100%);
                z-index: 3;
                content: "";
            }
        }
    }

    .container_hero_slider {
        @include hero_full_slider_container;

        .hero_controls {
            @include user-select(none);
            @include transition(top $t2);
            @include wh(min(84.38vw, 1620px));
            @include flex-direction(row-reverse);
            @include justify-content(space-between);
            @include flex;
            @include hv-center;
            row-gap: 20px;
            flex-wrap: wrap;
            pointer-events: none;
            z-index: 3;

            @include brp($b7) {
                @include position(relative, initial, initial, initial);
                @include transform(none);
                @include justify-content(space-around);
                @include wh(95vw);
                margin-inline: auto;
                margin-block-start: 33px;
            }

            .discovery_more {
                @include center-flex-row;
                @include position(relative, 0, 7px);
                display: none;
                flex: 1 1 100%;

                @include brp($b7) {
                    @include flex;
                }
            }

            .next_hero { @include hero_button(row-reverse); }
            .prev_hero { @include hero_button(row); }
        }

        .hero_slider {
            @include position;
            z-index: 2;

            .hero_item {
                @include hero_full_slider_item_base;
            }
        }
    } // .container_hero_slider

    .container_trionda_slider {
        @include hero_full_slider_container((
            padding-block-start: $pbs
        ));

        .full_marquee_bg {
            margin-block-start: clamp(40px, 3.12vw, 60px);
        }

        .trionda_indicators {
            @include position(absolute, $pbs2, 50%);
            @include transform(translate(-50%, 0));
            z-index: 9;

            ul {
                @include gap(clamp(5px, 0.52vw, 10px));
                @include flex;

                li {
                    @include transition(opacity $t5);
                    @include border-radius(50%);
                    @include whs(clamp(10px, 1.04vw, 20px));
                    @include ht;
                    @include bc($c1, $c0);
                    opacity: 0.25;
                    cursor: pointer;

                    &.active {
                        opacity: 1;
                    }
                }
            }
        }

        .trionda_controls {
            @include transform(translateX(-50%));
            @include position(absolute, $pbs1, 50%);
            @include flex-direction(row-reverse);
            @include justify-content(space-between);
            @include wh(800px);
            @include flex;
            z-index: 8;

            @include brp($b6) {
                @include wh(95%);
            }

            @include brp($b7) {
                top: 173px;
            }

            .next_trionda {
                @include btn_controls;
                border: $bd2;

                @include brp($b4){
                    scale: 0.8;
                }
                @include brp($b7){
                    scale: 1;
                }
            }

            .prev_trionda {
                @include btn_controls;
                border: $bd2;

                @include brp($b4){
                    scale: 0.8;
                }
                @include brp($b7){
                    scale: 1;
                }
            }
        }

        .container_balls_trionda {
            @include position(absolute, $pbs3);
            @include wh(100%, $hci);
            @include user-select;
            z-index: 1;

            @include brp($b7) {
                @include wh(100%, 84vw);
            }

            .item_ball {
                @include transition(all $t5);
                @include position(absolute);
                @include whs($hci);
                object-position: 50% 50%;
                opacity: 0;
                display: block;
                z-index: 1;


                &.active {
                    @include transform(translate(-50%, -50%));
                    z-index: 4;
                    opacity: 1;
                    left: 50%;
                    top: 50%;

                    @include brp($b7) {
                        @include whs(min(84vw, 645px));
                    }
                }

                &.next_1 {
                    @include transform(translate(-50%, -50%));
                    @include filter(blur(20px));
                    @include whs($hci2);
                    z-index: 3;
                    opacity: 0.8;
                    left: 18%;
                    top: 50%;

                    @include brp($b7) {
                        @include filter(blur(5px));
                        @include whs(40vw);
                        left: -13%;
                    }
                }

                &.next_2 {
                    @include transform(translate(-50%, -50%));
                    @include filter(blur(20px));
                    @include whs($hci3);
                    z-index: 2;
                    opacity: 0.5;
                    left: 1%;
                    top: 50%;

                    @include brp($b7) {
                        opacity: 0;
                    }
                }

                &.prev_1 {
                    @include transform(translate(-50%, -50%));
                    @include filter(blur(20px));
                    @include whs($hci2);
                    z-index: 3;
                    opacity: 0.8;
                    left: 82%;
                    top: 50%;

                    @include brp($b7) {
                        @include filter(blur(5px));
                        @include whs(40vw);
                        left: 113%;
                    }
                }

                &.prev_2 {
                    @include transform(translate(-50%, -50%));
                    @include filter(blur(20px));
                    @include whs($hci3);
                    z-index: 2;
                    opacity: 0.5;
                    left: 100%;
                    top: 50%;

                    @include brp($b7) {
                        opacity: 0;
                    }
                }

                .img {
                    @include animation(rotate_clockwise_2 20s infinite linear);
                    @include whs(100%);
                    object-fit: contain;

                    &.no_rotation { @include animation(none); }
                }
            }
        }

        .trionda_slider {
            @include position;
            z-index: 2;

            .trionda_item {
                @include hero_full_slider_item_base;

                .head {
                    @include center-flex-column;

                    .eyebrow { @include hero_full_head_eyebrow; }
                    .title { @include hero_full_head_title; }

                    .price {
                        @include hero_full_head_price((
                            padding: 10px 0 0
                        ));
                    }
                } // .head

                .trionda_image_space {
                    @include wh(100%, $hci);

                    @include brp($b7) {
                        @include wh(100%, 84vw);
                    }

                    .container_hotspots_trionda {
                        @include transform(translate(-50%, -50%));
                        @include position(absolute, 50%, 50%);
                        @include whs($hci);

                        @include brp($b7) {
                            @include whs(min(84vw, 645px));
                        }

                        .hotspot_item_trionda {
                            @include position(absolute);

                            .hotspot_trigger { @include hero_full_hotspot_trigger; }
                            .hotspot_panel { @include hero_full_hotspot_panel; }
                        }
                    } // .container_hotspots_trionda
                } // .trionda_image_space

                .trionda_content {
                    @include center-flex-column;
                    @include gap(30px);

                    .description {
                        @include t1((
                            size: clamp(szrem(16), 1.14vw, szrem(22)),
                            align: center
                        ));
                        @include wh(min(32.03vw, 615px));
                        @include bc($c0, $c1);
                        text-wrap-style: balance;

                        @include brp($b6) {
                            @include wh(90vw);
                        }
                    }
                } // .trionda_content
            } // .trionda_item
        } // .trionda_slider
    } // .container_trionda_slider

    .container_jersey_slider {
        @include hero_full_slider_container((
            padding-block-start: $pbs
        ));

        .jersey_slider {
            @include position;
            z-index: 2;

            .jersey_item {
                @include justify-items(center);
                @include align-items(center);
                @include grid;
                @include hero_full_slider_item_base;

                grid: {
                    gap: 50px;
                    template: {
                        areas: "i8" "h8";
                        rows: min(36.46vw, 700px) auto;
                    }
                }

                @include brp($b7) {
                    grid: {
                        gap: 40px;
                        template: {
                            areas: "i8" "h8";
                            rows: 84vw auto;
                        }
                    }
                }

                &.active {
                    @include transition(opacity $t5);
                    @include position;
                    opacity: 1;
                    z-index: 2;
                }

                .jersey_image {
                    @include wh(min(36.46vw, 700px), 100%);
                    @include position;

                    @include brp($b7) {
                        @include wh(84vw, 100%);
                    }

                    .img {
                        @include filter(drop-shadow($sha3_j));
                        @include whs(100%);
                        object-fit: contain;
                    }

                    .container_hotspots_jersey {
                        @include position(absolute);
                        @include whs(100%);

                        .hotspot_item_jersey {
                            @include position(absolute);

                            .hotspot_trigger { @include hero_full_hotspot_trigger; }
                            .hotspot_panel { @include hero_full_hotspot_panel; }
                        }
                    } // .container_hotspots_jersey
                } // .jersey_image

                .head {
                    @include center-flex-column;

                    .title { @include hero_full_head_title; }
                    .eyebrow { @include hero_full_head_eyebrow; }

                    .price {
                        @include hero_full_head_price((
                            padding: 10px 0 15px
                        ));
                    }
                } // .head
            } // .jersey_item
        } // .jersey_slider
    } // .container_jersey_slider

    .container_away_slider,
    .container_third_jersey_slider {
        @include hero_full_slider_container((
            padding-block-start: $pbs
        ));

        @include brp($b7) {
            padding-inline: 25px;
        }

        .country_third {
            @include t1((
                size: clamp(szrem(80), 11.97vw, szrem(230)),
                weight: 400,
                font: $f4,
                align: center
            ));
            @include wh(100%, min(6.25vw, 120px));

            @include brp($b7) {
                height: auto;
            }
        }

        .away_slider,
        .third_jersey_slider {
            @include position;
            z-index: 2;

            .away_item {
                @include hero_full_slider_item_base;
                padding-inline: 10px;

                .away_image {
                    @include position;
                    @include wh(min(33.85vw, 650px), 100%);

                    @include brp($b7) {
                        @include wh(85vw, 100%);
                    }

                    .img {
                        @include filter(drop-shadow($sha3_j));
                        @include whs(100%);
                        object-fit: contain;
                    }
                } // .away_image

                .head {
                    @include center-flex-column;

                    .title { @include hero_full_head_title; }
                    .eyebrow { @include hero_full_head_eyebrow; }

                    .price {
                        @include hero_full_head_price((
                            padding: 10px 0 15px
                        ));
                    }
                } // .head

                .away_product_cta {
                    @include position(relative, -10px);

                    @include brp($b7) {
                        @include position;
                    }
                }

                .inspiration {
                    @include flex-direction(column);
                    @include gap(20px);
                    @include flex;

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

                    .title_inspiration {
                        @include t1((
                            size: clamp(szrem(22), 1.66vw, szrem(32)),
                            align: left,
                            weight: 700,
                            transform: uppercase
                        ));
                        @include bc($c0, $c1);

                        @include brp($b7) {
                            font-size: clamp(szrem(22), 4.68vw, szrem(36));
                        }
                    }

                    .description_inspiration {
                        @include t1((
                            size: clamp(szrem(14), 1.25vw, szrem(24)),
                            align: left
                        ));
                        @include wh(min(23.44vw, 450px));
                        @include bc($c0, $c1);
                        text-wrap-style: pretty;

                        @include brp($b7) {
                            @include wh(100%);
                            font-size: clamp(szrem(14), 3.13vw, szrem(24));
                        }
                    }
                } // .inspiration

                .container_slider_away {
                    @include position;
                    @include wh(min(24.48vw, 470px), auto);
                    aspect-ratio: calc(450 / 200);
                    overflow: hidden;

                    @include brp($b7) {
                        @include wh(20.83vw, auto);
                        aspect-ratio: calc(75 / 100);
                    }

                    &.empty { display: none; }

                    .away_inspiration_slide {
                        @include transition(opacity $t5 linear);
                        @include position(absolute);
                        @include whs(100%);
                        opacity: 0;
                        z-index: 1;

                        &.active {
                            opacity: 1;
                            z-index: 2;
                        }

                        .img {
                            @include border-radius(10px);
                            @include whs(100%);
                            object-fit: cover;
                        }
                    }
                } // .container_slider_away
            }
        }
    } // .container_away_slider

    .container_away_slider {
        .away_slider {
            .away_item {
                .head {
                    .logo_trefoil_hero {
                        @include normalize-svg((
                            width: nth($l23x, 1),
                            height: nth($l23y, 1)
                        ));
                        box-sizing: content-box;
                        padding-block-end: 20px;
                    }
                }
            }
        }
    }

    .container_glory_slider {
        @include hero_full_slider_container((
            padding-block-start: $pbs
        ));

        .title_glory {
            @include center-flex-column;
            @include t1((
                size: clamp(szrem(60), 5.21vw, szrem(100)),
                transform: uppercase,
                font: $f3
            ));
            @include bc($c0, $c1);
            @include wh(100%, 100px);
        }

        .glory_indicators {
            @include position(absolute, 83px, 50%, bottom);
            @include transform(translate(-50%, 0));
            z-index: 9;

            ul {
                @include gap(clamp(5px, 0.52vw, 10px));
                @include flex;

                li {
                    @include transition(opacity $t5);
                    @include border-radius(50%);
                    @include whs(clamp(10px, 1.04vw, 20px));
                    @include ht;
                    @include bc($c1, $c0);
                    opacity: 0.25;
                    cursor: pointer;

                    &.active {
                        opacity: 1;
                    }
                }
            }
        }

        .glory_controls {
            @include transform(translateX(-50%));
            @include position(absolute, 138px, 50%, bottom);
            @include flex-direction(row-reverse);
            @include justify-content(space-between);
            @include wh(800px);
            @include flex;
            z-index: 8;

            @include brp($b6) {
                @include wh(95%);
            }

            .next_glory {
                @include btn_controls;
                border: $bd2;

                @include brp($b4){
                    scale: 0.8;
                }
                @include brp($b7){
                    scale: 1;
                }
            }

            .prev_glory {
                @include btn_controls;
                border: $bd2;

                @include brp($b4){
                    scale: 0.8;
                }
                @include brp($b7){
                    scale: 1;
                }
            }
        }

        .container_soccer_cleats {
            @include position(absolute, $pbs4);
            @include wh(100%, $hci);
            @include user-select;
            z-index: 1;

            @include brp($b7) {
                @include wh(100%, 84vw);
            }

            .item_ball {
                @include transition(all $t5);
                @include position(absolute);
                @include whs($hci);
                object-position: 50% 50%;
                opacity: 0;
                display: block;
                z-index: 1;

                &.active {
                    @include transform(translate(-50%, -50%));
                    z-index: 4;
                    opacity: 1;
                    left: 50%;
                    top: 50%;

                    @include brp($b7) {
                        @include whs(min(84vw, 645px));
                    }
                }

                &.next_1 {
                    @include transform(translate(-50%, -50%));
                    @include filter(blur(20px));
                    @include whs($hci2);
                    z-index: 3;
                    opacity: 0.8;
                    left: 18%;
                    top: 50%;

                    @include brp($b7) {
                        @include filter(blur(5px));
                        @include whs(40vw);
                        left: -13%;
                    }
                }

                &.next_2 {
                    @include transform(translate(-50%, -50%));
                    @include filter(blur(20px));
                    @include whs($hci3);
                    z-index: 2;
                    opacity: 0.5;
                    left: 1%;
                    top: 50%;

                    @include brp($b7) {
                        opacity: 0;
                    }
                }

                &.prev_1 {
                    @include transform(translate(-50%, -50%));
                    @include filter(blur(20px));
                    @include whs($hci2);
                    z-index: 3;
                    opacity: 0.8;
                    left: 82%;
                    top: 50%;

                    @include brp($b7) {
                        @include filter(blur(5px));
                        @include whs(40vw);
                        left: 113%;
                    }
                }

                &.prev_2 {
                    @include transform(translate(-50%, -50%));
                    @include filter(blur(20px));
                    @include whs($hci3);
                    z-index: 2;
                    opacity: 0.5;
                    left: 100%;
                    top: 50%;

                    @include brp($b7) {
                        opacity: 0;
                    }
                }

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

        .glory_slider {
            @include position;
            z-index: 2;

            .glory_item {
                @include hero_full_slider_item_base;

                .glory_image_space {
                    @include wh(100%, $hci);

                    @include brp($b7) {
                        @include wh(100%, 84vw);
                    }

                    .container_hotspots_glory {
                        @include transform(translateX(-50%));
                        @include position(absolute, 0, 50%);
                        @include whs($hci);

                        @include brp($b7) {
                            @include whs(min(84vw, 645px));
                        }

                        .hotspot_item_glory {
                            @include position(absolute);

                            .hotspot_trigger {
                                @include hero_full_hotspot_trigger((
                                    bg: rgba($c1, 0.2)
                                ));
                            }
                            .hotspot_panel { @include hero_full_hotspot_panel; }
                        }
                    } // .container_hotspots_glory
                } // .glory_image_space

                .head {
                    @include center-flex-column;

                    .img_logo_glory {
                        padding-block-end: 20px;

                        .img {
                            @include filter(invert(1));
                            @include whs(100%);
                            object-fit: contain;
                        }
                    }

                    .title { @include hero_full_head_title; }

                    .price {
                        @include hero_full_head_price((
                            padding: 10px 0 15px
                        ));
                    }
                } // .head

                .glory_content {
                    @include center-flex-column;
                    @include gap(30px);
                } // .glory_content
            }
        }
    } // .container_glory_slider
}