@use "sass:math";
@import "instance";

@import "effects/effects";
@include floatImg((
    name: floatBall
));

.main_footer {
    @include position;
    @include wh(100vw);
    overflow: hidden;
    background-image: $gra4;
    padding-block-start: 50px;
    z-index: 1;

    .container_decoration_footer {
        @include transform(translateX(-50%));
        @include position(absolute, 0, 50%);
        @include wh(min(100vw, 1920px), -webkit-fill-available);
        height: fill-available;
        z-index: 0;

        @for $i from 1 through length($l14) {
            $side: if($i <= math.div(length($l14), 2), left, right);
            $delay: 1s + ($i - 1);

            .decoration_#{$i} {
                @include animation(floatBall 4s ease-in-out infinite alternate $delay);
                @include whs(nth($l14, $i));
                @include position(
                    absolute,
                    nth($l15y, $i), nth($l15x, $i),
                    bottom, $side
                );

                @include brp($b6) {
                    @include whs(nth($l14_1, $i));
                    bottom: nth($l15y_1, $i);
                    #{$side}: nth($l15x_1, $i);

                    @if ($i == 3 or $i == 4) {
                        display: none;
                    }
                }

                @include brp($b9) {
                    @if ($i == 1) {
                        bottom: 69px;
                    }
                }
            }
        }
    }

    .container_main_footer {
        @include position;
        @include center-flex-column;
        @include gap(50px);
        @include wh(min(100vw, 1920px));
        margin-inline: auto;
        z-index: 2;

        .invitation {
            @include bc($c0, $c1);
            @include t1((
                font: $f1,
                size: szrem(24),
                align: center
            ));

            @include brp(800) {
                @include wh(300px);
                font-size: szrem(18);
            }
        }

        .logo_adidas_footer {
            @include normalize-svg((
                width: nth($l13x, 1),
                height: nth($l13y, 1),
                y: 15px
            ));

            @include brp($b6) {
                @include wh(
                    nth($l13x, 2),
                    nth($l13y, 2)
                );
            }
        }
    }
}