/* ============================================================
   Dibai NGO — Animations & Keyframes
   ============================================================ */

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0);    }
}

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

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0);     }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0);    }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0);    }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1);   }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.05); }
}

@keyframes ripple {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}

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

@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Utility Animation Classes ───────────────────────────── */
.animate-fade-in      { animation: fadeIn     0.5s ease forwards; }
.animate-fade-in-up   { animation: fadeInUp   0.6s ease forwards; }
.animate-fade-in-down { animation: fadeInDown 0.5s ease forwards; }
.animate-scale-in     { animation: scaleIn    0.4s ease forwards; }
.animate-float        { animation: float      3s ease-in-out infinite; }
.animate-pulse        { animation: pulse      2s ease-in-out infinite; }

/* ── Hover Transforms ────────────────────────────────────── */
.hover-lift { transition: transform var(--transition-base), box-shadow var(--transition-base); }
.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.hover-scale { transition: transform var(--transition-base); }
.hover-scale:hover { transform: scale(1.03); }

.hover-glow:hover { box-shadow: 0 0 24px rgba(26,107,60,.35); }

/* ── Image Zoom on Hover ─────────────────────────────────── */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform var(--transition-slow); }
.img-zoom:hover img { transform: scale(1.08); }

/* ── Ripple Effect (for donate buttons) ─────────────────── */
.btn-ripple {
    position: relative;
    overflow: hidden;
}
.btn-ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255,255,255,.25);
    transform: scale(0);
    transition: transform 0.6s ease, opacity 0.6s ease;
    opacity: 0;
}
.btn-ripple:active::after {
    transform: scale(3);
    opacity: 0;
    transition: 0s;
}

/* ── Skeleton Loading ────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, var(--clr-light) 25%, #e8edf3 50%, var(--clr-light) 75%);
    background-size: 1000px 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: var(--radius-md);
}
.skeleton-text  { height: 1em;   margin-bottom: .5em; }
.skeleton-title { height: 1.5em; margin-bottom: 1em; width: 70%; }
.skeleton-img   { aspect-ratio: 16/10; }

/* ── Number Counter ──────────────────────────────────────── */
.counter-animate { animation: countUp 0.8s ease forwards; }

/* ── Spinner ─────────────────────────────────────────────── */
.spinner-ngo {
    width: 40px;
    height: 40px;
    border: 3px solid var(--clr-border);
    border-top-color: var(--clr-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ── Reduce Motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}