/* ==============================================
   GLOBAL ANIMATIONS — improx-group/assets/css/global/animations.css
   ============================================== */

/* ── [data-animate] base state ── */
[data-animate] {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate="fade-up"]    { transform: translateY(32px); }
[data-animate="fade-down"]  { transform: translateY(-32px); }
[data-animate="fade-left"]  { transform: translateX(-32px); }
[data-animate="fade-right"] { transform: translateX(32px); }
[data-animate="scale"]      { transform: scale(0.92); }
[data-animate="fade"]       { /* no transform — just opacity */ }

[data-animate].is-visible {
    opacity: 1;
    transform: none !important;
}

/* ── [data-stagger] groups ── */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-stagger].is-visible > *:nth-child(1)  { transition-delay: 0.05s; opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(2)  { transition-delay: 0.10s; opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(3)  { transition-delay: 0.15s; opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(4)  { transition-delay: 0.20s; opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(5)  { transition-delay: 0.25s; opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(6)  { transition-delay: 0.30s; opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(7)  { transition-delay: 0.35s; opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(8)  { transition-delay: 0.40s; opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(9)  { transition-delay: 0.45s; opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(10) { transition-delay: 0.50s; opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(n+11) { transition-delay: 0.55s; opacity: 1; transform: none; }

/* ── Process cards ── */
.process-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease,
                box-shadow var(--transition-base), border-color var(--transition-base);
}

.process-card.active {
    opacity: 1;
    transform: translateY(0);
}

/* ── Keyframes ── */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-14px); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,87,255,.3); }
    50%       { box-shadow: 0 0 0 12px rgba(0,87,255,0); }
}

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
    [data-animate], [data-stagger] > *, .process-card {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}