/* ================================================================
   ff-stagger.css — reusable staggered entrance animation presets
   Works with ff-stagger directive. Each child receives:
     --ff-delay  (computed by directive)
     class="ff-stagger-item ff-anim-<preset>"
================================================================ */

/* ── Base: hidden until animation starts ─────────────────────────── */
.ff-stagger-item {
    animation-fill-mode: both;
    animation-duration: .28s;
    animation-delay: var(--ff-delay, 0ms);
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

/* Reset state: instantly hide children so re-entrance is clean */
.ff-stagger-reset > .ff-stagger-item {
    animation: none !important;
    opacity: 0 !important;
}

/* ── Preset: fade-up ─────────────────────────────────────────────── */
@keyframes ff-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ff-anim-fade-up { animation-name: ff-fade-up; }

/* ── Preset: fade-down ───────────────────────────────────────────── */
@keyframes ff-fade-down {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ff-anim-fade-down { animation-name: ff-fade-down; }

/* ── Preset: fade-in ─────────────────────────────────────────────── */
@keyframes ff-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.ff-anim-fade-in { animation-name: ff-fade-in; }

/* ── Preset: slide-left ──────────────────────────────────────────── */
@keyframes ff-slide-left {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}
.ff-anim-slide-left { animation-name: ff-slide-left; }

/* ── Preset: slide-right ─────────────────────────────────────────── */
@keyframes ff-slide-right {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}
.ff-anim-slide-right { animation-name: ff-slide-right; }

/* ── Preset: scale-up ────────────────────────────────────────────── */
@keyframes ff-scale-up {
    from { opacity: 0; transform: scale(.92); }
    to   { opacity: 1; transform: scale(1); }
}
.ff-anim-scale-up { animation-name: ff-scale-up; }

/* ── Preset: scale-down ──────────────────────────────────────────── */
@keyframes ff-scale-down {
    from { opacity: 0; transform: scale(1.06); }
    to   { opacity: 1; transform: scale(1); }
}
.ff-anim-scale-down { animation-name: ff-scale-down; }

/* ── Preset: flip-up (subtle 3D tilt) ────────────────────────────── */
@keyframes ff-flip-up {
    from { opacity: 0; transform: perspective(400px) rotateX(8deg) translateY(8px); }
    to   { opacity: 1; transform: perspective(400px) rotateX(0) translateY(0); }
}
.ff-anim-flip-up { animation-name: ff-flip-up; }

/* ── Duration modifiers (add alongside preset class) ─────────────── */
.ff-dur-fast  { animation-duration: .18s; }
.ff-dur-slow  { animation-duration: .42s; }

/* ── Easing modifiers ────────────────────────────────────────────── */
.ff-ease-bounce { animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.ff-ease-linear { animation-timing-function: linear; }