/* ==========================================
   CARBWEL AUTOPEÇAS
   ANIMATIONS.CSS
   Animações e efeitos visuais
========================================== */

/* ---------- Loader ---------- */

@keyframes pulse{

    0%{
        opacity:.3;
        transform:scale(.95);
        letter-spacing:4px;
    }

    50%{
        opacity:1;
        transform:scale(1.08);
        letter-spacing:7px;
    }

    100%{
        opacity:.3;
        transform:scale(.95);
        letter-spacing:4px;
    }

}

/* ---------- Scroll Mouse ---------- */

@keyframes scroll{

    0%{
        opacity:1;
        transform:translate(-50%,0);
    }

    100%{
        opacity:0;
        transform:translate(-50%,22px);
    }

}

/* ---------- Fade ---------- */

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(50px);
    }

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

}

@keyframes fadeLeft{

    from{
        opacity:0;
        transform:translateX(-60px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

@keyframes fadeRight{

    from{
        opacity:0;
        transform:translateX(60px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

/* ---------- Hero Background ---------- */

@keyframes heroZoom{

    0%{
        transform:scale(1);
    }

    100%{
        transform:scale(1.08);
    }

}

.hero::before{

    content:'';

    position:absolute;
    inset:0;

    background:inherit;

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

    z-index:0;

}

/* ---------- Gradient Glow ---------- */

@keyframes glow{

    0%{
        transform:rotate(0deg);
        opacity:.15;
    }

    50%{
        transform:rotate(180deg);
        opacity:.35;
    }

    100%{
        transform:rotate(360deg);
        opacity:.15;
    }

}

.card-glow{

    animation:glow 8s linear infinite;

}

/* ---------- Floating ---------- */

@keyframes floating{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }

}

.hero-buttons .btn-primary{

    animation:floating 5s ease-in-out infinite;

}

/* ---------- Shine ---------- */

@keyframes shine{

    0%{
        left:-120%;
    }

    100%{
        left:130%;
    }

}

.product-card::after{

    content:'';

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    transform:skewX(-25deg);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

}

.product-card:hover::after{

    animation:shine .8s ease;

}

/* ---------- Reveal Classes ---------- */

.reveal,
.reveal-left,
.reveal-right{

    opacity:0;

    transition:1s cubic-bezier(.22,.61,.36,1);

}

.reveal{

    transform:translateY(50px);

}

.reveal-left{

    transform:translateX(-70px);

}

.reveal-right{

    transform:translateX(70px);

}

.reveal.active,
.reveal-left.active,
.reveal-right.active{

    opacity:1;
    transform:none;

}

/* ---------- Header ---------- */

header{

    transition:
    background .35s,
    backdrop-filter .35s,
    box-shadow .35s;

}

/* ---------- Botões ---------- */

.btn-primary,
.btn-secondary,
.btn-nav,
.btn-white{

    position:relative;
    overflow:hidden;

}

.btn-primary::before,
.btn-nav::before,
.btn-white::before{

    content:'';

    position:absolute;

    width:0;
    height:100%;

    top:0;
    left:0;

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

    transition:.45s;

}

.btn-primary:hover::before,
.btn-nav:hover::before,
.btn-white:hover::before{

    width:100%;

}

/* ---------- Cards Hover ---------- */

.product-card,
.stat-card,
.brand{

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

}

/* ---------- Background Particles ---------- */

@keyframes particle{

    0%{

        transform:
        translateY(0)
        scale(1);

        opacity:.2;

    }

    100%{

        transform:
        translateY(-800px)
        scale(1.8);

        opacity:0;

    }

}

.particle{

    position:absolute;

    border-radius:50%;

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

    pointer-events:none;

    animation:particle linear infinite;

}

/* ---------- CTA Glow ---------- */

.cta-box::after{

    content:'';

    position:absolute;

    width:220px;
    height:220px;

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

    border-radius:50%;

    left:-70px;
    bottom:-70px;

    animation:floating 8s ease-in-out infinite;

}

/* ---------- Brand Pulse ---------- */

.brand:hover{

    box-shadow:
    0 0 25px rgba(200,16,46,.45);

}

/* ---------- Texto Hero ---------- */

.hero h1{

    animation:fadeLeft 1s ease forwards;

}

.hero p{

    opacity:0;

    animation:fadeUp .8s ease .35s forwards;

}

.hero-buttons{

    opacity:0;

    animation:fadeUp .8s ease .6s forwards;

}

/* ---------- Footer ---------- */

footer{

    position:relative;

}

footer::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.15),
        transparent
    );

}