/* =====================================================
   SHARECAR V2 - animation.css
===================================================== */

/* Smooth scroll */
html{
    scroll-behavior:smooth;
}

/* Page fade */
body{
    animation:pageFade .8s ease;
}

@keyframes pageFade{
    from{opacity:0}
    to{opacity:1}
}

/* Hero */

.hero-content>*{
    opacity:0;
    transform:translateY(40px);
    animation:heroUp .8s ease forwards;
}

.hero-subtitle{animation-delay:.1s;}
.hero h1{animation-delay:.25s;}
.hero p{animation-delay:.4s;}
.hero-point{animation-delay:.55s;}
.hero-buttons{animation-delay:.7s;}

@keyframes heroUp{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Scroll indicator */

.scroll-indicator{
    animation:scrollMove 1.8s infinite;
}

@keyframes scrollMove{
    0%,100%{transform:translate(-50%,0)}
    50%{transform:translate(-50%,10px)}
}

/* Reveal */

.reveal{
    opacity:0;
    transform:translateY(60px);
    transition:1s cubic-bezier(.2,.7,.2,1);
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/* Scale */

.scale-up{
    opacity:0;
    transform:scale(.92);
    transition:1s;
}

.scale-up.active{
    opacity:1;
    transform:scale(1);
}

/* Cards */

.car-card,
.service-card,
.event-card,
.timeline-item{
    transition:
        transform .35s,
        box-shadow .35s,
        opacity .6s;
}

/* Buttons */

.btn{
    position:relative;
    overflow:hidden;
}

.btn::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.18);
    opacity:0;
    transition:.35s;
}

.btn:hover::after{
    opacity:1;
}

/* Header */

.header{
    transition:
        background .35s,
        padding .35s,
        box-shadow .35s;
}

.header.scrolled{
    padding:12px 0;
}

/* Hero image */

.hero-image{
    transform:scale(1.05);
}

.hero-image.active{
    animation:heroZoom 8s linear forwards;
}

@keyframes heroZoom{
    from{transform:scale(1.05)}
    to{transform:scale(1.15)}
}

/* FAQ */

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease,padding .35s ease;
}

.faq-item.open .faq-answer{
    max-height:300px;
}

/* Modal */

.car-modal.show{
    display:block;
    animation:fadeModal .25s ease;
}

@keyframes fadeModal{
    from{opacity:0}
    to{opacity:1}
}