/* ================================================
   SCROLL ANIMATIONS & TRANSITIONS
   ================================================ */

/* ---------- Base Animation States ---------- */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: var(--delay, 0s);
}

.animate-on-scroll.fade-up {
    transform: translateY(40px);
}

.animate-on-scroll.fade-left {
    transform: translateX(40px);
}

.animate-on-scroll.fade-right {
    transform: translateX(-40px);
}

/* ---------- Animated (Visible) State ---------- */
.animate-on-scroll.animated {
    opacity: 1;
    transform: translate(0, 0);
}

/* ---------- Service Card Stagger ---------- */
.service-card.animate-on-scroll {
    transition-delay: var(--delay, 0s);
}

/* ---------- Hero Entrance ---------- */
.hero-content h1 {
    animation: heroFadeUp 0.8s ease forwards;
    opacity: 0;
}

.hero-content .hero-subtitle {
    animation: heroFadeUp 0.8s ease 0.2s forwards;
    opacity: 0;
}

.hero-content .hero-btns {
    animation: heroFadeUp 0.8s ease 0.4s forwards;
    opacity: 0;
}

.hero-content .trust-badges {
    animation: heroFadeUp 0.8s ease 0.6s forwards;
    opacity: 0;
}

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

/* ---------- Pulse (for experience badge) ---------- */
.experience-badge {
    animation: subtlePulse 3s ease-in-out infinite;
}

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

/* ---------- Gallery Item Transitions ---------- */
.gallery-item {
    transition: opacity 0.4s ease, transform 0.4s ease;
}


/* ---------- FAQ Accordion Transition ---------- */
.faq-answer {
    transition: max-height 0.4s ease;
}

.faq-question i {
    transition: transform 0.3s ease;
}

/* ---------- Button Hover Animations ---------- */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ---------- Loading Spinner ---------- */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.fa-spin {
    animation: spin 1s linear infinite;
}

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

    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }

    html {
        scroll-behavior: auto;
    }
}