/* ==========================================================================
   VERMAIRE HOVENIERS - ANIMATIONS (simplified)
   ========================================================================== */

/* Reveal on scroll — GPU-promoted, shorter on desktop for snappier feel */
[data-reveal],
[data-reveal-card] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
        opacity 0.55s var(--ease),
        transform 0.55s var(--ease);
    will-change: opacity, transform;
}

[data-reveal].in-view,
[data-reveal-card].in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Once the reveal is done we no longer need will-change */
[data-reveal].in-view,
[data-reveal-card].in-view {
    will-change: auto;
}

@media (min-width: 1025px) {
    [data-reveal],
    [data-reveal-card] {
        transform: translate3d(0, 16px, 0);
        transition:
            opacity 0.45s var(--ease),
            transform 0.45s var(--ease);
    }
}

/* Staggered children */
.services-grid [data-reveal-card]:nth-child(1),
.process-grid [data-reveal-card]:nth-child(1),
.faq-list [data-reveal-card]:nth-child(1) { transition-delay: 0s; }

.services-grid [data-reveal-card]:nth-child(2),
.process-grid [data-reveal-card]:nth-child(2),
.faq-list [data-reveal-card]:nth-child(2) { transition-delay: 0.08s; }

.services-grid [data-reveal-card]:nth-child(3),
.process-grid [data-reveal-card]:nth-child(3),
.faq-list [data-reveal-card]:nth-child(3) { transition-delay: 0.16s; }

.services-grid [data-reveal-card]:nth-child(4),
.process-grid [data-reveal-card]:nth-child(4),
.faq-list [data-reveal-card]:nth-child(4) { transition-delay: 0.24s; }

.services-grid [data-reveal-card]:nth-child(5),
.faq-list [data-reveal-card]:nth-child(5) { transition-delay: 0.32s; }

.services-grid [data-reveal-card]:nth-child(6),
.faq-list [data-reveal-card]:nth-child(6) { transition-delay: 0.4s; }

/* Hero entrance — content fades in on load */
.hero-tagline,
.hero-title,
.hero-description,
.hero-actions,
.hero-stats {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
}

body.loaded .hero-tagline { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
body.loaded .hero-title { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
body.loaded .hero-description { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }
body.loaded .hero-actions { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
body.loaded .hero-stats { opacity: 1; transform: translateY(0); transition-delay: 0.65s; }

/* Lazy image fade */
/* Opt-in fade-in for images. Add class="lazy-fade" to use. */
img.lazy-fade {
    opacity: 0;
    transition: opacity 0.6s ease;
}

img.lazy-fade.loaded { opacity: 1; }