/* Flat SaaS reveal animations */

[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
[data-animate].animated {
    opacity: 1;
    transform: translateY(0);
}
[data-animate="fade-in"] { transform: none; }
[data-animate="slide-up"] { transform: translateY(28px); }
[data-animate="slide-down"] { transform: translateY(-28px); }
[data-animate="slide-right"] { transform: translateX(-28px); }
[data-animate="slide-left"] { transform: translateX(28px); }

[data-animate="slide-right"].animated,
[data-animate="slide-left"].animated { transform: translateX(0); }

[data-delay="100"] { transition-delay: 0.06s; }
[data-delay="200"] { transition-delay: 0.12s; }
[data-delay="300"] { transition-delay: 0.18s; }
[data-delay="400"] { transition-delay: 0.24s; }
[data-delay="500"] { transition-delay: 0.30s; }
[data-delay="600"] { transition-delay: 0.36s; }
[data-delay="700"] { transition-delay: 0.42s; }
[data-delay="800"] { transition-delay: 0.48s; }

.stagger-animation {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.stagger-animation.animated { opacity: 1; transform: translateY(0); }
.stagger-animation:nth-child(1) { transition-delay: 0s; }
.stagger-animation:nth-child(2) { transition-delay: 0.06s; }
.stagger-animation:nth-child(3) { transition-delay: 0.12s; }
.stagger-animation:nth-child(4) { transition-delay: 0.18s; }
.stagger-animation:nth-child(5) { transition-delay: 0.24s; }
.stagger-animation:nth-child(6) { transition-delay: 0.30s; }
.stagger-animation:nth-child(7) { transition-delay: 0.36s; }
.stagger-animation:nth-child(8) { transition-delay: 0.42s; }
.stagger-animation:nth-child(9) { transition-delay: 0.48s; }
.stagger-animation:nth-child(10) { transition-delay: 0.54s; }
.stagger-animation:nth-child(11) { transition-delay: 0.60s; }
.stagger-animation:nth-child(12) { transition-delay: 0.66s; }

.hover-lift { transition: transform var(--t-med), border-color var(--t-med); }
.hover-lift:hover { transform: translateY(-4px); border-color: var(--blue); }

.counter-animation { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    [data-animate] { opacity: 1 !important; transform: none !important; }
    .stagger-animation { opacity: 1 !important; transform: none !important; }
}