/* ============================================================
   GIFEC ANIMATIONS
   Clean, professional scroll & page-load animations.
   Uses CSS only for performance — no layout shifts, no jank.
   Import on every page AFTER all other CSS:
   <link rel="stylesheet" href="animations.css">
   ============================================================ */

/* ── RESPECT USER PREFERENCES ───────────────────────────────
   If the user has "reduce motion" turned on in their OS
   (accessibility setting), all animations are disabled.      */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   PAGE LOAD ANIMATIONS
   These run once when the page first opens.
   Applied directly to elements, not via JS.
   ============================================================ */

/* Keep header containers untransformed so dropdowns can layer correctly. */
.top-header {
    position: relative;
    z-index: 1000;
}

/* Top header content slides down from above */
.top-header-content {
    animation: slideDownFade 0.5s ease both;
}

/* Main header content fades in */
.main-header .header-content {
    animation: fadeIn 0.6s ease 0.1s both;
}

/* Navbar — no load animation (causes mobile menu positioning issues) */
/* Navbar scroll transition is handled in the NAVBAR SHRINK section below */

/* Hero content slides up and fades in */
.hero-content,
.about-hero-content,
.contact-hero-content,
.bio-hero-content,
.profile-fade {
    animation: slideUpFade 0.8s ease 0.3s both;
}
.bio-journey {
    animation: slideRight 0.8s ease 0.3s both;
}
.bio-copy {
    animation: slideLeft 0.8s ease 0.3s both;
}
/* Hero background image fades in with slight zoom */
.hero-background {
    animation: heroZoom 1.2s ease 0s both;
}

/* ============================================================
   SCROLL ANIMATION — INITIAL HIDDEN STATES
   Elements with [data-animate] start invisible.
   animations.js adds .is-visible when they enter the screen.
   ============================================================ */

[data-animate] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-duration: 0.6s;
    /* Default: no transform — just fade */
}

/* Variants — different entry directions */
[data-animate="fade-up"] {
    transform: translateY(30px);
}

[data-animate="fade-down"] {
    transform: translateY(-20px);
}

[data-animate="fade-left"] {
    transform: translateX(-30px);
}

[data-animate="fade-right"] {
    transform: translateX(30px);
}

[data-animate="scale-up"] {
    transform: scale(0.95);
}

[data-animate="fade"] {
    transform: none;
}

/* Stagger delays — applied to nth children automatically by JS */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }

/* ── VISIBLE STATE ───────────────────────────────────────────
   When .is-visible is added by JS, element animates to this  */
[data-animate].is-visible {
    opacity: 1;
    transform: none;
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-28px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(28px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes heroZoom {
    from {
        opacity: 0.6;
        transform: scale(1.04);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================================
   HOVER MICRO-ANIMATIONS
   Subtle interactive feel on cards and buttons.
   ============================================================ */

/* Cards lift on hover */
.news-card,
.program-card,
.programme-card,
.project-card,
.profile-card,
.contact-card,
.department-item,
.featured-news-item {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.news-card:hover,
.program-card:hover,
.programme-card:hover,
.project-card:hover,
.profile-card:hover,
.contact-card:hover,
.department-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 63, 135, 0.12) !important;
}

.featured-news-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Buttons have a smooth press effect */
.btn,
.btn-primary,
.btn-secondary,
.btn-send,
.btn-explore,
.btn-download,
.btn-mandate {
    transition: transform 0.15s ease, background-color 0.25s ease, box-shadow 0.2s ease !important;
}

.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-send:active {
    transform: scale(0.97);
}

/* Read more links have an arrow slide */
.read-more,
.read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease, color 0.2s ease !important;
}

.read-more:hover,
.read-more-link:hover {
    gap: 10px;
}

/* Images have a smooth zoom on hover */
.news-image img,
.project-image img,
.programme-image img,
.mandate-img {
    transition: transform 0.4s ease !important;
}

.news-card:hover .news-image img,
.project-card:hover .project-image img,
.programme-card:hover .programme-image img {
    transform: scale(1.04);
}

/* Social links spin/scale on hover */
.social-link {
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}

.social-link:hover {
    transform: translateY(-3px) scale(1.1);
}

/* Nav links have smooth underline slide */
.nav-link {
    position: relative;
}

/* Footer links */
.footer-links a {
    transition: color 0.2s ease, padding-left 0.2s ease !important;
}

.footer-links a:hover {
    padding-left: 6px;
}

/* ============================================================
   NAVBAR SHRINK ON SCROLL
   JS adds .navbar-scrolled when user scrolls past 80px.
   ============================================================ */
.navbar {
    transition: padding 0.3s ease, box-shadow 0.3s ease !important;
}

.navbar.navbar-scrolled .nav-link {
    padding-top: 11px;
    padding-bottom: 11px;
    transition: padding 0.3s ease;
}

/* ============================================================
   PAGE TRANSITION — smooth exit when navigating away
   ============================================================ */
.page-transition-out {
    animation: fadeOut 0.25s ease forwards;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}