/*
 * ANFAR CONSULTING — ANIMATIONS
 * Intersection-Observer driven reveals only. No animation libraries.
 * Every rule here animates transform/opacity/filter — never layout
 * properties — per the performance requirements in the spec.
 * All motion is neutralized under prefers-reduced-motion at the
 * bottom of this file.
 */

/* ---- Scroll reveals (toggled by observer.js via .is-revealed) ---- */
.reveal-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    will-change: transform, opacity;
}
.reveal-fade {
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-out);
}
.reveal-scale {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal-right {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.is-revealed {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}
.delay-1 { transition-delay: 90ms; }
.delay-2 { transition-delay: 180ms; }
.delay-3 { transition-delay: 270ms; }
.delay-4 { transition-delay: 360ms; }

/* ---- Nav ---- */
.site-header {
    transition: background-color var(--dur-base) ease, border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}

/* ---- Buttons & links ---- */
.btn, .link-underline, .card, .service-card, .why-card, .industry-card, .timeline-dot, .faq-icon {
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* ---- Card lift ---- */
.why-card:hover, .service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}

/* ---- Image zoom on hover ---- */
.media-zoom { overflow: hidden; }
.media-zoom img {
    transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) ease;
}
.media-zoom:hover img {
    transform: scale(1.045);
}

/* ---- Timeline ---- */
.timeline-dot {
    transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.timeline-item:hover .timeline-dot {
    transform: scale(1.8);
}

/* ---- FAQ accordion ---- */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-slow) var(--ease-out);
}
.faq-icon { transition: transform var(--dur-base) var(--ease-out); }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }

/* ---- Mobile menu ---- */
.mobile-nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-base) var(--ease-out);
}
.mobile-nav.is-open { max-height: 480px; }
.menu-line {
    transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
    transform-origin: center;
}
.menu-toggle[aria-expanded="true"] .menu-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-line:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Scroll cue on hero ---- */
@keyframes scrollCue {
    0% { transform: translateY(0); opacity: 0.9; }
    50% { transform: translateY(10px); opacity: 0.3; }
    100% { transform: translateY(0); opacity: 0.9; }
}
.scroll-cue-bar { animation: scrollCue 2.4s var(--ease-out) infinite; }

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .reveal-up, .reveal-fade, .reveal-scale, .reveal-left, .reveal-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .scroll-cue-bar { animation: none; }
    * {
        scroll-behavior: auto !important;
    }
    .btn:hover, .why-card:hover, .service-card:hover, .media-zoom:hover img {
        transform: none;
    }
}