@import "instance";

.hero_ball {
    @include wh(100vw);

    .rotate_instruction {
        @include transition(opacity $t5);
        @include user-select;
        @include wh(max-content);
        @include bc($c0, $c4);
        @include gap(20px);
        @include flex;
        @include t1((
            size: szrem(24),
            transform: uppercase
        ));
        opacity: 1;
        margin-inline: auto;
        padding-block: 10px;

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

        &.hidden {
            @include transition(opacity $t5);
            opacity: 0;
        }
    }

    .bg_hero_ball {
        @include flex-direction(column);
        @include gap(4vh);
        @include user-select;
        @include flex;
        @include position;
        padding-block-start: 30px;
        padding-block-end: 60px;
        overflow: hidden;
        z-index: 1;

        @include brp($b6) {
            @include gap(3vh);
        }

        .marquee_1 {
            @include marquee;

            @include brp($b6) {
                @include marquee((
                    svg-width: nth($l3, 3),
                    gap: 20vw
                ));
            }

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

        .marquee_2 {
            @include marquee((
                anim: marquee_2,
                translate: true
            ));

            @include brp($b6) {
                @include marquee((
                    anim: marquee_2,
                    translate: true,
                    svg-width: nth($l3, 3),
                    gap: 20vw
                ));
            }

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

        .marquee_3 {
            @include marquee((
                gap: 33vw,
                svg: ".fifa_world_cup",
                svg-width: nth($l4, 1),
                svg-ratio: calc(352 / 30)
            ));

            @include brp($b6) {
                @include marquee((
                    gap: 40vw,
                    svg: ".fifa_world_cup",
                    svg-width: nth($l4, 2),
                    svg-ratio: calc(352 / 30)
                ));
            }

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

        .marquee_4 {
            @include marquee((
                anim: marquee_2,
                gap: 33vw,
                svg: ".fifa_world_cup",
                svg-width: nth($l4, 1),
                svg-ratio: calc(307 / 30),
                translate: true
            ));

            @include brp($b6) {
                @include marquee((
                    anim: marquee_2,
                    gap: 40vw,
                    svg: ".fifa_world_cup",
                    svg-width: nth($l4, 2),
                    svg-ratio: calc(352 / 30),
                    translate: true
                ));
            }

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

        .pos1 {
            @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;
        }
    }
}