/* ===== Scroll-triggered animations ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-32px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(32px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Order steps: a gentle rise with a touch of scale, like icing settling */
@keyframes stepIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== Decorative animations ===== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(4deg); }
}

/* ===== Utility classes for animated sections (see AnimatedSection.razor) ===== */
[data-animate] {
    opacity: 0;
}

[data-animate].is-visible {
    animation-duration: 0.9s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate="fadeInUp"].is-visible { animation-name: fadeInUp; }
[data-animate="fadeIn"].is-visible { animation-name: fadeIn; }
[data-animate="fadeInLeft"].is-visible { animation-name: fadeInLeft; }
[data-animate="fadeInRight"].is-visible { animation-name: fadeInRight; }
[data-animate="stepIn"].is-visible { animation-name: stepIn; }

/* Narrow screens: sideways entrances become upward ones */
@media (max-width: 768px) {
    [data-animate="fadeInLeft"].is-visible,
    [data-animate="fadeInRight"].is-visible {
        animation-name: fadeInUp;
    }
}