/* ==========================================
   ANIMATIONS.CSS
   Reusable Animations & Transitions
========================================== */


/* ==========================================
   Global Transitions
========================================== */

a,
button,
input,
select,
img,
.politician-card,
.party-badge,
.stat-card,
.view-profile,
#backToTop {
    transition: all 0.3s ease;
}


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

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* ==========================================
   Slide Up
========================================== */

@keyframes slideUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ==========================================
   Slide Down
========================================== */

@keyframes slideDown {

    from {

        opacity: 0;

        transform: translateY(-25px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ==========================================
   Scale In
========================================== */

@keyframes scaleIn {

    from {

        opacity: 0;

        transform: scale(.95);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}


/* ==========================================
   Floating Animation
========================================== */

@keyframes float {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

}


/* ==========================================
   Pulse
========================================== */

@keyframes pulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.05);

    }

    100% {

        transform: scale(1);

    }

}


/* ==========================================
   Hero Animation
========================================== */

.hero-content {

    animation: slideUp .8s ease;
}


/* ==========================================
   Navbar Animation
========================================== */

.header {

    animation: slideDown .5s ease;
}


/* ==========================================
   Card Entry
========================================== */

.politician-card {

    animation: fadeIn .7s ease;
}


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

.politician-card:hover {

    transform: translateY(-10px);

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

}


/* ==========================================
   Image Zoom
========================================== */

.card-image {

    overflow: hidden;
}

.card-image img:hover {

    transform: scale(1.08);

}


/* ==========================================
   Party Badge
========================================== */

.party-badge:hover {

    transform: scale(1.05);

}


/* ==========================================
   View Profile
========================================== */

.view-profile:hover {

    transform: translateX(6px);

}


/* ==========================================
   Statistics Card
========================================== */

.stat-card:hover {

    transform: translateY(-6px);

}


/* ==========================================
   Search Input
========================================== */

.search-section input:focus {

    transform: scale(1.01);

}


/* ==========================================
   Buttons
========================================== */

button:hover {

    transform: translateY(-2px);

}

button:active {

    transform: scale(.97);

}


/* ==========================================
   Select Boxes
========================================== */

select:hover {

    transform: translateY(-2px);

}


/* ==========================================
   Links
========================================== */

.nav-links a {

    transition: color .3s ease;
}


/* ==========================================
   Back To Top
========================================== */

#backToTop:hover {

    transform: translateY(-5px);

}


/* ==========================================
   Smooth Appearance Utility
========================================== */

.fade-in {

    animation: fadeIn .6s ease forwards;

}

.slide-up {

    animation: slideUp .6s ease forwards;

}

.scale-in {

    animation: scaleIn .5s ease forwards;

}


/* ==========================================
   Accessibility
========================================== */

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

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

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;

    }

}