/* ---------------------------------------------
   Blush & Brush – Scroll & Element Animations
   --------------------------------------------- */

[data-animate] {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
    will-change: opacity, transform;
}

/* visible state added by JS */
[data-animate].is-visible {
    opacity: 1;
    transform: none;
}

/* --- Specific animation directions/types --- */

/* fade-up is default (translateY handled above) */
[data-animate="fade-up"] {
    transform: translateY(26px);
}

/* fade-left */
[data-animate="fade-left"] {
    transform: translateX(26px);
}
[data-animate="fade-left"].is-visible {
    transform: translateX(0);
}

/* fade-right */
[data-animate="fade-right"] {
    transform: translateX(-26px);
}
[data-animate="fade-right"].is-visible {
    transform: translateX(0);
}

/* slide-in-left */
[data-animate="slide-in-left"] {
    transform: translateX(-40px);
}
[data-animate="slide-in-left"].is-visible {
    transform: translateX(0);
}

/* slide-in-right */
[data-animate="slide-in-right"] {
    transform: translateX(40px);
}
[data-animate="slide-in-right"].is-visible {
    transform: translateX(0);
}

/* zoom-in */
[data-animate="zoom-in"] {
    transform: scale(0.9);
}
[data-animate="zoom-in"].is-visible {
    transform: scale(1);
}

/* allow custom delays via inline style or JS */
[data-animate].has-delay {
    /* JS will set transition-delay inline */
}