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

/*==========================================================
  HOLDING ANIMATIONS
  Union Group
==========================================================*/


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

.holding-section{

    opacity:0;

    transform:translateY(80px);

    animation:sectionReveal 1.2s ease forwards;

}

@keyframes sectionReveal{

    from{

        opacity:0;
        transform:translateY(80px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}


/*==========================================================
  LOGO
==========================================================*/

.logo-box{

    animation:none;

}

@keyframes logoAppear{

    from{

        opacity:0;

        transform:

            scale(.65)
            rotate(-10deg);

    }

    to{

        opacity:1;

        transform:

            scale(1)
            rotate(0);

    }

}

@keyframes logoPulse{

    0%{

        transform:scale(1);

        box-shadow:

            0 0 20px rgba(176,141,87,.10);

    }

    50%{

        transform:scale(1.045);

        box-shadow:

            0 0 60px rgba(199,168,120,.35),

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

    }

    100%{

        transform:scale(1);

        box-shadow:

            0 0 20px rgba(176,141,87,.10);

    }

}


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

.logo-box::before{

    animation:haloRotate 18s linear infinite;

}

@keyframes haloRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/*==========================================================
  LINHAS DESENHANDO
==========================================================*/

.tree-main{

    transform-origin:top;

    animation:drawVertical .8s ease forwards;

}

.tree-horizontal{

    transform-origin:left;

    animation:

        drawHorizontal 1.3s ease forwards;

}

.branch{

    transform-origin:top;

    animation:

        drawBranch .6s ease forwards;

}

@keyframes drawVertical{

    from{

        transform:

            translateX(-50%)
            scaleY(0);

    }

    to{

        transform:

            translateX(-50%)
            scaleY(1);

    }

}

@keyframes drawHorizontal{

    from{

        transform:scaleX(0);

    }

    to{

        transform:scaleX(1);

    }

}

@keyframes drawBranch{

    from{

        transform:

            translateX(-50%)
            scaleY(0);

    }

    to{

        transform:

            translateX(-50%)
            scaleY(1);

    }

}


/*==========================================================
  ENERGIA PERCORRENDO AS LINHAS
==========================================================*/

.tree-main::after,
.tree-horizontal::after,
.branch::after{

    content:"";

    position:absolute;

    background:#fff4cc;

    box-shadow:

        0 0 12px #fff,

        0 0 24px #c7a878,

        0 0 40px #c7a878;

}

.tree-main::after{

    width:8px;
    height:8px;

    border-radius:50%;

    left:50%;

    transform:translateX(-50%);

    animation:energyVertical 5s linear infinite;

}

.tree-horizontal::after{

    width:10px;
    height:10px;

    border-radius:50%;

    top:50%;

    transform:translateY(-50%);

    animation:energyHorizontal 5s linear infinite;

}

.branch::after{

    width:7px;
    height:7px;

    border-radius:50%;

    left:50%;

    transform:translateX(-50%);

    animation:energyBranch 5s linear infinite;

}

@keyframes energyVertical{

    from{

        top:0;

    }

    to{

        top:100%;

    }

}

@keyframes energyHorizontal{

    from{

        left:0;

    }

    to{

        left:100%;

    }

}

@keyframes energyBranch{

    from{

        top:0;

    }

    to{

        top:100%;

    }

}


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

.holding-card{

    opacity:0;

    transform:

        translateY(60px)
        scale(.96);

    animation:cardReveal .8s ease forwards;

}

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

    animation-delay:1.3s;

}

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

    animation-delay:1.55s;

}

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

    animation-delay:1.8s;

}

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

    animation-delay:2.05s;

}

@keyframes cardReveal{

    from{

        opacity:0;

        transform:

            translateY(60px)
            scale(.96);

    }

    to{

        opacity:1;

        transform:

            translateY(0)
            scale(1);

    }

}


/*==========================================================
  GLASS
==========================================================*/

.holding-card{

    backdrop-filter:blur(18px);

    transition:

        transform .45s,

        border-color .45s,

        box-shadow .45s;

}


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

.holding-card:hover .card-reflection::before{

    animation:metalReflection 1s ease;

}

@keyframes metalReflection{

    from{

        left:-160px;

    }

    to{

        left:150%;

    }

}


/*==========================================================
  ÍCONE
==========================================================*/

.card-icon{

    transition:

        transform .45s,

        box-shadow .45s;

}

.holding-card:hover .card-icon{

    transform:

        rotate(8deg)
        scale(1.12);

    box-shadow:

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

}


/*==========================================================
  HOVER ILUMINANDO O RAMO
==========================================================*/

.holding-card:hover .branch{

    background:#f2d89c;

    box-shadow:

        0 0 8px #c7a878,

        0 0 18px rgba(199,168,120,.6),

        0 0 40px rgba(199,168,120,.25);

}


/*==========================================================
  HOVER CARD
==========================================================*/

.holding-card:hover{

    transform:

        translateY(-14px);

    box-shadow:

        0 25px 60px rgba(0,0,0,.45),

        0 0 35px rgba(176,141,87,.20);

}


/*==========================================================
  GRID
==========================================================*/

.holding-grid{

    animation:gridMove 20s linear infinite;

}

@keyframes gridMove{

    from{

        background-position:0 0;

    }

    to{

        background-position:40px 40px;

    }

}


/*==========================================================
  PARTÍCULAS
==========================================================*/

.particle{

    animation:

        particleFloat linear infinite,

        particleBlink ease-in-out infinite;

}

@keyframes particleFloat{

    from{

        transform:

            translateY(50px);

    }

    to{

        transform:

            translateY(-1200px);

    }

}

@keyframes particleBlink{

    0%{

        opacity:.2;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.2;

    }

}


/*==========================================================
  TEXTO
==========================================================*/

.holding-title h2{

    animation:titleFade 1.2s ease;

}

.holding-description{

    animation:titleFade 1.5s ease;

}

@keyframes titleFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==========================================================
  BRILHO SUAVE DO FUNDO
==========================================================*/

.holding-glow{

    animation:

        glowPulse 8s ease-in-out infinite;

}

@keyframes glowPulse{

    0%{

        opacity:.4;

        transform:

            translateX(-50%)
            scale(1);

    }

    50%{

        opacity:.8;

        transform:

            translateX(-50%)
            scale(1.15);

    }

    100%{

        opacity:.4;

        transform:

            translateX(-50%)
            scale(1);

    }

}