/* ==========================================================
   Happy Sad Mi
   animations.css
   Animation utilities and motion effects
========================================================== */

/* ===========================
   KEYFRAMES
=========================== */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }

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

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

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

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

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

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

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

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes rotate360 {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes shimmer {
    0% {
        background-position: -300px 0;
    }

    100% {
        background-position: 300px 0;
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }

}
/* ===========================
   HERO
=========================== */

/* The float animation lives on the wrapper (see style.css) so the image
   keeps its own hover transform -- an animated transform cannot be
   overridden by a :hover rule. */

.badge {

    animation:
        fadeDown 1s ease;

}

.hero h1 {

    animation:
        fadeUp 1s ease;

}

.hero p {

    animation:
        fadeUp 1.2s ease;

}

.hero-buttons {

    animation:
        fadeUp 1.4s ease;

}

/* ===========================
   BUTTONS
=========================== */

.btn {

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

}

.btn:hover {

    transform: translateY(-4px);

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

}

/* ===========================
   CARDS
=========================== */

.service-card,
.project-card,
.team-card,
.info-card,
.tech-card,
.process-card,
.testimonial-card,
.stats-card {

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

}

.service-card:hover,
.project-card:hover,
.team-card:hover,
.info-card:hover,
.tech-card:hover,
.process-card:hover,
.testimonial-card:hover,
.stats-card:hover {

    transform: translateY(-10px);

    box-shadow:
        0 25px 50px rgba(0,0,0,.12);

}

/* ===========================
   ICONS
=========================== */

.service-icon i,
.tech-card i {

    transition:
        transform .3s ease,
        color .3s ease;

}

.service-card:hover .service-icon i {

    transform: scale(1.2);

}



/* ===========================
   PORTFOLIO
=========================== */

.project-card {

    overflow: hidden;

}

.project-card img {

    transition:
        transform .5s ease;

}

.project-card:hover img {

    transform: scale(1.08);

}

/* ===========================
   NAVIGATION
=========================== */

.nav-links a {

    position: relative;

}

.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: var(--secondary);

    transition: width .3s ease;

}

.nav-links a:hover::after {

    width: 100%;

}

/* ===========================
   BACK TO TOP
=========================== */

.back-to-top {

    position: fixed;

    right: 30px;
    bottom: 30px;

    width: 50px;
    height: 50px;

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--primary);

    color: white;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transition: all .35s ease;

    z-index: 999;

}

.back-to-top.show {

    opacity: 1;
    visibility: visible;

}

.back-to-top:hover {

    transform: translateY(-6px);

    background: var(--secondary);

}

/* ===========================
   STAT COUNTERS
=========================== */

.stat-card h2,
.stats-card h2 {

    animation:
        pulse 2s infinite;

}

/* ===========================
   CONTACT FORM
=========================== */

.contact-form input,
.contact-form textarea {

    transition:
        border-color .3s ease,
        box-shadow .3s ease;

}

.contact-form input:focus,
.contact-form textarea:focus {

    outline: none;

    border-color: var(--secondary);

    box-shadow:
        0 0 0 4px rgba(59,130,246,.15);

}

/* ===========================
   ACCESSIBILITY
=========================== */

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

    *,
    *::before,
    *::after {

        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;

    }

}