/**
 * Builder V8 — Animations
 * Keyframes for fade-in, slide-up, scroll-reveal.
 * animation_style: minimal → short durations (200–300ms).
 */

/* ---- Keyframes ---- */
@keyframes v8FadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

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

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

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

@keyframes v8ScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

/* ---- Animation utility classes ---- */
.v8-animate-fade-in {
    animation: v8FadeIn 0.3s ease both;
}

.v8-animate-fade-in-up {
    animation: v8FadeInUp 0.4s ease both;
}

.v8-animate-slide-in-left {
    animation: v8SlideInLeft 0.4s ease both;
}

.v8-animate-slide-in-right {
    animation: v8SlideInRight 0.4s ease both;
}

.v8-animate-scale-in {
    animation: v8ScaleIn 0.3s ease both;
}

/* ---- Scroll-reveal (applied by scroll-animations.js via IntersectionObserver) ---- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

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

.reveal-right {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

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

/* ---- Stagger delays for child elements ---- */
.v8-stagger > *:nth-child(1) { transition-delay: 0ms; }
.v8-stagger > *:nth-child(2) { transition-delay: 80ms; }
.v8-stagger > *:nth-child(3) { transition-delay: 160ms; }
.v8-stagger > *:nth-child(4) { transition-delay: 240ms; }
.v8-stagger > *:nth-child(5) { transition-delay: 320ms; }
.v8-stagger > *:nth-child(6) { transition-delay: 400ms; }

/* ---- Hover transitions ---- */
.v8-hover-lift {
    transition: transform var(--transition-base, 250ms ease), box-shadow var(--transition-base, 250ms ease);
}

.v8-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
}

/* On mobile, skip the scroll-reveal entirely — just show content in place.
   The left/right translate-in transforms can widen the page (horizontal
   scroll) and destabilise the sticky header on iOS Safari. */
@media (max-width: 768px) {
    .reveal, .reveal-left, .reveal-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

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

    .v8-animate-fade-in,
    .v8-animate-fade-in-up,
    .v8-animate-slide-in-left,
    .v8-animate-slide-in-right,
    .v8-animate-scale-in {
        animation: none;
    }
}