/* ── Scroll Animations (frontend-design skill: high-impact reveals) ── */

/* Initial hidden state */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation variants */
.animate-on-scroll[data-animation="fade-up"],
.animate-on-scroll:not([data-animation]) {
    transform: translateY(32px);
}

.animate-on-scroll[data-animation="fade-down"] {
    transform: translateY(-24px);
}

.animate-on-scroll[data-animation="fade-left"]  { transform: translateX(-32px); }
.animate-on-scroll[data-animation="fade-right"] { transform: translateX(32px); }
.animate-on-scroll[data-animation="scale-up"]   { transform: scale(0.92); }

/* Visible state */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: none;
}

/* Delay helpers (set via data-delay attribute in JS) */
.animate-on-scroll[data-delay="100"]  { transition-delay: 100ms; }
.animate-on-scroll[data-delay="200"]  { transition-delay: 200ms; }
.animate-on-scroll[data-delay="300"]  { transition-delay: 300ms; }
.animate-on-scroll[data-delay="400"]  { transition-delay: 400ms; }
.animate-on-scroll[data-delay="500"]  { transition-delay: 500ms; }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Stagger utility for card grids: children get increasing delay */
.card-grid .animate-on-scroll:nth-child(1)  { transition-delay: 0ms; }
.card-grid .animate-on-scroll:nth-child(2)  { transition-delay: 80ms; }
.card-grid .animate-on-scroll:nth-child(3)  { transition-delay: 160ms; }
.card-grid .animate-on-scroll:nth-child(4)  { transition-delay: 240ms; }
.card-grid .animate-on-scroll:nth-child(5)  { transition-delay: 320ms; }
.card-grid .animate-on-scroll:nth-child(6)  { transition-delay: 400ms; }