/* Bento Grid Animations */

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

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

[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(20px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.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; }

@keyframes float-up {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hover-lift {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-bento-hover);
}

.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; }
    .marquee-track { animation: none !important; }
}