/* ======================================================
   Architecture Website Framework
   Animations CSS
   Version 1.0
======================================================*/


/*==========================================
GLOBAL TRANSITIONS
==========================================*/

a,
button,
.btn,
.card,
.project,
.service-card,
img{

    transition:var(--transition);

}


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

.section-title,
.project,
.service-card,
.about-image,
.about-content,
.instagram-item,
.cta-box{

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s ease;

    will-change:opacity,transform;

}

.show{

    opacity:1;

    transform:translateY(0);

}


/*==========================================
IMAGE HOVER
==========================================*/

.project img,
.instagram-item img,
.about-image img{

    transition:transform .6s ease;

}

.project:hover img,
.instagram-item:hover img{

    transform:scale(1.05);

}


/*==========================================
BUTTON HOVER
==========================================*/

.btn:hover{

    transform:translateY(-4px);

}

.btn:active{

    transform:translateY(-1px);

}


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

.project:hover,
.service-card:hover,
.card:hover{

    transform:translateY(-10px);

}


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

.header{

    transition:
        height .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.header.scrolled{

    height:80px;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    box-shadow:0 10px 40px rgba(0,0,0,.08);

}


/*==========================================
ACTIVE NAVIGATION
==========================================*/

.nav-menu a.active{

    color:var(--secondary);

}

.nav-menu a.active::after{

    width:100%;

}


/*==========================================
BACK TO TOP
==========================================*/

.back-to-top{

    transition:
        opacity .35s ease,
        transform .35s ease;

}

.back-to-top:hover{

    transform:translateY(-5px);

}


/*==========================================
ACCESSIBILITY
==========================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}