@charset "utf-8";
/* CSS Document */

/*==========================================================
  animations.css
  Organograma Premium - Union Group
==========================================================*/


/*==========================================================
  APARECIMENTO DA SEÇÃO
==========================================================*/

.group-org{

    animation:sectionFade 1.2s ease forwards;

}

@keyframes sectionFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==========================================================
  CÍRCULO CENTRAL
==========================================================*/

.center-circle{

    animation:

        centerScale 1.2s ease,

        pulse 5s ease-in-out infinite 1.2s;

}

@keyframes centerScale{

    0%{

        opacity:0;

        transform:scale(.6);

    }

    70%{

        transform:scale(1.08);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

        box-shadow:

        0 0 15px rgba(176,141,87,.08),

        0 0 30px rgba(176,141,87,.12);

    }

    50%{

        transform:scale(1.045);

        box-shadow:

        0 0 30px rgba(199,168,120,.25),

        0 0 70px rgba(199,168,120,.20);

    }

    100%{

        transform:scale(1);

        box-shadow:

        0 0 15px rgba(176,141,87,.08),

        0 0 30px rgba(176,141,87,.12);

    }

}


/*==========================================================
  HALO
==========================================================*/

.center-circle::before{

    animation:ringRotate 12s linear infinite;

}

@keyframes ringRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/*==========================================================
  DESENHO DAS LINHAS
==========================================================*/

.line-flow{

    animation:

        drawMain 1.8s ease forwards,

        mainEnergy 6s linear infinite 2s;

}

@keyframes drawMain{

    to{

        stroke-dashoffset:0;

    }

}


/*==========================================================
  ENERGIA NA LINHA PRINCIPAL
==========================================================*/

@keyframes mainEnergy{

    from{

        stroke-dasharray:40 1800;

        stroke-dashoffset:1800;

    }

    to{

        stroke-dasharray:40 1800;

        stroke-dashoffset:-1800;

    }

}


/*==========================================================
  RAMOS
==========================================================*/

.branch-flow{

    animation:

        drawBranch .8s ease forwards,

        branchEnergy 2.4s linear infinite;

}

@keyframes drawBranch{

    to{

        stroke-dashoffset:0;

    }

}

@keyframes branchEnergy{

    from{

        stroke-dasharray:18 180;

        stroke-dashoffset:180;

    }

    to{

        stroke-dasharray:18 180;

        stroke-dashoffset:-180;

    }

}


/* atraso individual */

.trust-flow{

    animation-delay:1.9s,2.3s;

}

.agro-flow{

    animation-delay:2.15s,2.55s;

}

.strategic-flow{

    animation-delay:2.4s,2.8s;

}

.capital-flow{

    animation-delay:2.65s,3.05s;

}


/*==========================================================
  ENTRADA DOS CARDS
==========================================================*/

.org-card{

    opacity:0;

    transform:

        translateY(45px)

        scale(.96);

    animation:

        cardReveal .8s forwards;

}

.org-card:nth-child(1){

    animation-delay:2.2s;

}

.org-card:nth-child(2){

    animation-delay:2.45s;

}

.org-card:nth-child(3){

    animation-delay:2.7s;

}

.org-card:nth-child(4){

    animation-delay:2.95s;

}

@keyframes cardReveal{

    from{

        opacity:0;

        transform:

            translateY(45px)

            scale(.96);

    }

    to{

        opacity:1;

        transform:

            translateY(0)

            scale(1);

    }

}


/*==========================================================
  HOVER DOS CARDS
==========================================================*/

.org-card{

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease;

}

.org-card:hover{

    transform:

        translateY(-14px)

        rotateX(5deg);

}


/*==========================================================
  REFLEXO METÁLICO
==========================================================*/

.card-glow{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.card-glow::before{

    content:"";

    position:absolute;

    width:90px;

    height:250%;

    top:-70%;

    left:-140px;

    transform:rotate(28deg);

    background:

        linear-gradient(

            transparent,

            rgba(255,255,255,.15),

            transparent

        );

}

.org-card:hover .card-glow::before{

    animation:shine 1.1s ease;

}

@keyframes shine{

    from{

        left:-160px;

    }

    to{

        left:140%;

    }

}


/*==========================================================
  ÍCONES
==========================================================*/

.card-icon{

    transition:

        transform .5s ease,

        box-shadow .5s ease;

}

.org-card:hover .card-icon{

    transform:

        rotate(8deg)

        scale(1.12);

}


/*==========================================================
  BRILHO DA LINHA ATIVA
==========================================================*/

.branch.active{

    animation:

        activeGlow .8s ease infinite alternate;

}

@keyframes activeGlow{

    from{

        filter:

            drop-shadow(0 0 5px rgba(199,168,120,.5));

    }

    to{

        filter:

            drop-shadow(0 0 15px rgba(199,168,120,.95))

            drop-shadow(0 0 35px rgba(176,141,87,.5));

    }

}


/*==========================================================
  PARALLAX SUAVE
==========================================================*/

.group-center{

    animation:centerFloat 8s ease-in-out infinite;

}

@keyframes centerFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}
/* Entrada compartilhada das páginas do site */
@keyframes ugPageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
    body > .page {
        animation: ugPageFadeIn 600ms ease-out;
    }
}