/* ==========================================================
   animations.css
========================================================== */

:root{

--animation-speed:.8s;
--animation-delay:.15s;

}

/* Initial state */

.reveal,
.fade-up,
.slide-left,
.slide-right,
.zoom-in{

opacity:0;

transition:
opacity var(--animation-speed) ease,
transform var(--animation-speed) ease;

will-change:transform,opacity;

}

/* Active state */

.reveal.active,
.fade-up.active{

opacity:1;

transform:translateY(0);

}

.slide-left.active{

opacity:1;

transform:translateX(0);

}

.slide-right.active{

opacity:1;

transform:translateX(0);

}

.zoom-in.active{

opacity:1;

transform:scale(1);

}

/* Hidden transforms */

.fade-up{

transform:translateY(45px);

}

.slide-left{

transform:translateX(-70px);

}

.slide-right{

transform:translateX(70px);

}

.zoom-in{

transform:scale(.90);

}

/* Hero */

.hero-content{

animation:heroFade 1.1s ease forwards;

}

.hero-image{

animation:heroZoom 12s ease-in-out infinite alternate;

}

@keyframes heroFade{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:none;

}

}

@keyframes heroZoom{

from{

transform:scale(1);

}

to{

transform:scale(1.06);

}

}

/* Buttons */

.btn-primary,
.btn-secondary{

transition:
transform .25s ease,
box-shadow .25s ease,
background .25s ease;

}

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

transform:translateY(-3px);

}

/* Cards */

.service-card,
.feature-card,
.why-card,
.quote-card,
.intro-card{

transition:
transform .35s ease,
box-shadow .35s ease;

}

.service-card:hover,
.feature-card:hover,
.why-card:hover,
.quote-card:hover,
.intro-card:hover{

transform:translateY(-8px);

}

/* FAQ */

.faq-answer{

max-height:0;

overflow:hidden;

padding-top:0;

padding-bottom:0;

transition:
max-height .35s ease,
padding .35s ease;

}

.faq-item.open .faq-answer{

max-height:500px;

padding:22px;

}

/* Scroll indicator */

.scroll-indicator{

width:24px;

height:42px;

border:2px solid currentColor;

border-radius:20px;

position:relative;

}

.scroll-indicator::after{

content:"";

position:absolute;

left:50%;

top:8px;

width:5px;

height:5px;

border-radius:50%;

background:currentColor;

transform:translateX(-50%);

animation:scrollMouse 1.8s infinite;

}

@keyframes scrollMouse{

0%{

opacity:1;

transform:translate(-50%,0);

}

100%{

opacity:0;

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

}

}