/**
 * CISD Website — Global Transitions & Animations
 * P1: Hover/focus states (pure CSS)
 * P2: Scroll-reveal utility classes (driven by transitions.js)
 */

/* ============================================================
   SCROLL REVEAL UTILITY (P2)
   Base hidden state — JS adds .is-visible to trigger
   ============================================================ */

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms ease, transform 500ms ease;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 500ms ease, transform 500ms ease;
}

.reveal-right {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 500ms ease, transform 500ms ease;
}

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* Stagger delays */
.reveal-d1 { transition-delay: 80ms; }
.reveal-d2 { transition-delay: 160ms; }
.reveal-d3 { transition-delay: 240ms; }
.reveal-d4 { transition-delay: 320ms; }
.reveal-d5 { transition-delay: 400ms; }

/* Faster variant for small elements */
.reveal-fast {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 400ms ease, transform 400ms ease;
}
.reveal-fast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   PAGE-LOAD ANIMATIONS (team profile pages)
   ============================================================ */

.load-slide-left {
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInLeft 500ms ease forwards;
}

.load-fade-down {
    opacity: 0;
    transform: translateY(-8px);
    animation: fadeDown 400ms ease forwards;
    animation-delay: 100ms;
}

.load-fade-up {
    opacity: 0;
    transform: translateY(8px);
    animation: fadeUp 450ms ease forwards;
    animation-delay: 200ms;
}

.load-fade {
    opacity: 0;
    animation: fadeIn 400ms ease forwards;
    animation-delay: 350ms;
}

.load-fade-last {
    opacity: 0;
    animation: fadeIn 350ms ease forwards;
    animation-delay: 450ms;
}

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

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

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

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

/* ============================================================
   NAVBAR (base.html) — P1
   ============================================================ */

.nav-link {
    transition: color 200ms ease;
}

.btn-donate-nav {
    transition: background-color 200ms ease, transform 200ms ease;
}

.btn-donate-nav:hover {
    transform: scale(1.02);
}

.social-icon {
    transition: color 200ms ease, transform 200ms ease;
}

.social-icon:hover {
    transform: translateY(-2px);
}

/* Dropdown reveal */
.dropdown-menu {
    transition: opacity 200ms ease, transform 200ms ease;
    transform-origin: top center;
}

/* ============================================================
   FOOTER (base.html) — P1
   ============================================================ */

footer a,
.footer a {
    transition: color 200ms ease;
}

.social-links a {
    transition: color 200ms ease, transform 200ms ease;
}

.social-links a:hover {
    transform: translateY(-2px);
}

/* ============================================================
   BREADCRUMB — P1
   ============================================================ */

.breadcrumb-item a,
.breadcrumb-nav a {
    transition: color 200ms ease;
}

/* ============================================================
   IMAGE ZOOM UTILITY — P1
   Apply .img-zoom to any wrapper; child img zooms on hover
   ============================================================ */

.img-zoom {
    overflow: hidden;
}

.img-zoom img {
    transition: transform 500ms ease;
}

.img-zoom:hover img {
    transform: scale(1.03);
}

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

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-fast {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .load-slide-left,
    .load-fade-down,
    .load-fade-up,
    .load-fade,
    .load-fade-last {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .img-zoom img {
        transition: none;
    }

    .btn-donate-nav,
    .social-icon,
    .social-links a {
        transition: none;
    }
}