/*==================================================
Animation
VoiText Portfolio Edition
Quiet Luxury Motion
==================================================*/

/*=========================================
Fade Up
=========================================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

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

}

.fade-up.is-visible{

    opacity:1;

    transform:translateY(0);

}

/*=========================================
Fade In
=========================================*/

.fade{

    opacity:0;

    transition:opacity .9s ease;

}

.fade.is-visible{

    opacity:1;

}

/*=========================================
Slide Left
=========================================*/

.slide-left{

    opacity:0;

    transform:translateX(-50px);

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

}

.slide-left.is-visible{

    opacity:1;

    transform:translateX(0);

}

/*=========================================
Slide Right
=========================================*/

.slide-right{

    opacity:0;

    transform:translateX(50px);

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

}

.slide-right.is-visible{

    opacity:1;

    transform:translateX(0);

}

/*=========================================
Hero Title Shine
=========================================*/

.hero__title-shine{

    position:relative;

    overflow:hidden;

}

.hero__title-shine::after{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.8),

        transparent

    );

    transform:skewX(-25deg);

    animation:titleShine 2.8s ease forwards;

}

@keyframes titleShine{

    0%{

        left:-150%;

    }

    100%{

        left:180%;

    }

}

/*=========================================
Hero Background Zoom
=========================================*/

.hero__background img{

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

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

/*=========================================
Button Hover
=========================================*/

.btn{

    transition:

        transform .3s ease,

        box-shadow .3s ease,

        background .3s ease,

        color .3s ease;

}

.btn:hover{

    transform:translateY(-3px);

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

}

/*=========================================
Card Hover
=========================================*/

.feature-card,

.voice-card,

.price-card{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.feature-card:hover,

.voice-card:hover,

.price-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,0,0,.30);

}

/*=========================================
Image Hover
=========================================*/

.about__image,

.company-image{

    overflow:hidden;

}

.about__image img,

.company-image img{

    transition:transform .8s ease;

}

.about__image:hover img,

.company-image:hover img{

    transform:scale(1.04);

}

/*=========================================
Navigation Underline
=========================================*/

.nav__list a{

    transition:color .3s ease;

}

.nav__list a:hover{

    color:var(--color-gold);

}

/*=========================================
FAQ
=========================================*/

.faq-answer{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:

        max-height .45s ease,

        opacity .3s ease,

        padding .3s ease;

}

.faq-item.active .faq-answer{

    max-height:300px;

    opacity:1;

    padding-bottom:24px;

}

/*=========================================
Reduce Motion
=========================================*/

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}