/*
|--------------------------------------------------------------------------
| Diagonal Sections
|--------------------------------------------------------------------------
| Padrão definitivo:
| - Mesmo ângulo em cima e embaixo.
| - A seção de baixo encaixa por baixo da anterior.
| - Sem pseudo-elements rotacionados.
| - Todas as seções com .igor-diagonal seguem o mesmo corte.
|--------------------------------------------------------------------------
*/

.igor-diagonal {
    position: relative;
    isolation: isolate;
    overflow: clip;
    width: 100%;

    /*
    | Faz a seção encaixar por baixo da anterior.
    */
    margin-top: calc(var(--igor-diagonal-size) * -1);

    /*
    | Compensa o corte para o conteúdo não colar nas diagonais.
    */
    padding-top: calc(var(--igor-section-padding) + var(--igor-diagonal-size));
    padding-bottom: calc(var(--igor-section-padding) + var(--igor-diagonal-size));

    /*
    | Mesmo ângulo em cima e embaixo.
    */
    -webkit-clip-path: polygon(
        0 var(--igor-diagonal-size),
        100% 0,
        100% calc(100% - var(--igor-diagonal-size)),
        0 100%
    );
    clip-path: polygon(
        0 var(--igor-diagonal-size),
        100% 0,
        100% calc(100% - var(--igor-diagonal-size)),
        0 100%
    );
}

/*
|--------------------------------------------------------------------------
| Remove modelo antigo com pseudo-elements
|--------------------------------------------------------------------------
*/

.igor-diagonal::before,
.igor-diagonal::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    background: none !important;
}

/*
|--------------------------------------------------------------------------
| Conteúdo acima do fundo
|--------------------------------------------------------------------------
*/

.igor-diagonal > * {
    position: relative;
    z-index: 5;
}

/*
|--------------------------------------------------------------------------
| Hero com corte inferior no mesmo padrão
|--------------------------------------------------------------------------
*/

.igor-hero {
    overflow: clip;

    -webkit-clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--igor-diagonal-size)),
        0 100%
    );
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--igor-diagonal-size)),
        0 100%
    );
}

.igor-hero::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    background: none !important;
}

/*
|--------------------------------------------------------------------------
| Primeira seção depois do hero
|--------------------------------------------------------------------------
*/

.igor-hero + .igor-diagonal {
    margin-top: calc(var(--igor-diagonal-size) * -1);
}

/*
|--------------------------------------------------------------------------
| Modificadores opcionais
|--------------------------------------------------------------------------
*/

.igor-diagonal--top {
    -webkit-clip-path: polygon(
        0 var(--igor-diagonal-size),
        100% 0,
        100% 100%,
        0 100%
    );
    clip-path: polygon(
        0 var(--igor-diagonal-size),
        100% 0,
        100% 100%,
        0 100%
    );
}

.igor-diagonal--bottom {
    -webkit-clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--igor-diagonal-size)),
        0 100%
    );
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--igor-diagonal-size)),
        0 100%
    );
}

.igor-diagonal--none {
    margin-top: 0;
    padding-top: var(--igor-section-padding);
    padding-bottom: var(--igor-section-padding);
    -webkit-clip-path: none;
    clip-path: none;
}

.igor-diagonal--none + .igor-diagonal {
    margin-top: calc(var(--igor-diagonal-size) * -1);
}

/*
|--------------------------------------------------------------------------
| Correção para seções que possuem overflow próprio
|--------------------------------------------------------------------------
*/

.igor-about,
.igor-trajectory,
.igor-achievements,
.igor-gallery,
.igor-philosophy,
.igor-sponsor-cta,
.igor-sponsors,
.igor-footer-contact {
    overflow: clip;
}

/*
|--------------------------------------------------------------------------
| Garante diagonal especificamente na seção Conquistas
|--------------------------------------------------------------------------
*/

.igor-achievements.igor-diagonal {
    margin-top: calc(var(--igor-diagonal-size) * -1);
    padding-top: calc(var(--igor-section-padding) + var(--igor-diagonal-size));
    padding-bottom: calc(var(--igor-section-padding) + var(--igor-diagonal-size));

    -webkit-clip-path: polygon(
        0 var(--igor-diagonal-size),
        100% 0,
        100% calc(100% - var(--igor-diagonal-size)),
        0 100%
    );
    clip-path: polygon(
        0 var(--igor-diagonal-size),
        100% 0,
        100% calc(100% - var(--igor-diagonal-size)),
        0 100%
    );
}

/*
|--------------------------------------------------------------------------
| Cores base por seção
|--------------------------------------------------------------------------
*/

.igor-section--black {
    background: #000000;
}

.igor-section--dark {
    background: #050505;
}

.igor-section--soft {
    background: #080808;
}

.igor-section--deep {
    background: #0c0c0c;
}

.igor-section--red-soft {
    background:
        radial-gradient(circle at top right, rgba(196, 27, 27, 0.16), transparent 38%),
        #050505;
}

.igor-section--red-deep {
    background:
        radial-gradient(circle at bottom left, rgba(163, 23, 23, 0.18), transparent 42%),
        linear-gradient(135deg, #050505 0%, #100606 100%);
}

/*
|--------------------------------------------------------------------------
| Fallback para navegadores antigos
|--------------------------------------------------------------------------
*/

@supports not (overflow: clip) {
    .igor-diagonal,
    .igor-hero,
    .igor-about,
    .igor-trajectory,
    .igor-achievements,
    .igor-gallery,
    .igor-philosophy,
    .igor-sponsor-cta,
    .igor-sponsors,
    .igor-footer-contact {
        overflow: hidden;
    }
}

/*
|--------------------------------------------------------------------------
| Responsivo
|--------------------------------------------------------------------------
*/

@media (max-width: 991px) {
    .igor-diagonal {
        padding-top: calc(var(--igor-section-padding-mobile) + var(--igor-diagonal-size));
        padding-bottom: calc(var(--igor-section-padding-mobile) + var(--igor-diagonal-size));
    }

    .igor-achievements.igor-diagonal {
        padding-top: calc(var(--igor-section-padding-mobile) + var(--igor-diagonal-size));
        padding-bottom: calc(var(--igor-section-padding-mobile) + var(--igor-diagonal-size));
    }

    .igor-diagonal--none {
        padding-top: var(--igor-section-padding-mobile);
        padding-bottom: var(--igor-section-padding-mobile);
    }
}

@media (max-width: 767px) {
    .igor-diagonal,
    .igor-achievements.igor-diagonal {
        margin-top: calc(var(--igor-diagonal-size) * -1);
        padding-top: calc(var(--igor-section-padding-mobile) + var(--igor-diagonal-size));
        padding-bottom: calc(var(--igor-section-padding-mobile) + var(--igor-diagonal-size));
    }

    .igor-hero + .igor-diagonal {
        margin-top: calc(var(--igor-diagonal-size) * -1);
    }
}