@import "instance";

.showcase {
    @include wh(100vw);
    background-image: $gra1;
    padding-block-start: min(7.81vw, 150px);
    padding-block-end: min(5.21vw, 100px);

    .container_showcase {
        @include wh(min(100vw, 1920px));
        margin-inline: auto;
        padding-inline: min(5.21vw, 100px);

        .visor_showcase {
            .bg_visor_showcase {
                @include position;
                @include flex-direction(column);
                @include gap(150px);
                @include flex;
                z-index: 1;

                @include brp($b6) {
                    @include gap(min(15.31vw, 150px));
                }

                $time: 4s;
                .trionda_showcase {
                    @include normalize-svg((
                        width: nth($l3, 2),
                        aspect-ratio: calc(637 / 150)
                    ));
                    opacity: 0;

                    @include brp($b6) {
                        width: nth($l3, 4);
                    }

                    &:nth-child(1) { @include animation(text1 $time linear infinite); }
                    &:nth-child(2) { @include animation(text2 $time linear infinite); }
                    &:nth-child(3) { @include animation(text3 $time linear infinite); }
                }

                .pos2 {
                    @include transform(translate(-50%, -50%));
                    @include position(absolute, 50%, 50%);
                    @include center-flex-column;
                    @include whs(50px);
                    @include bc($c1, $c2);
                    visibility: hidden;
                    font-size: 25px;
                    z-index: 2;
                }

                .img_visor_showcase {
                    @include container_visor;
                    display: none;
                    z-index: 3;

                    &.mobile {
                        display: block;
                    }
                }

                .container_ball {
                    @include container_visor;
                    display: block;
                    z-index: 4;

                    .ct1 { @include position(absolute, 50%, 95%); }
                    .ct2 { @include position(absolute, 15%, 7%); }
                    .ct3 { @include position(absolute, 77%, 5%); }
                }
            } // bg_visor_showcase
        } // visor_showcase

        .content_showcase {
            @include center-flex-column;
            @include gap(clamp(15px, 1.56vw, 30px));

            .group_showcase_title {
                @include center-flex-column;

                .subtitle_showcase {
                    @include bc($c0, $c1);
                    @include t1((
                        transform: uppercase,
                        size: min(1.66vw, szrem(32)),
                        weight: 700
                    ));

                    @include brp($b6) {
                        font-size: clamp(szrem(28), 3.26vw, szrem(32));
                    }
                }

                .title_showcase {
                    @include bc($c0, $c1);
                    @include t1((
                        transform: uppercase,
                        size: min(2.60vw, szrem(50)),
                        weight: 700
                    ));

                    @include brp($b6) {
                        font-size: clamp(szrem(32), 5.10vw, szrem(50));
                    }
                }
            }

            .product_details {
                @include center-flex-column;
                @include gap(clamp(15px, 1.82vw, 35px));

                .product_detail {
                    @include center-flex-column;
                    @include gap(10px);

                    .heading_detail {
                        @include t1((
                            transform: uppercase,
                            weight: 400
                        ));
                    }

                    .list_detail {
                        @include center-flex-row;
                        @include gap(clamp(5px, 0.52vw, 10px));
                        flex-wrap: wrap;

                        .tag {
                            @include t1((
                                size: szrem(16),
                                transform: uppercase,
                                weight: 400
                            ));
                            @include flex-direction(row);
                            @include flex;
                            @include gap(10px);
                            @include border-radius(30px);
                            @include bc($c0, $c1);
                            padding: 10px 15px;
                            border: $bd1;
                        }
                    }
                }
            }

            .container_slider {
                @include ss_container(
                $ss_w: 500px,
                $ss_h: 400px
                );
                margin-bottom: min(1.30vw, 25px);

                &.fade { @include fade; }

                .indicators {
                    @include position(absolute, 10px, 50%, bottom);
                    @include transform(translate(-50%, 0));
                    z-index: 4;

                    @include brp($b6) {
                        bottom: 0;
                    }

                    ul {
                        display: flex;

                        li {
                            @include bc(rgba($c1, 0.25), $c0);
                            @include border-radius(50%);
                            @include whs(15px);
                            @include ht;
                            margin-right: 10px;
                            cursor: pointer;
                            padding: 0;

                            &:last-child { margin-right: 0; }
                            &.active { @include bc($c1, $c0); }
                        }
                    }
                }
            }
        }
    }
}