/* =============================================================================
   DAS ALMAS
   Site Oficial

   Arquivo:
   animations.css

   Caminho:
   assets/css/animations.css

   Versão:
   2.0.0

   Descrição:
   Todas as animações e transições do projeto.

   ============================================================================= */


/* =============================================================================
   FADE IN
   ========================================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/* =============================================================================
   FADE UP
   ========================================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* =============================================================================
   HERO
   ========================================================================== */

@keyframes fadeHero{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* =============================================================================
   INTRO
   ========================================================================== */

@keyframes introText{

    0%{

        opacity:0;

        transform:translateY(25px);

    }

    25%{

        opacity:1;

        transform:translateY(0);

    }

    75%{

        opacity:1;

        transform:translateY(0);

    }

    100%{

        opacity:0;

        transform:translateY(-25px);

    }

}


/* =============================================================================
   SCROLL INDICATOR
   ========================================================================== */

@keyframes scrollIndicator{

    0%{

        transform:translate(-50%,0);

        opacity:.25;

    }

    50%{

        transform:translate(-50%,10px);

        opacity:1;

    }

    100%{

        transform:translate(-50%,0);

        opacity:.25;

    }

}


/* =============================================================================
   FLOAT
   ========================================================================== */

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}


/* =============================================================================
   REVEAL
   ========================================================================== */

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.reveal.visible{

    opacity:1;

    transform:translateY(0);

}


/* =============================================================================
   HERO
   ========================================================================== */

.hero-content{

    animation:

        fadeHero

        2s

        ease;

}


/* =============================================================================
   SCROLL
   ========================================================================== */

.scroll-indicator{

    animation:

        scrollIndicator

        2.8s

        ease-in-out

        infinite;

}


/* =============================================================================
   BOTÕES
   ========================================================================== */

.button{

    transition:

        background .45s ease,

        color .45s ease,

        border-color .45s ease,

        transform .45s ease,

        box-shadow .45s ease;

}

.button:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-medium);

}


/* =============================================================================
   MENU
   ========================================================================== */

#summary{

    transition:

        right .70s cubic-bezier(.77,0,.18,1);

}


/* =============================================================================
   LINKS
   ========================================================================== */

.summary-list a{

    transition:

        padding-left .35s ease,

        background .35s ease;

}

.summary-list a:hover{

    padding-left:52px;

    background:rgba(0,0,0,.02);

}


/* =============================================================================
   IMAGENS
   ========================================================================== */

.gallery-piece img,

.editorial-photo img{

    transition:

        transform .9s ease,

        box-shadow .9s ease,

        filter .9s ease;

}

.gallery-piece:hover img,

.editorial-photo:hover img{

    transform:scale(1.015);

    box-shadow:var(--shadow-strong);

}


/* =============================================================================
   HEADER
   ========================================================================== */

#header{

    transition:

        background .45s ease,

        padding .45s ease,

        backdrop-filter .45s ease;

}


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

.logo{

    transition:

        letter-spacing .35s ease,

        opacity .35s ease;

}

.logo:hover{

    letter-spacing:.40em;

}


/* =============================================================================
   CAPÍTULOS
   ========================================================================== */

.pillar{

    transition:

        transform .45s ease,

        border-color .45s ease;

}

.pillar:hover{

    transform:translateX(8px);

}


/* =============================================================================
   DIVISÓRIA
   ========================================================================== */

.editorial-divider{

    transition:

        width .5s ease;

}

section:hover .editorial-divider{

    width:120px;

}