/* ===========================================================
   EFFECTS
   Grătiești Logistics Hub
=========================================================== */

/* ==========================================
   Smooth Reveal
========================================== */

.reveal{

    opacity:0;

    transform:translateY(40px) scale(.985);

    transition:

        opacity .8s cubic-bezier(.22,.61,.36,1),

        transform .8s cubic-bezier(.22,.61,.36,1);

    will-change:transform,opacity;

}

.reveal.visible{

    opacity:1;

    transform:none;

}


/* ==========================================
   Delays
========================================== */

.delay-1{

    transition-delay:.08s;

}

.delay-2{

    transition-delay:.16s;

}

.delay-3{

    transition-delay:.24s;

}

.delay-4{

    transition-delay:.32s;

}

.delay-5{

    transition-delay:.40s;

}


/* ==========================================
   Images
========================================== */

.about-image,
.feature-image,
.why-image,
.location-map,
.masterplan img{

    overflow:hidden;

}

.about-image img,
.feature-image img,
.why-image img,
.masterplan img{

    transition:

        transform 1.2s ease,

        filter .6s ease;

}

.about-image:hover img,
.feature-image:hover img,
.why-image:hover img,
.masterplan img:hover{

    transform:scale(1.025);

}


/* ==========================================
   Cards
========================================== */

.card,
.stat,
.highlight-card,
.spec-item,
.location-card,
.interest-card{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.card:hover,
.stat:hover,
.highlight-card:hover,
.spec-item:hover,
.location-card:hover,
.interest-card:hover{

    transform:translateY(-8px);

}


/* ==========================================
   Hero
========================================== */

.hero img{

    animation:

        heroZoom 25s linear forwards;

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.06);

    }

}


/* ==========================================
   Header
========================================== */

header{

    transition:

        background .35s ease,

        backdrop-filter .35s ease,

        box-shadow .35s ease;

}

header.scrolled{

    background:rgba(8,16,31,.94);

    backdrop-filter:blur(18px);

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

}


/* ==========================================
   Buttons
========================================== */

.btn-primary,
.btn-secondary,
.btn-outline{

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        background .25s ease;

}

.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover{

    transform:translateY(-3px);

}

.btn-primary:active,
.btn-secondary:active,
.btn-outline:active{

    transform:scale(.98);

}