/* ==========================================
   ANIMATIONS.CSS
   Ryder M Marketing
========================================== */

/* ---------- GLOBAL TRANSITIONS ---------- */

*{
    transition:
        background-color .3s ease,
        color .3s ease,
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

/* ---------- FADE IN ---------- */

.fade-in{

    opacity:0;

    animation:fadeIn 1s ease forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ---------- SLIDE UP ---------- */

.slide-up{

    opacity:0;

    transform:translateY(60px);

    animation:slideUp .8s ease forwards;

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ---------- SLIDE LEFT ---------- */

.slide-left{

    opacity:0;

    transform:translateX(-80px);

    animation:slideLeft .8s ease forwards;

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* ---------- SLIDE RIGHT ---------- */

.slide-right{

    opacity:0;

    transform:translateX(80px);

    animation:slideRight .8s ease forwards;

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* ---------- HERO TITLE ---------- */

.hero h1{

    animation:heroTitle 1.2s ease;

}

@keyframes heroTitle{

    from{

        opacity:0;

        transform:translateY(80px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ---------- HERO PARAGRAPH ---------- */

.hero p{

    animation:heroParagraph 1.8s ease;

}

@keyframes heroParagraph{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ---------- BUTTON POP ---------- */

.btn{

    animation:buttonPop 1.5s ease;

}

@keyframes buttonPop{

    0%{

        opacity:0;

        transform:scale(.6);

    }

    70%{

        transform:scale(1.05);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}


/* ---------- CARD FLOAT ---------- */

.card:hover,

.service-card:hover{

    transform:

        translateY(-12px)

        scale(1.02);

}

/* ---------- CARD SHINE ---------- */

.card,

.service-card{

    position:relative;

    overflow:hidden;

}

.card::before,

.service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:80%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.08),

            transparent

        );

    transform:skewX(-25deg);

}

.card:hover::before,

.service-card:hover::before{

    animation:shine 1.2s;

}

@keyframes shine{

    100%{

        left:180%;

    }

}

/* ---------- NAVIGATION LINK ---------- */

.nav-links a{

    position:relative;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#d4af37;

    transition:.3s;

}

.nav-links a:hover::after{

    width:100%;

}

/* ---------- LOGO ---------- */

.logo h2:hover{

    transform:scale(1.08);

    color:#f6d46b;

}

/* ---------- CLIENTS ---------- */

.client-grid span{

    transition:.3s;

}

.client-grid span:hover{

    color:#d4af37;

    transform:scale(1.1);

}

/* ---------- TIMELINE ---------- */

.step{

    transition:.35s;

}

.step:hover{

    transform:translateY(-10px);

}

/* ---------- CONTACT FORM ---------- */

input,

textarea{

    transition:.3s;

}

input:focus,

textarea:focus{

    outline:none;

    border-color:#d4af37;

    box-shadow:

        0 0 10px rgba(212,175,55,.2);

}

/* ---------- SEND BUTTON ---------- */

button{

    cursor:pointer;

    transition:.35s;

}

button:hover{

    transform:translateY(-4px);

}

/* ---------- SCROLL INDICATOR ---------- */

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(-10px);

    }

    60%{

        transform:translateY(-5px);

    }

}

.scroll-indicator{

    animation:bounce 2s infinite;

}

/* ---------- FLOATING EFFECT ---------- */

.float{

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

}

@keyframes floating{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* ---------- ROTATE ---------- */

.rotate:hover{

    transform:rotate(3deg);

}

/* ---------- PULSE ---------- */

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

/* ---------- LOADER ---------- */

.loader{

    width:60px;

    height:60px;

    border:6px solid #333;

    border-top:6px solid #d4af37;

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ---------- SCROLL REVEAL ---------- */

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* ---------- SMOOTH HOVER ---------- */

img:hover{

    transform:scale(1.03);

}