@import url(cons--cover.css);
@import url(anim--cover.css);
@import url("/grp/grp-card.css");
@import url("/grp/grp-section--header.css");

body#page--cover {
    /* Comportamento Específico do Header na Capa (Sticky)*/
    @media (min-width: 992px) {
        #mainheader {
            width: 80%;
            margin: auto;
            margin-top: calc(0px - var(--mainheader-height)/2);
            position: sticky;
            top: 0;
            border-width: var(--border-width);
            border-color: var(--border-color);
            animation: headerAnim; 
            animation-timeline: scroll(y);
            .logo {
                border-right: 1px solid transparent;
                animation: headerAnimLogo; 
                animation-timeline: scroll(y);
            }
            .action {
                opacity: 0;
                animation: headerAnimAction; 
                animation-timeline: scroll(y);
            }
        }
        .page--wrapper {
            width: 100%;
            display: grid;
            grid-template-columns: var(--mainheader-height) 1fr;
            #mainmenu {
                position: sticky;
                top: var(--mainheader-height);
                .menu {
                    position: absolute;
                    top: 0px;
                    left: calc(0px - var(--mainheader-height));
                    animation: menuAnim; 
                    animation-timeline: scroll(y);
                }
            }
        }
    }
    /* HEADER: HOME */
    #home {
        width: 100%;
        height: 95dvh;
        position: relative;
        isolation: isolate;
        overflow: hidden;
        background: var(--clr-black);
        > header {
            display: none;
        }
        .media {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;            
            pointer-events: none;
            z-index: -1;
            .media--wrapper {
                height: 100%;
                aspect-ratio: 16/9;
                iframe {
                    min-width: 100%;
                    height: auto;
                    aspect-ratio: 16/9;
                    object-fit: cover;
                }
            }
        }
        .slogan {
            width: 100%;
            height: calc(var(--slogan-font-size) * 1.2);
            display: grid;
            grid-template-columns: 1fr calc(var(--dot-size) * 2) auto 1fr;
            grid-template-areas: "we dot know how";
            position: absolute;
            bottom: 10dvh;
            > .word {
                display: inline-block;
                font-size: var(--slogan--font-size);
                color: var(--clr-white);
                &.word01 {
                    grid-area: we;
                    text-align: right;
                    opacity: 0;
                    transform: translateY(-20%);
                    animation-name: animSloganWord01;
                    animation-delay: var(--fx--slogan-time);
                    animation-duration: var(--fx--slogan-time);
                    animation-fill-mode: forwards;
                }
                &.word02 {
                    grid-area: know;
                    opacity: 0;
                    transform: scale(2);
                    animation-delay: calc(var(--fx--slogan-time) * 2);
                    animation-name: animSloganWord02;
                    animation-duration: var(--fx--slogan-time);
                    animation-fill-mode: forwards;
                }
                &.word03 {
                    grid-area: how;
                    height: calc(var(--slogan--font-size) * 1.2);
                    overflow: hidden;
                    .word-wrapper {
                        margin-top: calc(0px - 5rem * 1.2 * 5);
                        animation-name: animSloganWord03;
                        animation-delay: calc(var(--fx--slogan-time) * 3);
                        animation-duration: calc(var(--fx--slogan-time) * 5);
                        animation-fill-mode: forwards;
                        color: var(--clr-gray-500);
                        span {
                            display: block;
                        }
                    }
                }
            }        
            .dot {
                width: var(--dot-size);
                height: var(--dot-size);
                display: block;
                position: absolute;
                background: var(--clr-white);
                opacity: 0;
                &.dot01 {
                    border-radius: 50%;
                    bottom: calc(var(--slogan--font-size) * 0.5);
                    left: calc(50% - var(--slogan--font-size) * 1.35);
                    animation-name: animSloganDot01;
                    animation-delay: calc(var(--fx--slogan-time) * 7);
                    animation-duration: var(--fx--slogan-dot-time);
                    animation-iteration-count: infinite;
                }
                &.dot02 {
                    border-radius: 50%;
                    bottom: calc(var(--slogan--font-size) * 0.5);
                    left: calc(50% - var(--slogan--font-size) * 1.35);
                    animation-name: animSloganDot02;
                    animation-delay: calc(var(--fx--slogan-time) * 7);
                    animation-duration: var(--fx--slogan-dot-time);
                    animation-iteration-count: infinite;
                }
            }
        }
    }
    /* SECTION: ABOUT */
    #sobre {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "abstract abstract" "header content" "link content";
        column-gap: var(--section-offset);
        padding: var(--section-spacer) var(--section-offset);
        .abstract {
            grid-area: abstract;
            margin: 0 0 var(--section-spacer);
            span {
                display: block;
                margin: 0 auto;
                max-width: 80%;
                font-size: calc(var(--section-highlight--title-size) * 1.75);
                font-weight: var(--section-highlight--title-weight);
                text-align: center;
                text-wrap: balance;
            }
        }
        .content {
            grid-area: content;
            * {
                width: 90%;
                margin: 0 0 calc(var(--section-content--title-size) * 1.5);
                font-size: var(--section-content--title-size);
                font-weight: var(--section-content--title-weight);
                text-wrap: balance;
                line-height: 1.5;
                &:last-of-type {
                    margin: 0;
                }
            }
        }
        .grp-link--more {
            grid-area: link;
            justify-self: start;
            align-self: end;
        }
        @media (max-width:1024px) {
            grid-template-columns: 3fr 5fr;
        }
        @media (max-width: 680px) {
            grid-template-columns: 100%;
            grid-template-areas: "abstract" "header" "content" "link";
            header {
                margin: 0 0 var(--spacer);
            }
        }
    }
    #servicos {
        padding: var(--section-spacer) 0 0;
        > .wrapper {
            padding: 0 var(--section-offset);
            .grp-card {
                position: sticky;
                margin: 0 0 calc(var(--spacer) * 3);
                &:nth-of-type(1) {
                    top: calc(var(--mainheader-height) + var(--spacer));
                }
                &:nth-of-type(2) {
                    top: calc(var(--mainheader-height) + var(--spacer) + var(--card-header--calc));
                }
                &:nth-of-type(3) {
                    top: calc(var(--mainheader-height) + var(--spacer) + var(--card-header--calc) * 2);
                }
                &:nth-of-type(4) {
                    top: calc(var(--mainheader-height) + var(--spacer) + var(--card-header--calc) * 3);
                }
                &:nth-of-type(5) {
                    top: calc(var(--mainheader-height) + var(--spacer) + var(--card-header--calc) * 4);
                }
                &:nth-of-type(6) {
                    top: calc(var(--mainheader-height) + var(--spacer) + var(--card-header--calc) * 5);
                }
                &:nth-of-type(7) {
                    top: calc(var(--mainheader-height) + var(--spacer) + var(--card-header--calc) * 6);
                }
            }
        }
    }   

}